选择器
郝东
224
选择器的种类
类型、类和ID选择器
这个选择器组,第一个是指向了所有HTML元素<h1>。
h1 { }
它也包含了一个class的选择器:
.box { }
亦或,一个id选择器:
#unique { }
标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式:
a[title] { }
或者根据一个有特定值的标签属性是否存在来选择:
a[href="https://example.com"] { }
伪类与伪元素
这组选择器包含了伪类,用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素:
a:hover { }
它还可以包含了伪元素,选择一个元素的某个部分而不是元素自己。例如,::first-line是会选择一个元素(下面的情况中是<p>)中的第一行,类似<span>包在了第一个被格式化的行外面,然后选择这个<span>。
p::first-line { }
运算符
最后一组选择器可以将其他选择器组合起来,更复杂的选择元素。下面的示例用运算符(>)选择了<article>元素的初代子元素。
article > p { }