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