CSS选择器

选择器

类型选择器 h1 {}

h1 {
    
}

通配选择器 * {}

全局选择器 。 由 * 带指的， 它选中了文档中的所有内容。

* {
    margin: 0;
}

更加易读
article *:first-child {
    
}

类选择器 .box {}

.box {

}

ID选择器 #box {}

#box {
    
}

标签属性选择器 a[title] {}

1. [attr]    a[title] {}

2. [attr=value]  a[href="https://www.x.com"] {}

3. [attr~=value]  p[class~="special"]  会匹配一个 special 类，也可以匹配一列用空格分开、包含a类的值。

4. [attr|=value]  div[lang|="zh"]  匹配 zh 或者 以 zh 开头的。

5. [attr^=value]  li[class^="box-"]  匹配所有开头位 box 的

6. [attr$=value] li[class$="-box"] 匹配结尾为 -box 的。

7. [attr*=value] li[class*="box"] 会匹配任何出现 box 的。

8. [attr="a" i]   会忽略大小写进行匹配。

伪类选择器 p:first-child {}

用于选择处于特定状态的元素, 比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

1. :active  在用户激活（例如点击）元素的时候匹配。
2. :checked 匹配处于选中状态的单选或者复选框。
3. :disabled 匹配处于关闭状态的用户界面元素
4. :first-child 
5. :first-of-type
6. :focus
7. :hover
8. :last-child
9. :not
10. :nth-child
11. :nth-of-type
12. only-child
13. :visited

伪元素选择器 p::first-child {}

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样.而不是向现有的元素上应用类。伪元素开头为双冒号::。

一些早期的伪元素曾使用单冒号的语法, 现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

1. ::after
2. ::before
3. ::first-letter
4. ::first-line 
5. ::selection 匹配文档中被选择的那部分。

• 组合使用: article p:first-child::first-line {}

关系选择器： 后代选择器 article p {}

关系选择器： 子代选择器 article > p {}

关系选择器： 相邻兄弟选择器 h1 + p {}

关系选择器： 通用兄弟选择器 h1 ~ p {}