这是一个非常简单的问题，所以我会尽量简短:
如何判断特定 DOM 元素的 CSS 属性是否被继承？
我问的原因是因为使用 jQuery 的 css 方法它将返回计算样式，它继承了父对象的 CSS 属性。有没有办法检索在对象本身上设置的属性？
一个例子可能会更好地解释我得到的东西:
CSS:
div#container {
color:#fff;
}
HTML:
<div id="container">
Something that should be interesting
<div class="black">
Some other thing that should be interesting
</div>
</div>
那么，在继承了color的div.black实例中，如何判断它是否被继承呢？
$('div.black:eq(0)').css('color') 显然会给我 #fff，但我想检索元素自身的样式，而不是其父元素的样式。
最佳答案
要实际确定 css 样式是继承还是设置在元素本身上，您必须实现浏览器应用的确切规则以确定元素上特定样式的使用值。
你必须实现这个 spec指定计算值和使用值的计算方式。
CSS 选择器可能并不总是遵循本可以简化问题的父子关系。考虑这个 CSS。
body {
color: red;
}
div + div {
color: red;
}
和以下 HTML:
<body>
<div>first</div>
<div>second</div>
</body>
first 和 second 都将显示为红色，但是，第一个 div 是红色的，因为它是从父级继承的。第二个 div 是红色的，因为 div + div CSS 规则适用于它，这更具体。查看父级，我们会看到它具有相同的颜色，但这不是第二个 div 从中获取它的地方。
浏览器不会公开任何内部计算，getComputedStyle 接口(interface)除外。
一个简单但有缺陷的解决方案是遍历样式表中的每个选择器，并检查给定元素是否满足选择器。如果是，则假设该样式直接应用于该元素。假设您想遍历第一个样式表中的每种样式，
var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
if (myElement.is(rules[i].selectorText)) {
console.log('style was directly applied to the element');
}
}
关于jquery - 我如何判断某个特定的 CSS 属性是否由 jQuery 继承？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5000108/