属性选择器

• [attribute] 用于选取带有指定属性的元素


• [attribute=value] 用于选取带有指定属性和值的元素。


• [attribute~=value] 用于选取属性值中包含指定词汇的元素。


• [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。


• [attribute^=value] 匹配属性值以指定值开头的每个元素。


• [attribute$=value] 匹配属性值以指定值结尾的每个元素。


• [attribute*=value] 匹配属性值中包含指定值的每个元素。。

关系选择器

• 子选择器（E>F） 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示


• 兄弟选择器 选择E元素所有兄弟元素F。



伪元素

伪    元        素



伪元素选择器


---
• 伪元素选择器：就是有连续两个冒号的选择器，如::first-line::first- letter、::before 和::after
• E::first-letter文本的第一个单词或字（如中文、日文、 韩文等）
• E::first-line 文本第一行；
• E::selection 可改变选中文本的样式；
• E::before和E::after


---


结构化伪类选择器


---
• 1.:root选择器 :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
• 2.:not选择器 如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
• 3.:only-child选择器 :only-child选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child选择器”可以选择这个子元素。
• 4.:first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
• 5.:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或者倒数第2个子元素，这两个选择器就不起作用了。为此，CSS引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。
• 7.:empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素。
• 8.:targer选择器 :targer选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）制定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:targer选择器所设置的样式才会起作用。


---


链接伪类


---
• 超链接的四种状态
• a标签有4种伪类（即对应四种状态）。
• :link “链接”：超链接点击之前
• :visited “访问过的”：链接被访问过之后
• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，但是不松手时。


---


列表


---
• CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。