属性选择器
// 选择既是button 又有disabled属性 的按钮
button[disabled]{
cursor:default;
}
类选择器,属性选择器,伪类选择器 权重为10
属性 | 写法 |
---|---|
属性 | button[disabled] |
属性名 | div[type=‘search’] |
属性开头 | div[class^=‘icon’] |
属性结尾 | div[class$=‘icon’] |
属性包含 | div[class*=‘icon’] |
结构伪类选择器
介绍 | 写法 |
---|---|
第一个 | :first-child |
最后一个 | :last-child |
第几个 | nth-child(n) |
子元素该类型的第一个 | first-of-type |
子元素该类型的最后一个 | last-of-type |
子元素该类型的第n一个 | nth-of-type(n) |
nth-child(n)
- 数字
- odd/even 偶数基数
- n=0
- 2n (奇数
- 2n+1 (偶数
- 5n (5 10 15
- n+5 (从第五个开始
- -n+5 (前五个,包括第五个
伪元素选择器
介绍 | 写法 |
---|---|
之前 | ::before |
之后 | ::last |
必须有content
属性
会创建一个元素(行内元素)/盒子
和标签元素一样,权重为1