likes
comments
collection
share

CSS 常用选择器小记

作者站长头像
站长
· 阅读数 47

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
评论
请登录