阅读 515

(Ⅰ)CSS 选择器不学会,后续将举步维艰 | CSS 选择器详解

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

1. 伪类选择器有哪些?
2. 伪元素和伪类的区别?

3. 关于 CSS 选择器,以下说法正确的是?(不定项)
  ❌ header .p 是选择 id 为 header 的类型为 p 的所有后代。
  ✅ header > .p 是选择标签为 header 内的 class 为 p 的直接子元素。
  ✅ #header.p 是选择 id 为 header 同时它的 class 为 p 的元素。#header, p 是选择 id 为 header 的元素以及选择所有的 p 标签。
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



前言: 本篇行文顺序为,首先在第一部分介绍“ HTML 文档树结构”。在完全理解这个“树结构”的基础上,才可以很好地掌握文章下边紧接着的两个大选择器(组合选择器和伪类选择器)。

因为只有有了这个“结构树”,我们本篇讨论的“选择器”才能够起作用。

又是很大、很杂、很基础、很重要的知识点,属必掌握项。


1 HTML 文档树结构

通过之前对 HTML 相关知识的学习,我们知道,一个 HTML 文档是以各个元素间的层次结构为基础建立起来的,每个合法的文档都会生成一个结构树(如下例)。

在这个层次结构中,每一个元素都有一个自己的位子,并且每个元素相对于这个结构里的其他元素,它们彼此或是“父子关系”、或是“祖孙—后代关系”、或是“直接相邻关系”、或是“普通相邻关系”等。

(如下例的 HTML 文档及所对应的 “结构树”:)

<!DOCTYPE html>
<html>                                            
<head> 
  <meta charset="utf-8"> 
  <title>前端一万小时</title>
</head>
<body>
  <h1><em>前端一万小时</em>》之:xxx</h1> 
  <p><em>本知识学习用时:2 小时……</em></p>
  <p><strong><em>前言:</em></strong>Oli 是怎样写文章的……</p>
  <h2>1 认识……</h2>
  <p>首先把<em>“定义”</em>讲解清楚</p>     
  <h2>2 为什么……</h2>                      
  <ul>
    <li>是什么
      <ol>                                           
        <li>what
          <ul>
            <li>w</li>
            <li>w</li>
            <li>h</li>
          </ul>
        </li>                            
        <li>why</li>                           
        <li><em>how</em></li>  
      </ol>
    </li>
    <li>为什么</li>                           
    <li>怎么样</li>  
  </ul>  
  <h2>3 怎么样……</h2>                      
  <ol>                                             
    <li>what</li>
    <li>why</li>                           
    <li><em>how</em></li> 
  </ol>                  
</body>                                            
</html>
复制代码

文档结构为:

1.1 父子关系元素

如果一个元素出现在文档层次结构中另一个元素的上一层,则称前者是后者的“父元素”,后者是前者的“子元素”。

1.2 祖孙—后代关系元素

如果一个元素在另一个元素的直接上一层,他们是“父子关系”,而如果一个元素到另一个元素的路径要经过两层或多层,这些元素则是“祖孙—后代关系”。

1.3 根元素

body 元素是浏览器默认显示的所有元素的祖先, html 元素则是整个文档的祖先(因此,html 元素又称“根元素”)。


2 组合选择器

2.1 多元素选择器

  • 用法:为多个元素应用同一个样式;

  • 格式:如给上例中元素 h1 和 h2 加样式,使之背景颜色为 yellow。

🔗源码及效果展示

h1, h2 {
  background: yellow;
}
复制代码

❗️注意多个选择器之间必须有 , 这个字符。

2.2 后代选择器

  • 用法:使一些样式、规则只在某一些指定的有“祖孙—后代关系”的后代元素上适用,其他非指定的结构中不适用;

  • 格式:如给上例中只给元素 ul 的后代元素 em 加样式,使其文字被中横线划去、背景色为 yellow。

🔗源码及效果展示

ul em {
  text-decoration: line-through;
  background: yellow;
}
复制代码

❗️注意选择器之间用“空格”这个“结合符”隔开。

2.3 子元素选择器

  • 用法:使一些样式、规则只在某一些指定的有直接的“父子关系”的子元素上适用,其他非指定的结构中不适用;

  • 格式:如给上例中只给元素 p 的子元素 em 加样式,使其文字被中横线划去、背景色为 yellow。

🔗源码及效果展示

p > em {
  text-decoration: line-through;
  background: yellow;
}
复制代码

❗️注意选择器之间用 > 这个“结合符”隔开。

2.4 直接相邻元素选择器

  • 用法:前提,两个元素有共同的父元素,且后一个元素“紧接”在前一个元素后边时,你想对后一个元素添加样式;

  • 格式:如给上例中只给“紧接”第一个 h2 元素的 p 元素加样式,其他 p 不变,使其文字被中横线划去、背景色为 yellow。

🔗源码及效果展示

h2 + p {
  text-decoration: line-through;
  background: yellow;
}
复制代码

❗️注意选择器用 + 这个“结合符”隔开。

2.5 普通相邻元素选择器

  • 用法:相对于“直接相邻元素选择器”而言,两个元素也必须有共同的父元素,但后一个元素不需要“紧接”在前一个元素后边,你也可以对后一个元素添加样式;

  • 格式:如给上例中第一个 h2 元素后边的 h2 元素加样式,使其文字被中横线划去、背景色为 yellow。

🔗源码及效果展示

h2 ~ h2 {
  text-decoration: line-through;
  background: yellow;
}
复制代码

❗️注意选择器用 ~ 这个“结合符”隔开。


3 伪类

3.1 为什么需要“伪类”?

首先再次复习:《从零基础到轻松就业 | HTML——② HTML 元素、属性详解(下)》中关于“超链接 a 元素”的相关知识点。

“链接”在实际页面中出现的频率很高,人们想对“未访问的页面”和“已访问的页面”作样式上的区分,直观的方式就是在 HTML 文档里边对 a 元素作 class 属性的添加,让这个 a 元素加入一个类:

<a href="http://…" class="visited">这里是链接</a>
复制代码

然后通过“类选择器”对其加样式:

a.visited {
  color = red;
}
复制代码

但,显而易见,这种方式根本就不合乎实际操作,因为不可能每访问一个新页面就去修改一下链接的“类”。

于是,CSS 定义了两个只用于“超链接”的“静态伪类”,这些“伪类”不用在 HTML 文档中输入,可以直接对其添加样式。分别为:

  • 指示这个“超链接”(即 a 元素里有一个 href 属性)未被访问。
:link
复制代码

❗️注意书写格式上的“冒号”,这个冒号 : 是“伪类”和“伪元素”的名片。且冒号与状态 link 之间不能有空格!

  • 指示这个“超链接”已被访问。
:visited
复制代码

3.2 为什么需要“动态伪类”?

在上文中我们了解到 CSS 为适应需要,最先定义了两个“静态伪类”,但 :link:visited 对文档样式的改变很有限,一般第一次显示过后就不会再起作用了。

而人们的需要则更多:链接“焦点 focus ”时、在链接上“悬停 hover ”时、“活动 active ”状态时,都需要样式的区分。

于是,CSS 又定义了 3 个“动态伪类”,它们可以根据用户行为相应的改变文档的外观。这些“伪类”或者说所有“伪类”都不用在 HTML 文档中输入,可以直接对其添加样式。分别为:

  • 指示这个元素拥有输入“焦点”——即可以接受键盘输入,或通过某种方式可以激活。
:focus
复制代码
  • 指示当鼠标停留在这个元素上时,外观可以作相应改变。
:hover
复制代码
  • 指示这个元素可以被用户输入“激活”,如,用户停留在一个超链接上,当点击鼠标时,这个链接就会“激活”。
:active
复制代码

❗️注意:

  • CSS “伪类”不仅可以改变不同状态时的颜色,还可以应用任何需要的样式;

  • “动态伪类”与“静态伪类”不同,“动态伪类”可以应用于任何元素,不局限于“超链接”;

  • 考虑到“继承、层叠”的原因(下一篇会详谈),“伪类”的顺序很重要,通常为:

:link
:visited
:focus
:hover
:active
复制代码

下一篇我们继续讲解选择器剩下的重点知识。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论