CSS 常用选择器小记
CSS 选择器是基础,只有通过选择器找到元素,才能针对其设置样式进行美化。
CSS 的选择器非常多,大致可以分为:
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合选择器(combinators)
- 伪类选择器(pseudo-classes)
- 伪元素选择器(pseudo-elements)
通用选择器
使用 *
表示,所有的元素都会被选中。
通常在快速重置样式时用到:
* {
margin: 0;
padding: 0;
}
元素选择器
也叫标签选择器,就是用 HTML 元素名作为选择器。
div {
width: 500px;
}
类选择器
使用 class 类名作为选择器,比如:
.title {
font-size: 20px;
}
id选择器
使用 id 属性名作为选择器,比如:
#submit {
background-color: #f8f8f8;
}
id 属性是作为匹配唯一元素而存在的,虽然也能用来设置样式,但通常还是会以 class 来进行样式的设置。
如果存在多个同名 id,则会全部匹配上。
属性选择器
将 HTML 元素的属性作为选择器,有多种用法,可以匹配属性名,属性值,或者部分属性值,比如:
[attr]:匹配有某个属性的元素
[attr=val]:匹配属性等于某个值的元素
[attr*=val]: 属性值包含某一个值 val
[attr^=val]: 属性值以 val 开头
[attr$=val]: 属性值以 val 结尾
[attr|=val]: 属性值等于 val 或者以 val 开头后面紧跟连接符-
[attr~=val]: 属性值包 val, 如果有其他值必须以空格和val分割
属性选择器通常会和其他选择器结合使用,来精确筛选:
div[data-intro] {
// ...
}
后代选择器
后代选择器有两种。
直接后代选择器,使用 >
箭头连接,比如:
div > span {
color: red;
}
span 必须是 div 的直接子元素。
所有后代选择器:
div span {
color: green
}
兄弟选择器
兄弟选择器也有两种。
一种是相邻兄弟选择器,使用 +
连接,比如:
.box + div {
color: red;
}
一种是所有的兄弟元素,使用 ~
连接:
.box ~ div {
color: green;
}
组合选择器
交集选择器
为了精准的锁定一个元素,可以使用并集选择器,多个选择器紧密写在一起,比如:
div.header {
height: 80px;
}
并集选择器
为了给多个元素设置同样的样式,可以使用 并集选择器,比如:
div, p, h1, h2, h3 {
margin:0;
padding: 0;
}
伪类选择器
伪类选择器用于选择处于特定状态的元素。最常用的就是当鼠标移动到一个元素上时的状态,使用 :hover
伪类表示:
div:hover {
cursor: pointer;
}
伪类选择器有很多,常用的有:
- :nth-child( )
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :root
- :empty
- :focus
- :disabled
- :checked
- :not()
伪元素(pseudo-elements)
过去标准中,伪元素和伪类都使用单冒号表示。为了兼容过去的写法,依然可以使用单冒号。但推荐使用双冒号写法。
常用的伪元素有
- ::first-line:针对首行文本设置样式
- ::first-letter:针对首字母设置属性
- ::before:在一个元素的内容之前插入其他内容,使用 content 属性设置
- ::after:在一个元素的内容之后插入其他内容,使用 content 属性设置
div::before {
content: 'hello'
}
小结
CSS 选择器众多,最常用的就是元素选择器,类选择器,伪类和伪元素选择器,以及各种组合使用的方式。
转载自:https://juejin.cn/post/7159593815995580453