CSS 常用选择器小记

站长

2022年11月21日 20:42 · 阅读数 39

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 选择器众多，最常用的就是元素选择器，类选择器，伪类和伪元素选择器，以及各种组合使用的方式。