熟练使用CSS（一）--组合器与选择器

何以庆余年
2,314 阅读7分钟

选择器与选择器的组合

在我们的日常工作中，CSS的使用虽然没有JS那么多，但也不容小觑。CSS的知识点比较多，我们挑选了其中比较常用的几个点来为大家介绍，希望可以帮助大家更好地理解CSS的使用。话不多说，让我们开始吧！

选择器

选择器的基本意义是：根据一些特征，选中元素树上的一批元素。

选择器可以分为以下几个结构:

  • 简单选择器：针对某一特征判断是否选中元素。

  • 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。

  • 复杂选择器：由 、>、~、+、||等符号连接的符合选择器，根据父元素或前序元素检查单个元素。

  • 选择器列表：由,分隔的复杂选择器，表示或的关系。

本质：选择器是由简单选择器逐级组合而成的结构

简单选择器

简单选择器常见的有类型选择器、全体选择器、id选择器、class选择器、属性选择器、伪类选择器这几种。

类型选择器

类型选择器，会根据一个元素的标签名来选中元素，比如我们常见的<div>、<p>、<img>。

// example
div {
    width: 100%;
}

p {
    font-size: 32px;
}

img {
    width: 100%;
    height: 100%;
}

全体选择器

全体选择器（又称通配符选择器）*可以选中任意元素，用法跟类型选择器是完全一致的。

// example
* {
  margin: 0;
  padding: 0;
}

id选择器

id 选择器是“#”号后面跟随 id 名。

// example
#myid {
    stroke:blue;
    stroke-width:1;
}

class选择器

class 选择器是“.”后面跟随 class 名。

// example
.mycls {
    font-size:40px
}

属性选择器

属性选择器根据 HTML 元素的属性来选中元素。我们先定义一个简单的DOM结构，用于了解属性选择器的用法。

// DOM结构
<h1>标题1不带title属性</h1>
<h2 title='h'>标题2带title属性</h2>
<h3 title='h three'>标题3带title属性</h3>
<a href='#' title='a'>链接带title属性</a>
<a href="#" lang="zh-TW">超链接用连字符分割</a>

属性选择器有四种形态：

  • [att] 直接在方括号中放入属性名，是检查元素是否具有这个属性，只要元素有这个属性，不论属性是什么值，都可以被选中。
// 所有具有title属性的元素，都可以被选中，将文字颜色设置为red
[title] {
    color: red;
}
  • [att=val] 精确匹配，检查一个元素属性的值是否是 val。
// 所有具有title属性，并且title的值为a的元素，都可以被选中，将文字颜色设置为blue
[title=a] {
    color: blue;
}
  • [att~=val] 一个元素的某个属性的值有很多个（被空格分开），这些值只要有一个匹配上了 val 就行。
// 具有title属性，并且属性值（被空格分开）中有three的元素，可以被选中，将文字的颜色设置为green
[title~=three] {
    color: green;
}
  • [att|=val] 开头匹配，检查一个元素的值是否是以 val 开头，它跟精确匹配的区别是属性只要以 val 开头即可，后面内容不管。
// 具有title属性，并且属性值以h开头的元素，可以被选中，将文字的背景设置为pink。
[title|=h] {
    background: pink;
}

伪类选择器

伪类选择器是一系列由 CSS 规定好的选择器，以:开头。伪类选择器有普通型和函数型两种。我们这里只介绍一些常用的伪类选择器。

链接相关

元素位置相关

先定义一个简单的DOM结构，用于理解与元素位置相关的伪类选择器。

<ul>
    <li> node1 </li>
    <li> node2 </li>
    <li> node3 </li>
    <li> node4 </li>
    <li> node5 </li>
    <li> node6 </li>
    <li> node7 </li>
    <li> node8 </li>
</ul>
  • first-child
// ul列表中的第一个子节点（即<li> node1 </li>）的颜色设为red
ul :first-child {
    color: red
}
  • last-child
// ul列表中的最后一个子节点（即<li> node8 </li>）的颜色设为green
ul :last-child {
    color: green
}
  • nth-child(条件)
// ul列表中的满足条件的子节点的颜色设为yellow，这里将满足2n（即偶数条件）的子节点设为yellow
ul :nth-child(2n) {
    color: yellow
}

  • nth-last-child(条件)

    与nth-child(条件)类似，只不过这个是从后往前数

  • nth-of-type(条件)

  • nth-last-of-type(条件)

    与nth-of-type(条件)类似，只不过这个是从后往前数

注意：nth-child 和 nth-child-type 的区别

of-type 系列，是一个变形的语法糖，S:nth-of-type(An+B) 是:nth-child(|An+B| of S) 的另一种写法

选择器的组合

选择器列表是用,分隔的复杂选择器序列；复杂选择器则是用 、>、~、+、||等符号连接的复合选择器；复合选择器则是连写的简单选择器组合。

优先级比较

  • 第一优先级：无连接符号，即复合选择器。

    复合选择器表示简单选择器中且的关系。

// 复合选择器
.a.b {
    color: pink;
}

上述代码表示选中的元素必须同时具有a、b两个class。

  • 第二优先级： 、>、~、+、||，即复杂选择器。

    复杂选择器是针对节点关系的选择，它包括五种连接方式，我们来一一介绍：

    • : 后代，表示选中所有符合条件的后代节点，后代节点是指在当前节点下的所有节点。
    • >: 子代，表示选中符合条件的子节点，子节点是指在当前节点下一级的所有节点。
    • ~: 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点。
    • +: 直接后继，即下一个后继节点。
    • ||: 列选择器，表示选中对应列中符合条件的单元格。

    我们比较常用的是后代 和子代>这两种连接方式，来看个例子🌰：

// DOM结构
<div className='a'>
    <div className='b'>
        <div className='b'>后代</div>
    </div>
</div>

// 后代选择器，选中class a 节点下所有class 为 b 的节点
.a .b {
    width: 100px;
}
// 子代选择器，选择class a节点下一级所有class 为 b 的节点
.a>.b {
    width: 100px;
}

  • 第三优先级：,，即选择器列表

    选择器列表,表示“或”的关系，实际上，可以把它理解为“两条内容一样的 CSS 规则”的一种简写。下面的写法1其实就等同于写法2，将具有class为 root 或 root2 的节点选中，置为灰色。

// DOM结构
<div className='root'>root</div>
<div className='root2'>root2</div>

// 写法1
.root,.root2 {
    cilor: grey;
}

// 写法2
.rrot {
    color: grey;
}
.root2 {
    color: grey;
}

选择器的优先级

CSS 选择器是基于规则生效的，同一个元素命中多条规则是非常常见的事情。不同规则指定同一个属性为不同值时，就需要一个机制来解决冲突。这个机制，就是接下来我们要讲的选择器优先级。

css标准用用一个三元组(a,b,c)来构成复杂选择器的优先级

  • id的数目记为a
  • 伪类和class的数目记为b
  • 伪元素和类型的数目记为c
  • * 不影响优先级

CSS 标准建议用一个足够大的进制，获取“ a-b-c ”来表示选择器优先级。

即specificity = base * base * a + base * b + c。

base是一个足够大的正整数，这样就可以确保id优先于 class和伪类 优先于 类型和伪元素

*补充：行内属性的优先级永远高于 CSS 规则，浏览器提供了一个“口子”，就是在选择器前加上!import，这时的优先级最高。

同一优先级的选择器遵循“后面的覆盖前面的”原则

  • 这里的覆盖是指出现在css样式表中的顺序，而不是class中的顺序

  • 选择器的优先级是针对单条规则的，多条规则的选择器同时命中元素，优先级不会发生叠加。

  • 选择器的优先级是针对复杂选择器的优先级，选择器列表不会合并计算优先级。

来看个示例：

// DOM结构
<div class="x y z">text<div>

// css样式
.x, .z {
    background-color:lightblue;
}
.y {
    background-color:lightgreen;
}

上述代码中，有两个点需要注意：

  1. 选择器列表.x, .z命中了 div，但是它的两项分别计算优先级，所以最终优先级仍跟.y 规则相同。
  2. 因为.y在样式表出现在最后，所以最终的样式以.y为准，即背景色为浅绿色。

总结

在这一节，我们详细介绍了CSS的选择器及选择器的组合，还补充了选择器的优先级机制。接下来我们会继续介绍其他CSS知识。

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。

avatar
文章
阅读
粉丝