这套题还不错，感兴趣的猿可以试一试：前端开发工程师

在我们的日常工作中，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。

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

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

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

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

标签： CSS