作者SonyF800 (索尼F800)
看板Web_Design
标题[问题] CSS X::pseudoElement 权重问题
时间Sun Jan 5 23:21:27 2014
小弟刚刚在测试CSS各项选择器的权重
发现了一件我有点意外的事
一般而言加上!important应该会是权重最大的
不太会被覆盖
(除非你在後面再用!important覆盖 但这颇没意义XD)
可是 X::pseudoElement好像超越了!important的权重
以以下code为例
(於浏览器上的颜色已标示)
<html>
<head>
<style type="text/css">
div::first-line{
color:red;
}
#test {
color:blue !important;
}
</style>
</head>
<body>
<div class="test" id="test" >
css test
<br>
csssssssss
</div>
</body>
</html>
如果!important是最高的权重
应该都要是蓝色才对
但现在的状况似乎是告诉我::first-line比!important权重还高...
因为有点不确定
上来问问大家O_O
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.116.116.46
1F：→ mmis1000:虚拟盖虚拟阿， ::first-element !important;铁定更高 01/05 23:28
2F：→ mmis1000:不这样设计的话，选择器就没用处了 01/05 23:29
哦....我听不太懂m大你的意思...
所以!important 的权重是比::first-line低?
※ 编辑: SonyF800 来自: 140.116.116.46 (01/05 23:32)
3F：推 mmis1000:!important是指 "相同选择器"之下 01/05 23:33
4F：推 mmis1000:加上::first-element根本不能算同一个选择器阿 01/05 23:34
5F：→ mmis1000:::first-element本来就比没加条件的优先度高阿 01/05 23:36
6F：→ mmis1000:!important是指，当同一选择器有重复规则时，优先用他的 01/05 23:39
喔喔我大懂了 不过像是:hover :focus :active之类的应该也算虚拟选择器吧?
可是好像能够被覆盖欸...
※ 编辑: SonyF800 来自: 140.116.116.46 (01/05 23:42)
照翻译上来说:active之类的好像是 "用户操作虚拟类别选择器"
::first-line ::first-letter ::after ::before 算是"虚拟元素选择器"的样子
※ 编辑: SonyF800 来自: 140.116.116.46 (01/05 23:44)
8F：→ mmis1000:不同选择器当然是照正常优先度排阿 01/05 23:47
10F：→ mmis1000:如果是由不同的(虚拟)元素目标apply的样式 01/06 01:30
11F：→ mmis1000:优先看元素优先度再比!important 01/06 01:31
12F：→ mmis1000:如果是指向同一元素的样式，先看!important 01/06 01:33
13F：→ mmis1000:虽然文件上是写"相同表达式"，但各家浏览器的实作似乎是 01/06 01:47
14F：→ mmis1000:"相同元素" 01/06 01:47
16F：→ Ageis:另外，你要实验应该拿同权重的来试 01/06 03:34
17F：→ mmis1000::not事实上有加权重，div + important事实上比 .class大 01/06 03:46
18F：→ mmis1000:.class加important会盖掉.class:hover 01/06 03:48
19F：→ mmis1000:就是css3，也没详细写出!important跟权重的关系 01/06 03:50
20F：→ Ageis:哦…你看了下面的 Important Notes 没? 01/06 09:29
21F：→ Ageis::not() adds no specificity by itself, only what's inside 01/06 09:31
22F：→ Ageis:it's parentheses. 01/06 09:31
23F：→ Ageis:The !important value appended a CSS property value is an 01/06 09:32
24F：→ Ageis:automatic win. 01/06 09:32
25F：→ Ageis:...snip... You could think of it as adding 1,0,0,0,0 01/06 09:33
26F：→ Ageis:以他的例子来说 #test 跟 div::first-line 根本不冲突 01/06 09:35
27F：→ Ageis:这样要测什麽？ 01/06 09:35
A大你好
如果按照我目前的理解
之所以我举的例子不会被!important覆盖
是因为那两个是作用在不同的位置
那div:hover 和 div作用的位置是相同的吗?
因为 div:hover{color:red;}
是会被 div {color:blue !important;}
覆盖的@@
※ 编辑: SonyF800 来自: 140.116.116.46 (01/06 11:12)
28F：→ danny8376:div & :hover都在完整的DIV上 01/06 12:34
29F：→ danny8376:但是:first-line应该不可能会在整个div上 是吧? 01/06 12:34
感谢
这样说明感觉有更清楚些
目前会有这种状况的应该只有::after ::before ::first-letter 和 first::line吧?
30F：→ Ageis:作用的范围不一样 就不存在 override 的问题 01/06 17:57
31F：→ Ageis:btw 一般我不建议使用 !important 01/06 17:58
32F：→ Ageis:因为它会造成 debug 的困难 实务上要使用最好走出去吹吹风XD 01/06 17:59
尽量不要用!important这点我知道
我只是单纯为了测试权重而已@@
所以目前来看我的理解应该是没错吧??
※ 编辑: SonyF800 来自: 140.116.116.46 (01/06 19:38)
33F：→ Ageis:我觉得我回文讲好了... 01/06 22:41