让我们来看看这三个选择器,从最高特异性到最低特异性:
.special-section p { }
.weird-font { }
p { }
许多CSS专家建议不要像第一个选择器那样嵌套.special-section p,因为它的特异性足够高,你不能用简单的类来覆盖它.weird-font.我想找到一种方法来继续实现嵌套.special-section p,但没有增加特异性.像这样的东西:
.weird-font { }
.special-section p /* with hack to decrease specificity */ { }
p { }
使用像这样的简单选择器来应用排版和文档范围的默认值是相当安全的p.但是,我想更改特定部分的默认值,类似于.special-section p,而不必使用hacks来增加选择器的特性.weird-font.我宁愿使用hack来降低特异性,而.special-section p不是使用hack来增加特异性.weird-font.有没有办法做到这一点？
大胆的大写锁定TL; DR:
我知道选择器的具体情况如何确定,我认为它使用了飞溅的假设,我可以用有效的理论关系来支持我的不满,请不要回答解释W3计算规则的具体情况,请仔细阅读问题 < - 阅读.
这让我困扰了一段时间,当我为某些HTML编写一个类似于下面的样式时:
...
<div id="outer">
<span id="inner"></span>
<span></span>
...
</div>
...
为什么特异性规则会使选择器"#outer span"比"#inner"更具体？ID是唯一的,所以当我说"#inner"时,我只能指一个元素,为什么它不那么具体？我理解确定特异性的规则,我只是想知道这是故意的还是偶然的,如果有人知道如何向编写css标准的人提出这个问题.
我应该注意,我确实理解我可以使用#outer #inner来确保最大的特异性,但这似乎首先打败了ID的目的.当我编写模板时,这也是一个有问题的解决方案,我不确定一个ID是否会在另一个内部.我不是在找一个解决方法,只是一个理论答案.
我的问题是理论,完全基于集合逻辑.虽然我有,如果你为n个可能的项目中的1项定义一个规则,那么具体到你能去的那个吗？为什么CSS选择器的创建者会制定一个规则,可以定义n个可能项目的m个项目,其中m是n的子集,作为更具体的规则？
我的想法是#id将等同于按名称识别1个项目,而#id elm将根据名称与项目的关系来识别组.调用命名项比具有命名关系的未命名组更具特异性是完全违反直觉的.
看看这个jsfiddle:http://jsfiddle.net/ZNddz/
.intro:first-letter {
font-size: 130px;
}
span.letter {
background-color: red;
font-size: 30px;
}
p {
font-size: 80px;
}
第一个规则由一个类选择器和一个pseudo-element选择器= 11组成
第二个规则由一个类选择器.letter和一个标签选择器span= 11组成
这两个规则具有相同的特异性,因此可以合理地相信获胜者应该是最后一种风格.显然事实并非如此.所以我决定background-color在第二个规则中添加一个属性,你可以看到它的高度为30px.
我从中推断出两条规则都没有选择相同的元素.但是,我想要对这种效果进行官方解释,这有点太离奇了.
我有两个CSS规则互相跟随:
.some td:first-child:before {
content:url('path/to/image.png')" " ;
}
.some .other:before {
content:url('path/to/image2.png')" " ;
}
这是HTML片段:
<table class="some">
<tr>
<td class="other">Text goes here</td>
<td>Some more text.</td>
</tr>
</table>
它们都应该应用于同一个表格单元格.没有班级的那个人意味着后备.但出于某种原因,它总是在第二条规则上选择第一条规则.我知道第二个可以工作,因为如果我禁用Firebug中的第一个,它将被使用.
我在这里错过了什么？
我的主要目标是尝试根据特异性重新排序CSS样式块.我之前从SO那里得到了帮助,我设法产生了这个功能.见要点.
这是一个例子:
function specificity($selector){
// https://gist.github.com/2774085
}
$compare = function($a, $b) use ($specificity) {
return $specificity($a) - $specificity($b)
};
$array = css_array();
uksort($array, $compare);
以上一直很有效,直到我遇到这个CSS:
html, body, body div{
background: transparent;
}
body {
background-color: #D96F02;
}
这被重新排序到这个:
body { // 1 point
background-color: #D96F02;
}
html, body, body div{ // 4 points
background: transparent;
}
但是,这不是浏览器应用CSS的方式.
我认为我的特异性功能可能缺少CSS顺序的重要性而不是基于选择器特异性的排序？这是真的？
我认为我应该做的是在我的比较函数中,我应该总是添加额外的说法,10因为特异性不仅仅基于选择器,它也基于选择器的顺序.所以像这样:
$compare = function($a, $b) use ($specificity) {
return ($specificity($a) + 10) - $specificity($b)
}; …我有一个 CSS 模板，我想在某些 HTML 标记中使用最少量的属性，同时允许稍后根据需要通过类（而不是 ID）轻松自定义该标记。
<ul data-role = 'a'>
<li>A</li>
<li>B</li>
</ul>
<style>
[data-role="a"] { /* ... */ }
[data-role="a"] > :first-of-type { /* ... */ }
[data-role="a"] > :last-of-type { /* ... */ }
</style>
问题是，由于 CSS 的特殊性，我面临着要么制作所有选择器类，要么强制对我的内容进行任何样式表修改都非常具体：
<style>
[data-role="a"] > li { } /* custom overriding CSS */
</style>
与
<ul class = 'a'>
<li class = 'a-top'>A</li>
<li class = 'a-bottom'>B</li>
</ul>
<style>
a {/* */}
a-top {/* */}
a-bottom {/* */}
</style>
有没有办法在不使用 的情况下强制获得特异性产量 …
在我的下面的代码中,我已经为h1定义了更具体的规则为#inner h1,并且为#container h1定义了更少的特定规则.但是如果将#container h1放在#inner h1之后然后它会生效并且#inner h1被忽略,而它不应该是因为它更具体.
请帮助我理解这个问题.
CSS:
#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }
HTML:
<div id="container">
<div id="inner">
<h1>Hello World!</h1>
</div>
</div>
我想知道在以下场景中有效的算法是什么:
给出一组解析的css规则,例如.
p.pStyle{margin-bottom:20px;font-family:Arial;}
p{font-family:Verdana;}
p.anotherPStyle{margin-bottom:10px;}
从css样式表中,有几个规则集可能适用于给定元素(比如<p class="pStyle anotherPStyle">hello</p>我的文档中的a).
我需要首先确定样式表中的哪些规则适用于给定元素(所以就是这样p, pStyle and anotherPStyle),然后创建一个能够按特定性(从最具体到最常规)对适用规则进行排序的比较器.注意:我已经设计了一个算法,一旦排序就应用规则,因此您无需有效地解决该问题.
我一直在玩弄几个想法,即涉及确定给定规则特定的DOM树中的级别的想法......虽然我不确定这是否是正确的方法？
浏览器引擎如何有效地执行此操作？我希望用Java复制它,但我对许多其他语言很满意,所以你能提供的任何代码都是最受欢迎的.
谢谢
我有以下css3过渡和轻松的效果:
HTML
<div class="button">
<a href="#" onMouseOver="clicksound.playclip()"></a>
<p id="myId" class="top"></p>
</div>
CSS
* {
padding: 0;
margin: 0;
}
.button {
width: 180px;
margin-top: 45px;
}
.button a {
display: block;
height: 40px;
width: 180px;
/*TYPE*/
color: black;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
.button a {
background:url(http://imageshack.com/a/img819/761/dqj.gif);
margin: -50 0 0 0;
z-index: -1;
}
p#myId {
background: url(http://imageshack.com/a/img854/1921/9ft3.png);
display: block;
height: 40px;
width: 167px;
margin: -40px 0 0 5px;
z-index:-1;
/*TYPE*/
text-align: …