时间戳

首页 > 解决方案 > 如何通过css属性选择元素

html - 如何通过css属性选择元素

问题描述

我有一个第三方库，可以将文本添加到我的 Angular 应用程序中，并且我想对其进行样式设置，不幸的是没有类或特定的元素名称可以用来做 css 选择器。

我的问题是是否可以基于 css 属性做 css 选择器。

例如选择所有加粗的元素

我试过了，但没有用，我得到了SassError: Expected identifier

ngx-contentful-rich-text {
  line-height: 2rem;

  *[font-weight=700] {
    margin-top: 2rem;
  }
}

标签： htmlcss

解决方案

你可能想用这个：

var paragraphs = document.getElementsByTagName('p');
function change() {
    var paragraphs = document.getElementsByTagName('p');
    for (i = 0; i < paragraphs.length; i++) {
       if (getComputedStyle(paragraphs[i]).fontWeight == 700) {
            paragraphs[i].style.backgroundColor = '#00ff00';
       }
    }
}

片段：

function change() {
    var paragraphs = document.getElementsByTagName('p');
    for (i = 0; i < paragraphs.length; i++) {
       if (getComputedStyle(paragraphs[i]).fontWeight == 700) {
            paragraphs[i].style.backgroundColor = '#00ff00';
       }
    }
}
<button onclick="change()">Change!</button>
<p style="font-weight:400;">Will not change.</p>
<p style="font-weight:700;">Will change.</p>

推荐阅读