是否可以在同一个HTML文件中使用2个具有相同名称的CSS类？如果是这样,你如何在造型元素之间区分两者？
我简要介绍了CSS3选择器规范,但找不到任何解决这个问题的方法.另外,当你移动CSS声明时,我并没有想到这会改变它的结果,但确实如此.任何帮助都会很棒.
div.green_colour div.has_colour{
background-color: green;
}
div.red_colour div.has_colour{
background-color: red;
}<div class="red_colour">
<div class="green_colour">
<div class="has_colour">
I would like this to be green
</div>
</div>
</div>
<div class="green_colour">
<div class="red_colour">
<div class="has_colour">
I would like this to be red
</div>
</div>
</div>我有以下内容:
<section class="main_section">
<article>
...
</article>
</section>
在我的样式表中,我有:
.main_section article {
background-color:#fff;
/* ... */
}
这篇文章的风格,我很高兴.现在,对于单个实例article,我想执行以下操作:
<section class="main_section">
<article class="special-bg">
...
</article>
</section>
我已经定义了:
.special-bg {
background-color: #276a7f;
}
但是课程没有设置背景颜色.似乎html标记的样式article优先,无论样式表中CSS规则的顺序如何.
如何使用样式类覆盖样式化html标记的CSS属性？这是可能吗？还有其他选择
我需要做什么才能使[id^=value]选择器具有与常规ID相同的特异性,为什么它不等于或更大？(考虑到我也给了它html)
html div[id^="blue"] {
background-color: blue
}
#blue4 {
background-color: red
}
jsfiddle: http ://jsfiddle.net/bjwe6yr0/1/
在使用级联样式表时，我观察到了以下特定顺序：
第一定律：内联样式
第二定律：ID选择器的数量
第三定律：类选择器的数量
第四定律：元素选择器的数量
因此，首先使用内联样式的项，其次是具有一个或多个ID选择器的声明，其次是具有一个或多个类选择器的声明，然后是具有一个或多个元素选择器的声明。使用更多ID，类和元素分别意味着更高的优先级。
从这个角度来看，我无法理解以逗号分隔的ID，类或元素列表的位置。逗号分隔的列表是否有任何特殊的优先级规则？另外，在单个逗号分隔的列表中，出于计算特异性的目的，ID，类和元素是否被视为单独的项目？
代码示例：
html, body, header {
position: absolute;
top: 0px;
}
header {
position: relative;
top: 50px;
}
在上面的示例中，什么优先？逗号描述的列表是否被视为引用单个元素，在这种情况下，标头仅会在级联中排在最后就优先考虑，还是逗号描述的列表被视为多个元素，因此具有优先级？还是我应该首先考虑其他规则？
这是本书第5条规则,规定浏览器如何确定在冲突中应用哪条规则:
id选择器是第二个最具体的[在内联样式属性之后].如果规则中有多个id,则id选择器数量最多的规则将获胜.
我真的不明白规则2在谈论-它说:"如果在一个以上的ID 规则 "(这是单数).如果只有一条规则,那么如何发生冲突或比较("最大赢的规则")？一个规则如何具有不同数量的id选择器,如果只有一个规则,那么冲突在哪里？
有人可以彻底遵守这条规则吗？感谢您的帮助,因为我正在努力获取网页设计的基础知识
考虑<div class="well well-large well-small" />来自 twitter bootstrap https://github.com/twitter/bootstrap/blob/master/less/wells.less的以下样式
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%);
.border-radius(@baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding: 24px;
.border-radius(@borderRadiusLarge);
}
.well-small {
padding: 9px;
.border-radius(@borderRadiusSmall);
}
CSS 如何决定在这种情况下应用哪种填充？它是 19px、24px、9px 还是未定义的值？我对特异性的理解是初步的，似乎在这种情况下，.well .well-large and .well-small
我有一个样式表用于ASP.Net站点中的多个CSS页面.其中两个页面的列表几乎完全相同.
例如
所有页面的样式:
li { padding-left:40px; text-indent:-44px; }
列表样式需要单独的样式:
.customlistitem {padding-left:90px; text-indent:0px; }
然后在实际页面中需要略有不同风格的列表:
<li class="customlistitem">
问题是customlistitem选择器没有覆盖样式表中的样式.为什么是这样 ？
继承属性接收到的 CSS 特异性级别是多少？我通读了关于 CSS 特异性的 W3 建议，因此我了解如何计算直接针对同一元素的 css 规则的不同特异性，但我没有看到那里提到赋予继承属性的特异性级别。
特别是，我遇到的问题与标题元素有关，尽管我很想从总体上理解这一点。
例如，下面是一段 HTML：
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
现在，如果我包含一些这样的 CSS：
.all_red_text { color: red; }
我会得到我期望的结果。另一方面，如果我包含的 css 是
h2 { color: black; }
.all_red_text { color: red; }
那么所有的文字都会是黑色的。在第一种情况下，有一些默认浏览器 CSS 可以被继承的属性覆盖，但是当在第二个示例中手动指定相同的属性时，它优先于继承的属性。
我的推理是否错误，这是一个有效的 CSS 规则吗？
首先：
第二：
但：
这真的让我感到惊讶，因为我以前从未听说过这种组合，既没有在特异性战争中听说过，也没有在https://www.w3.org/TR/selectors/#specificity中听说过。