CSS3选择
1、属性选择器(根据元素的属性及属性值来选择元素)
(1)E[att^=value]属性选择器:指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。
例如:
div[id^=one]
表示匹配包含id属性,且id属性值是以“one”字符串开头的div元素。
(2)E[att$=value]属性选择器:指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的字符串。与E[att^=value]属性选择器一样,E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。
例如
div[id$=one]
表示匹配包含id属性,且id属性值是以“one”字符串结尾的div元素。
(3)E[att*=value]属性选择器:用于选择名称为E的标记,且该标记定义了att属性,att属性值包含value字符串。该选择器与前两个选择器一样,E元素也可以省略,如果省略则表示可以匹配满足条件的任意元素。
例如
div[id*=one]
表示匹配包含id属性,且id属性值包含“one”字符串的div元素。
2、关系选择器
(1)子元素选择器:用来选择某个元素的第一级元素。
例如:希望选择只作为h1元素子元素的strong元素,可以这样写:h1>strong
(2)相邻兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。
①临近兄弟选择器:该选择器使用+来连接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
②普通兄弟选择器:使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个。
3、选择化伪类选择器
(1):root选择器:用于匹配文档根标签,在HTML中,根标签始终是html。即使用该标签定义的样式对页面的所有标签都生效,对于不需要该样式的标签,可以单独样式设置样式进行覆盖。
:root{ };
(2):not选择器:如果对某个标签使用样式,但是想排除这个结构元素下面的子结构元素,让子结构元素不使用这个样式,可以使用该选择器。
body*:not{ };
(3):only-child选择器:用于匹配属于某元素的唯一元素,也就是说,如果某个父元素仅有一个子元素,则使用该选择器。
标签名:only-child{ }
(4):first-child和:last-child选择器分别用于选择父元素中的第一个和最后一个元素。
标签名:first-child{ }
标签名:last-child{ }
(5):nth-child(n)选择器:可以选择父元素中正数任意一行
:nth-last-child(n)选择器:可以选择父元素中倒数任意一行
标签名:nth-child(n){ }
(6):nth-of-type(n)和:nth-last-of-type(n)选择器:用于匹配属于父类元素的特定类型的第n个子元素和倒数第n个子元素。
标签名::nth-of-type(n){ }
(7):empty选择器:用来选择没有子元素或者文本内容为空的所有元素,
:empty{ }
4、伪元素选择器
(1):before伪元素选择器:用于在被选元素的内容前插入元素,必须配合content属性来指定要插入的具体内容
<元素>:before{
content:文字/url();
}
(2):after伪元素选择器:用于在某个元素之后插入一些内容,使用方法与:before相同
<元素>:after{
content:文字/url();
}
注意: :before也可以写成::before