CSS选择器

2017-04-16  本文已影响22人  syp_xp

选择器汇总

基本选择器

1.通用选择器 *

2.元素选择器 

3.id选择器 #id

4.类选择器 .class

类选择器可以应用到一到多个元素

类选择器可以通过 元素.class 的方式限定样式作用范围

class="class1 class2" 的方式可以给一个元素引用多种样式

5.属性选择器

5.1直接通过两个中括号里面包含属性名即可。当然,还有更多扩展的

属性选择器。

[href]

5.2匹配属性值的属性选择器。

[type="password"]

5.3属性值开头匹配的属性选择器

[href^="http"]

5.4属性值结尾匹配的属性选择器。

[href$=".cn"]

5.5属性值包含指定字符的属性选择器。

[href*="baidu"]

5.6属性值具有多个值时,匹配其中一个值的属性选择器

<p class="abc def">

[class~="def"]

5.7属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<i lang="en-us">HTML5</i>

[lang|="en"]

复合选择器

1.分组选择器:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择

器,还可以使用 ID 选择器、类选择器、属性选择器混合使用

p,b,i,span

2.后代选择器:选择p元素内部所有b元素。不在乎b的层次深度。当然,后代选择器也可

以混合使用 ID 选择器、类选择器、属性选择器

p b 

3.父子选择器:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一

级的元素,不可以再往下选择。

p > b

4.相邻兄弟选择器:匹配和第一个元素相邻的第二个元素。

p + b

5.普通兄弟选择器:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

p ~ b

伪元素选择器

上一篇下一篇

猜你喜欢

热点阅读