选择器CSS选择器及优先级

css选择器时间:2021-04-22 阅读:()

1.基础的选择器

选择器含义示例

* 通用元素选择器匹配任何元素 * {margin:0; padding:0; }E 标签选择器匹配所有使用E标签的元素 p { font-size:2em; }

2.组合选择器

选择器含义示例

3.CSS 2.1属性选择器

选择器含义示例

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

注 CSS 2.1属性选择器还有一个特点就是使用多个选择器 同事满足这多个选择器blockquote[class=q uote][cite] { color:#f00; }

4.CSS 2.1中的伪类

选择器含义示例

E:first-chi ld 匹配父元素的第一个子元素 p:first-chi ld { font-style: ital ic; }in p ut[type=text]:focus

E: l ink 匹配所有未被点击的链接 { color:#000; background:#ffe; }in put[type=text]:focus:hove r

E:visited 匹配所有已被}

E“\201D”“\2019″“\2019″; }

E:hover 匹配鼠标悬停其上的E元素

E:focus 匹配获得当前焦点的E元素

E: lang(c) 匹配lang属性等于c的E元素

5.CSS 2.1中的伪元素

选择器含义示例

E:first-l ine 匹配E元素的第一行 p:first-l ine { font-we ig ht:bold;

E:fi rst-le tte r 匹配E元素的第一个字母

.preamble:first-letter

E:before 在E元素之前插入生成的内容 { font-size:1.5em;font-weight:bold; }

6.CSS 3的同级元素通用选择器

选择器含义示例

E~F 匹配任何在E元素之后的同级F元素 p~ul { background:#ff0; }

7 CSS 3属性选择器

选择器含义示例

E[att^=”val”] 属性att的值以”val”开头的元素 div[id^="nav"]

{ background:#ff0; }E[att$=”val”] 属性att的值以”val”结尾的元素

E[att*=”val”] 属性att的值包含”val”字符串的元素

8.CSS 3中与用户界面有关的伪类

选择器含义示例

E:enabled 匹配表单中激活的元素 input[type="text"]:disa bled

{ background:#ddd;}

E:disabled 匹配表单中禁用的元素

E: :selection 匹配用户当前选中的元素

9.CSS 3中的结构性伪类

选择器含义示例

或:nth-of-type(1):nth-last-of-type(1)

10.CSS 3的反选伪类

选择器含义示例

E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px sol id#ccc; }

11.CSS 3中的:target伪类

选择器含义

E:target 匹配文档中特定”id”点击后的效果

CSS选择器优先级

CSS样式选择器分为4个等级 a、 b、 c、 d可以以这四种等级为依据确定CSS选择器的优先级。

1.如果样式是行内样式通过Style=” ”定义 那么a=1

2.b为ID选择器的总数

3.c为Class类选择器的数量。

4.d为元素选择器的数量

5.属性选择器伪类选择器和class类选择器优先级一样

6. ! important权重最高 比inline style还要高

例如

选择器特殊性(a,b,c,d)

Style=”” 1,0,0,0

#w rapper#content{} 0,2,0,0

#co ntent .date Posted {} 0,1,1,0d iv#co ntent {} 0,1,0,1

#content p {} 0,1,0,1

#co n te n t {} 0,1,0,0p.comment .dateposted {} 0,0,2,1div.comment p {} 0,0,1,2

.comment p {} 0,0,1,1p.comment{} 0,0,1,1

.comment {} 0,0,1,0divp {} 0,0,0,2p {} 0,0,0,1

CSS优先级的读法

这里先更正一些错误的读法。通过百度搜索到的内容中通常出现这样的写法(1,0,0,0) 但有部分文章对它的解释不全面有的甚至有误。

其中最大的一个错误就是把结果加 (1,0,0,0)=1000 (0,0,2,2)=22更有甚者(0, 1,0, 1)=0+1+0+1=2虽然这些理解在很简单的情况下看上去是正确的但本质上却是个重大的错误。

另外有部分文章把它理解为4个级别也相近但不能把条理分清楚理解起来也难。

“CSS优先级包含四个级别文内选择符 ID选择符 Class选择符元素选择符以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先”级。

这句话总结得很好但对初学者来说在理解方面就有点难度了 “四个级别” 太容易混淆其实应该是“四组级别” 。

我认为对优先级的读法应该是以“组”来分这个组之间相互独立从左到右进行对比。它们成组出现 以逗号分隔。selector( a , b , c , d )compare: ↑ , ↑ , ↑ , ↑selector( a , b , c , d )

正如w3c.org中原文所示分为a,b,c,d四组全为正整数默认为0对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时从左到右一一对比 当比出有大者时即可停止比较。li.red. level {}h1 + *[rel=up] {}ul ol li.red {}

#x34y {}

(上表中 ↑表示还要进行比较 √表示从此处已得到了结果)

其实这里就像个奥运金牌榜到我修改文章为止2008-08-12 我国以13金

领先详细如下

1 中国 13 3 4

2 美国 7 6 8

3 韩国 5 6 1

4 意大利 3 4 2

再有只要正确书写仅从优先级中大概知道选择器结构形式了如

1,0,0,0表示是元素内的style

0,2, 1, 1表示是一个由两个ID选择器 1个类或伪类或属性选择器以及一个元素选择器组成的选择器。

CSS优先级规则的细节

在纠正读法后才能开始讲详细的规则

* a组数值只有把CSS写进style属性时才会为1,否则为0.写进style的样式声明其实不算是个选择器所以这里面的b,c,d组值均为0只有真正的选择器才会有b,c,d组值。

* b组数值决定于ID选择器#ID有多少个ID选择器并会进行此组数值累加

* c组数值决定于类、伪类和属性选择符并会进行该组数值累加

* d组数值决定于元素名 即元素选择器并会进行该组数值累加注意这四组数值分别对应于不同类型的选择器互不影响根据读法法则进行比较。

最近在写css的时候由于经常使用到很长的多级选择器而碰到一些样式被覆盖或者覆盖不了的情况是相当的郁闷所以专门花了一些时间对一些选择器做了对比测试。这里先说明一下 由于ie6不支持css2.0选择器所以这些测试忽略了一些2.0的选择器和连接符如伪类(:hover) 属性( [type=” text” ]) 子选择符(>)等仅对#id .class tag和空格连接符测试。

定义

1. CSS句子一个完整的选择器构成一个CSS句子如.abb#cd div.class。而用逗号连接的算作多个句子的省略定义方法。

2. CSS单词CSS句子中任何一个#id或.class或tag都算作一个CSS单词虽然照以前的理解一般把tag#id.class1.class2整个看作一个单词但是在本文讨论范围内这个只能算作一个由4个单词组成的词组。

3.优先级对于选择到同一个元素的两个CSS句子当他们定义该元素的同一个属性时如果其中一个写在前而不会被写在后面的覆盖这个属性那么就称这个CSS句子的优先级高于另一个。而当2个CSS句子互相调换在代码中的位置都是后面的覆盖前面的属性时称这两个CSS句子有相同的优先级。

测试用dom

3. <html id="html" class="html">

展开全文