作者Ageis (Ageis)
看板Web_Design
标题Re: [问题] CSS X::pseudoElement 权重问题
时间Mon Jan 6 23:18:31 2014
参考来源:
http://goo.gl/pIhA4W
首先简单讲 specificity calculating
重←-------------------------------------→轻
inline style, ID, class/psuedo-class/attr, elements
e.g.
1) div .content = 0, 0, 1, 1
2) div > li .head-item = 0, 0, 1, 2
3) #nav span:not(.highlight) = 0, 1, 1, 1
/* 这里的 not 不重要，重要的是 not 里的东西 */
NOTE: 不是十进位，不要省略逗号
当你使用 !important 的时候会变成
1, 0, 0, 0, 0
它永远会套用在你指定的元素上，无视前段计算的逻辑
e.g.
div {
color: #f00;
}
.content {
color: #ff0 !important; /* win */
}
依原本的算法应该是 div (0, 0, 0, 1) <<< .content (0, 0, 1, 0)
但因为 !important 的关系，让它无条件取得控制权
然後我们看你第一个例子
#test {
color: #f00;
}
div::first-line {
color: #0f0 !important;
}
在这边，这两组应用的范围不一样，所以他们其实不会互相影响
如果是这样会比较看得出来
#test::first-line {
color: #0f0;
}
div::first-line {
color: #f00 !important;
}
在不用 !important 的情况下，first-line 会是青色
#test::first-line (0, 1, 0, 1) >>> div::first-line (0, 0, 0, 2)
再用你後面另一个例子来看
div {
background: #f00;
}
div:hover {
background: #00f !important;
}
这也不会互相影响，即使你加了 !important 因为 :hover 是当滑鼠"移过去"才发生
除非你这样写
div:hover {
background: #00f !important;
}
.content:hover {
background: #f00;
}
在没有 !important 的情况，应该是
div:hover (0, 0, 1, 1) <<< .content:hover (0, 0, 2, 0)
应用对象是一样的时候，才看得出 !important 的差异
最後还是提醒一下
(以免那个人看到这篇以为是圣杯这样XD)
实务上最好不要用啊...
大概就这样，有问题的话请先进不吝指教
(上 ptt 这麽多年，我还是不会上色...)
--
◆ 你不够资深喔！ <囧>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 61.70.245.4
※ 编辑: Ageis 来自: 61.70.245.4 (01/06 23:24)
1F：推 SonyF800:感谢您特别回了这一篇 不过第二个例子似乎和我所举的有差 01/07 08:52
3F：→ SonyF800:我!important是加在div 而不是div:hover 按照你的说法 01/07 08:54
4F：→ SonyF800:应该还是会互不影响 但目前测出来的结果却是div:hover被 01/07 08:55
5F：→ SonyF800:div覆盖了 hover的效果没出来@@ 01/07 08:55
6F：推 SonyF800:而且事实上不需要用到!important 只要你的权重是大过0011 01/07 09:02
7F：→ SonyF800:就能够覆盖掉他@@ 01/07 09:02
抱歉，我看错了，更正一下
因为
div {
background: #f00 !important;
}
div:hover {
background: #00f;
}
他们作用在同一个 div，在没有 !important 的情况下是
div (0, 0, 0, 1) <<< div:hover (0, 0, 1, 1)
但是因为你加了 !important，所以连带把 :hover override 了
p.s. 的确是不需要用到 !important，我在实务上还没用过
※ 编辑: Ageis 来自: 60.250.38.202 (01/07 16:19)
再补充
:hover 是 pseudo-class
::first-line 是 pseudo-element 他们两个不一样，要小心别搞混
所以我一开始才会说，div 跟 div::first-line 的作用范围不一样
但是你这个例子 div 跟 div:hover 作用的范围是一样的，所以才会产生
在 div { ... } 加了 !important 吃掉 :hover 的效果
※ 编辑: Ageis 来自: 60.250.38.202 (01/07 16:25)
8F：推 SonyF800:谢谢 我了解了 css真的是蛮神奇的XD 01/07 17:35