1.属性选择器
HTML
<p name="a">用于选取带有指定属性的元素</p> <p name="line">用于选取带有指定属性和值的元素</p> <p name="line1 line2">此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词</p> <p name="b">用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。</p> <p name="mline">匹配属性值以指定值开头的每个元素</p> <p name="mlines">匹配属性值以指定值结尾的每个元素</p> <p name="mliKnes">选择器匹配属性值包含指定值的每个元素</p>
CSS
/* css属性选择器 [attr]用于选取带有指定属性的元素 [attr=value]用于选取带有指定属性和值的元素 [attr~=value]此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词 [attr|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attr^=value]匹配属性值以指定值开头的每个元素 [attr$=value]匹配属性值以指定值结尾的每个元素 [attr*=value]选择器匹配属性值包含指定值的每个元素 */ p{ border: 1px solid #000; 500px; } p[name]{ background: pink; } p[name=line]{ background: red; } p[name~=line2]{ background: #00CC99; } p[name|=b]{ background: #880000; } p[name^=m]{ background: #6347ED; } p[name$=s]{ background: yellow; } p[name*=K]{ background: fuchsia; }
2.伪类选择器
(1)结构性伪类选择器
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素,等同于 p:nth-last-child(1)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数
(2)文字伪类
:first-letter 选择器用于选取指定选择器的首字母
:first-line 选择器用于选取指定选择器的首行
(3)链接伪类
:link 选择器用于选取未被访问的链接
:visited 选择器用于选取已被访问的链接
:active 选择器用于选择活动链接,当您在一个链接上点击时,它就会成为活动的(激活的)
:hover 选择器用于选择鼠标指针浮动在上面的元素
(4)表单伪类
:focus 选择器用于选取获得焦点的元素
:enabled 选择器匹配每个已启用的元素(大多用在表单元素上)
:disabled 选择器匹配每个被禁用的元素(大多用在表单元素上)
:checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框),只有 Opera 支持 :checked 选择器
(5)
兼容性:所有主流浏览器均支持 ,除了 IE8 及更早的版本
:empty 选择器匹配没有子元素(包括文本节点)的每个元素
:root 选择器匹配文档根元素,在 HTML 中,根元素始终是 html 元素
:target 选择器可用于选取当前活动的目标元素,URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)
:not(selector) 选择器匹配非指定元素/选择器的每个元素
::selection 选择器匹配被用户选取的选取是部分,只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline