选择器
类型选择器 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 {}