css_02 | CSS——CSS 选择器详解

时间  2019-11-06
标签 css 选择器 详解 栏目 CSS 繁體版
原文   原文链接 
本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

获取编号.png 

css_02
复制代码

涉及面试题.png 

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 文档树结构”。在彻底理解这个“树结构”的基础上，才能够很好的掌握文章下边紧接着的两个大选择器（组合选择器和伪类选择器）。由于，只有有了这个“结构树”，咱们本篇讨论的“选择器”才可以起做用。又是很大、很杂、很基础、很重要的知识点，属必掌握项。css


1 HTML 文档树结构

经过以前对 HTML 相关知识的学习，咱们知道，一个 HTML 文档是以各个元素间的层次结构为基础创建起来的，每一个合法的文档都会生成一个结构树（以下例）。html

在这个层次结构中，每个元素都有一个本身的位子，而且每一个元素相对于这个结构里的其余元素，它们彼此或是“父子关系”、或是“祖孙—后代关系”、或是“直接相邻关系”、或是“普通相邻关系”等。前端

（以下例的HTML文档及所对应的“结构树”：）程序员

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

02-01.png

（文档结构为：）web

02-02.png

1.1 父子关系元素

若是一个元素出如今文档层次结构中另外一个元素的上一层，则称前者是后者的“父元素”，后者是前者的“子元素”。面试

1.2 祖孙-后代关系元素

若是一个元素在另外一个元素的直接上一层，他们是“父子关系”，而若是一个元素到另外一个元素的路径要通过两层或多层，这些元素则是“祖孙-后代关系”。浏览器

1.3 根元素

body 元素是浏览器默认显示的全部元素的祖先， html 元素则是整个文档的祖先（所以，html 元素又称“根元素”）。bash


2 组合选择器

2.1 多元素选择器

  • 用法：为多个元素应用同一个样式；
  • 格式：如给上例中元素 h1 和 h2 加样式，使之背景颜色为 yellow 。
h1,h2 {
    background:yellow;
}
复制代码

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

2.2 后代选择器

  • 用法：使一些样式、规则只在某一些指定的有“祖孙-后代关系”的后代元素上适用，其余非指定的结构中不适用；
  • 格式：如给上例中只给元素 ul 的后代元素 em 加样式，使其文字被中横线划去、背景色为 yellow 。
ul em {
    text-decoration: line-through;
    background:yellow;
}
复制代码

02-03.png
⚠️注意选择器之间用“空格”这个“结合符”隔开。

2.3 子元素选择器

  • 用法：使一些样式、规则只在某一些指定的有直接的“父子关系”的子元素上适用，其余非指定的结构中不适用；
  • 格式：如给上例中只给元素 p 的子元素 em 加样式，使其文字被中横线划去、背景色为 yellow 。
p>em {
    text-decoration: line-through;
    background:yellow;
}
复制代码

02-04.png
⚠️注意选择器之间用 > 这个“结合符”隔开。

2.4 直接相邻元素选择器

  • 用法：前提，两个元素有共同的父元素，且后一个元素“紧接”在前一个元素后边时，你想对后一个元素添加样式；
  • 格式：如给上例中只给“紧接”第一个 h2 元素的 p 元素加样式，其余 p 不变，使其文字被中横线划去、背景色为 yellow 。
h2+p {
    text-decoration: line-through;
    background:yellow;
}
复制代码

02-05.png

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

2.5 普通相邻元素选择器

  • 用法：相对于“直接相邻元素选择器”而言，两个元素也必须有共同的父元素，但后一个元素不须要“紧接”在前一个元素后边，你也能够对后一个元素添加样式;
  • 格式：如给上例中第一个 h2 元素后边的 h2 元素加样式，使其文字被中横线划去、背景色为 yellow 。
h2~h2 {
    text-decoration: line-through;
    background:yellow;
}
复制代码

02-06.png
⚠️注意选择器用 ~ 这个“结合符”隔开。


3 伪类

3.1 为何须要“伪类”？

首先再次复习：《② 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
复制代码

4 伪类选择器

4.1 “静态、动态伪类选择器”合用实例

首先再次复习：《③ HTML 表单详解》，掌握表单元素。而后动手操做如下例子。

🔗源码和效果展现
→ （根据如下 HTML 文档：）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表单</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli的前端一万小时">个人博客地址</a>
<div class="login">                                                    
   <form action="/getinfo" method="get">                                             
       <div class="username">                                                        
          <label for="username">姓名</label>                                          
          <input id="username"  type="text" name="username" value="Oliver">          
       </div>
       <div class="password">
          <label for="password" >密码</label>
          <input id="password" type="password" name="password" placeholder="输入密码"> 
       </div>
       <div class="sex">
          <label>性别</label>                                                         
          <input type="radio" name="sex" value="男" checked>男                        
          <input type="radio" name="sex" value="女">女
       </div>       
   </form>
</div>
</body>
</html>
复制代码

→（再将 CSS 样式引入其中：）

a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}
复制代码

02-07.png
⚠️注意：下一篇文章会详细阐述“连接”在随用户操做状态变化时，其样式是按怎样的顺序显示的。

4.2 用户界面元素伪类选择器（UI 元素伪类选择器）

  • 在“表单”元素中，radio 和 checkbox 都具备“选中”和“未选中”状态，如下选择器能够定义这两种状态的样式。
:checked
复制代码
  • 当咱们用鼠标左键按住进行网页取词时，浏览器在默认状况下是“蓝底黑字”，若是我想要改变这个样式，我能够用如下选择器。
::selection
复制代码
  • 默认状况下，web 表单元素皆“可用”，但其元素（文字输入框、密码框、单选框、复选框等）也能够有“不可用”的状态。那么下边的选择器能够分别对表单元素的这两种状态设置样式。
:enabled
:disabled
复制代码
  • 默认状况下，web 表单元素皆“可读写”，但其元素（输入框、文本域等）也能够有“只读”的状态。那么下边的选择器能够分别对表单元素的这两种状态设置样式。
:read-write
:read-only
复制代码

⚠️注意选择器的格式！

代码实例：
🔗源码及效果展现

→ （根据如下 HTML 文档：）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表单</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="Oli的前端一万小时">个人博客地址</a>
<div class="login">
   <form action="/getinfo" method="get">
       <div class="username">
          <label for="username">姓名</label>
          <input id="username" type="text" name="username" value="Oliver">
       </div>
       <div class="password">
          <label for="password" >密码</label>
          <input id="password" type="password" name="password" placeholder="输入密码">
       </div>
       <div class="sex">
          <label>性别</label>
          <input type="radio" name="sex" value="男">男
          <input type="radio" name="sex" value="女">女
       </div>
       <div>
         <label for="enabled">可用:</label>
         <input type="text" name="enabled">
       </div>
       <div>
         <label for="disabled">不可用:</label>
         <input type="text" name="disabled" disabled="disabled">
       </div>
       <div>
         <label for="enabled">读写:</label>
         <input type="text" name="status">
       </div>
       <div>
         <label for="disabled">只读:</label>
         <input type="text" name="status" readonly="readonly">
       </div>
   </form>
</div>
  <p>Oli努力作个“伟大的程序员”，他是个好人！</p>
</body>
</html>
复制代码

→（再将 CSS 样式引入其中：）

a:link {
    color: blue;
}

a:visited {
    color: red;
}

input:focus {
    background: yellow;
    font-weight: bold;
}

a:hover {
    font-size: 30px;
}

a:active {
    color: silver;
}

:checked {
    font-size: 50px;
}

p::selection {
    background-color: orange;
    color: white;
}

input:enabled {
    outline: 1px dotted black;
}

input:disabled {
    background-color: green;
}

input:read-write {
    outline: 1px dotted black;
}

input:read-only {
    background-color: gray;
}
复制代码

02-08.png

4.3 结构伪类选择器

⚠️此大类选择器须要用实例讲解，篇幅较长，将后续另起一篇文章讲解。此篇仅做相关知识点列举。
（下文中 E 指 element 元素）

4.3.1 第一类

1. 选择父元素的第一个子元素。
E:first-child

2. 选择父元素的最后一个子元素。
E:last-child

3. 选择父元素下第 n 个元素或奇偶元素，n 的值为：数字/odd/even。
E:nth-child(n)

4. 选择父元素中惟一的子元素————该父元素只有一个子元素。
E:only-child
复制代码

4.3.2 第二类

1. 选择同类型的第一个同级兄弟元素。
E:first-of-type

2. 选择同类型的最后一个同级兄弟元素。
E:last-of-type

3. 选择同类型的第 n 个同级兄弟元素，n 的值为：数字/odd/even。
E:nth-of-type(n)

4. 选择父元素中特定类型的惟一子元素————该父元素有多个子元素。
E:only-of-type
复制代码

4.3.3 第三类

1. 文档的“根元素”--html 元素。
:root

2. 选择某个元素以外的全部元素。
E:not(selector)

3. 选择一个不包含任何子元素的元素，须要注意的是“文本节点”也能够被当作子元素。
E:empty

4. 选取页面中的某个 target 元素。
E:target
复制代码

后记： 终于完成了这篇，知识点不少，若是只是单纯看一遍收获会很小，代码的学习须要咱们动起手来，不停的敲、不停的试。跟机器打交道的好处就是，它通常来讲不会骗你，对就是对，错就是错。总之，感谢这个时代！

祝好，qdywxs ♥ you！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程