二、CSS之——选择器

html-css015

二、CSS之——选择器,第1张

作用:通过元素选择器可以选择页面中的所有指定元素

语法:标签名{}

作用:通过元素的class属性值选中一组元素

语法:.class属性值{}

id选择器

作用:通过元素的id属性值选中唯一的一个元素

语法:#id属性值{}

复合选择器(交集选择器)

作用:可以选中同时满足多个选择器的元素

语法:选择器1选择器2选择器N{}

选择器分组(并集选择器)

作用:通过选择器分组可以同时选中多个选择器对应的元素

语法:选择器1,选择器2,选择器N{}

通配选择器

作用:可以用来选中页面中的所有的元素

语法:*{}

元素之间的关系:

父元素:直接包含子元素的元素

子元素:直接被父元素包含的元素

祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素

后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素

兄弟元素:拥有相同父元素的元素叫做兄弟元素

作用:选中指定元素的指定后代元素

语法:祖先元素 后代元素{}

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

给链接定义样式:

有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。

其他:

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法: :not(选择器){}

比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法:

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用:选中指定父元素的指定子元素

语法:父元素 >子元素

比如body >h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系,还可以根据兄弟关系查找元素。

语法:

兄弟元素 + 兄弟元素 :查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。

比如:

这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。

不同的选择器有不同的权重值:

css的权重等级可以分为5个级别:

1.第一级别:内联样式,详细大家都知道什么是内联样式,既是在标签添加style属性<div style=""></div>,这种方式权重值最高,权重值为1000,但是开发过程中比较少用到这种,因为现在推荐的方式都是将css,js,html写成单独文件。这样子看起来会比较整洁以及方便管理。

2.第二级别:ID选择器,id选择器就是使用"#"开头选择,大家应该都明白,这种选择方式的权重值为0100。

3.第三级别:class选择器,class选择器就是使用"."开头的选择器,这种选择方式的权重值为0010.

4.第四级别:标签选择器以及伪类选择器,就是直接使用标签或者伪类选择器,这种两种选择方式的权重值都为0001.

5.这里提醒一下通用选择器(*),子选择器(>)和相邻同胞选择器( )这三种是没有权重的,也就是权重值为0000,虽然没有权重 但是比继承样式权重高;这里值得提醒一下,并非所有的伪类选择器的权重都为i,总一些领导家的孩子,像a:link,a:visited伪类选择器,他们的权重比第三级别class选择器的权重还高。

这里要提醒一下,这里的权重并不是10进制,不过在比比较的时候可以当作十进制去叠加。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表:

选择符 语法 示例 特性

通配选择符 * *{ width:560px} 0,0,0,0

类型选择符 E1 td { font-size:12px} 0,0,0,1

伪元素选择符 :first-line :first-line{ font-size:12px} 0,0,0,1

伪类选择符 :link :link { font-size:12px} 0,0,1,0

属性选择符 [attr] [title] {color:blue} 0,0,1,0

ID选择符 #ID #test{ font-size:12px} 0,1,0,0

类选择符 E1.className .test{color:blue} 0,0,1,0

子对象选择符 E1 >E2 body >p {color:blue} E1+E2

相邻选择符 E1 + E2 div + p {color:blue} E1+E2

选择符分组 E1,E2,E3 .td1,a,body {color:blue} E1+E2+E3

包含选择符 E1 E2 table td {color:blue} E1+E2

规则:

1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。

如:<div style=”color: red”>test</div>

外部定义指经由<link>或<style>标签定义的规则;

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加,

{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity,

然后在比较取舍时按照从左到右的顺序逐位比较

———-以上内容都是权重理论上的知识,按理说支持css2.1的浏览器应该都遵循———-

IE6和IE7却不完全是那么回事;这里说的IE7排除掉IE8的兼容模式。

1

2

3

4

5

6

7

8

a { /* 权重为[0,0,1] */

    color: #00f

    background-color: #ff0

}

a:hover { /* 权重为[0,1,1] */

    color: #ff0

    background-color: #00f

}

蓝色字,黄色背景,鼠标悬停的时候颜色颠倒

接下来,在添加规则

1

2

3

4

5

p a.cl1 { /* 权重为[0,1,2] */

    color: #f00

    background-color: #0ff

}

<p><a class="cl1" href="#">...</a></p>

红色字,浅绿色背景,权重为 [0,1,2], 比第一条权重高

在IE6下”normal” (not hover) 的值被覆盖了, 但是没有覆盖”hover”的值. 换句话说,权重为[0,1,1]的”hover”依然生效, 它没有被比他权重高的p a.cl1 [0,1,2]所覆盖 (但是没有定义:hover伪类)

1

2

3

4

5

.cl2 a.cl3 { /* 权重为 [0,2,1] */

    color: #f00

    background-color: #0ff

}

<p class="cl2"><a class="cl3" href="#">...</a></p>

红色字,浅绿色背景,权重为 [0,2,1], 比第一条规则”normal”和”hover”都要高

现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重 [0,2,1] 完全覆盖了权重 [0,1,1]

1

2

3

4

5

div p :hover { /* 权重为 [0,1,2] */

    color: #f00

    background-color: #0ff

}

<div><p><a href="#">...</a></p></div>

当鼠标悬停在链接上的时候是红色字,浅绿色背景 , 权重为 [0,1,2], 比第一条”hover”的权重 [0,1,1]高

第一条:hover完全被覆盖,IE6也是一样. 这个例子的权重 [0,1,2]和第二个例子的权重是一样的,但是它多了对 伪类:hover的定义就能完全覆盖第一条”hover”规则, 而第二个例子就不会覆盖

演示地址:IE6/Win: 关于伪类:hover的权重问题

IE6/win下伪类:visited也存在类似问题,不再赘述,演示地址:IE6-/Win: 关于伪类:visited的权重问题

还有其他一些,在IE67下都会产生错误权重的情况,其他浏览器有条件的请帮忙测试一下:

1

2

3

4

5

6

7

p.c12 {/* 权重为[0.1.1] */

    color: #c00

}

div .c12 {/* 权重为[0.1.1] */

    color: #090

}

<div><p class="c12">el.class (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el .class (red), el.class (green),就是正确的了

1

2

3

4

5

6

7

div .c24 {/* 权重为[0.1.1] */

    color: #009900

}

.c23 p {/* 权重为[0.1.1] */

    color: #CC0000

}

<div class="c23"><p class="c24">.class el (red), el .class (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el .class (red), .class el (green),就是正确的了

1

2

3

4

5

6

7

div #c28 {/* 权重为[1.0.1] */

    color: #009900

}

#c27 p {/* 权重为[1.0.1] */

    color: #CC0000

}

<div id="c27"><p id="c28">#id el (red), el #id (green)  (错误显示 IE67/Win, IE/Mac and Op7-显示为红色)</p></div>

如果顺序换过来el #id (red), #id el (green),就是正确的了

:first-letter使用的比较少,这个例子就不写了

1

2

3

4

5

6

7

8

p.c31 {/* 权重为[0.1.1] */

    color: #c00/* red */

}

body p.c31 {/* 权重为[0.1.2] */

    color: #090/* green */

    color: miao  /* 故意的错误 */

}

<p class="c31">在IE67下会错误显示红色</p>

演示地址:其他权重错误