Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css中的简单选择器、上下文选择器和伪类选择器的介绍和案例
Blogger Information
Blog 8
fans 1
comment 0
visits 10174
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css中的简单选择器、上下文选择器和伪类选择器的介绍和案例
雷斯提亚
Original
959 people have browsed it

css 选择器（分三大类）：

1. 简单选择器（共6种）

序号 选择器 描述
1 元素选择器 根据元素标签名称来进行操作
2 群组选择器 可以同时选择不同类型的元素进行操作
3 通配符选择器（通配选择器） 选择全部元素，不区分类型
4 属性选择器 根据元素属性进行操作
5 类选择器 根据元素class属性进行操作
6 id选择器 根据元素id属性进行操作
例：
元素选择器：
  1. <head>
  2.  <style>
  3.         div {
  4.             background-color: aquamarine;
  5.             font-size: 30px;
  6.         }
  7.     </style>
  8.     </head>
  9.     <body>
  10.     <div>php中文网</div>
  11.     <p>php中文网</p>
  12.     <h1>php中文网</h1>
  13.     <div>php中文网</div>
  14.     <div>php中文网</div>
  15. </body>

群组选择器：
  1.     <style>
  2.       div,p,h1{
  3.           font-size: 10px;
  4.           background-color: lightblue;
  5.       }
  6.     </style>

通配选择器：
  1.     <style>
  2.      *{
  3.          border: 1px solid lightpink;
  4.      }
  5.     </style>

属性选择器：
  1. <div style="font-size: 25px; color: lightseagreen;">php中文网</div>

类选择器：
  1. <head>
  2.  <style>
  3.      .study{
  4.          border: 1px solid lightpink;
  5.          color: lightseagreen;
  6.          background-color: lightgreen;
  7.      }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div class="study">php中文网</div>
  12.     </body>

id选择器：
  1. <head>
  2.     <style>
  3.    #study{
  4.          border: 1px solid lightpink;
  5.          color: yellow;
  6.          background-color: red;
  7.      }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div id="study">php中文网</div>
  12.     <p>php中文网</p>
  13.     <h1>php中文网</h1>
  14.     <div>php中文网</div>
  15.     <div>php中文网</div>
  17. </body>

2. 上下文选择器

  • （1）html文档是有层级结构的
  • （2）每个元素，在文档中，都有自己的位置，即上下文关系
  • （3）完全可以根据元素的上下文关系，来获取到他们
    2.1 一个元素的四种角色（共有四种角色）：
序号 角色 描述
1 祖先元素 拥有子元素，孙元素等所有层次的后代元素
2 父级元素 仅拥有子元素层级的元素
3 后代元素 与其他层级元素一起拥有共同祖先元素
4 子元素 与其他同级元素一起共有父级元素
2.2 上下文选择器的种类（共4种）
序号 选择器 操作符 描述 例子
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li
例：

后代选择器：

  1. <head>
  2.     <style>
  3.        div p{
  4.            border: 5px solid lightblue;
  5.            color: red;
  6.            background-color: lightpink;
  7.        }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p>php中文网</p>
  13.     </div>
  14. </body>

父子选择器：

  1.     <style>
  2.        div > p{
  3.            border: 5px solid lightblue;
  4.            color: red;
  5.            background-color: lightpink;
  6.        }
  7.     </style>

同级相邻选择器：

  1. <head>
  2.  <style>
  3.         .center.asina + .center {
  4.             background-color: lime;
  5.             color: maroon;
  6.             border: 2px solid yellow;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p class="center">php中文网</p>
  13.         <p class="center">php中文网</p>
  14.         <p class="center asina">php中文网</p>
  15.         <p class="center">php中文网</p>
  16.         <p class="center">php中文网</p>
  17.         <p class="center">php中文网</p>
  19.     </div>
  20. </body>

同级所有选择器：

  1. <head>
  2.  <style>
  3.         .center.asina + .center {
  4.             background-color: lime;
  5.             color: maroon;
  6.             border: 2px solid yellow;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p class="center">php中文网</p>
  13.         <p class="center">php中文网</p>
  14.         <p class="center asina">php中文网</p>
  15.         <p class="center">php中文网</p>
  16.         <p class="center">php中文网</p>
  17.         <p class="center">php中文网</p>
  19.     </div>
  20. </body>

伪类选择器（重点）

3.1 结构伪类：
# 3.1.1 不分组匹配
序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

例：

  1.     <style>
  2.          .review > :first-child {
  3.         background-color: wheat;
  4.       }
  5.     </style>

  1.  <style>
  2.          .review > :last-child {
  3.         background-color: wheat;
  4.       }
  5.     </style>

  1. <style>
  2.  .review > :nth-child(-n + 3) {
  3.         background-color: lightgreen;
  4.       }
  5.       </style>

3.1.2 分组匹配
序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)

例：

  1. <head>
  2.     <style>
  3.  .review span:first-of-type {
  4.         background-color: violet;
  5.       }
  6.     </style>
  7. </head>
  8. <body>
  9.     <div class="review">
  10.         <p class="center">php中文网</p>
  11.         <p class="center">php中文网</p>
  12.         <p class="center asina">php中文网</p>
  13.         <span class="center">php中文网</span>
  14.         <span class="center">php中文网</span>
  15.         <span class="center">php中文网</span>
  17.     </div>
  18. </body>

  1.    <style>
  2.  .review span:last-of-type {
  3.         background-color: violet;
  4.       }
  5.     </style>

  1.     <style>
  2.  .review span:nth-of-type(-n + 3) {
  3.         background-color: violet;
  4.       }
  5.     </style>

  1.     <style>
  2.  .review span:nth-last-of-type(-n + 2) {
  3.         background-color: violet;
  4.       }
  5.     </style>

3.2 其它伪类
序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

总结：

css选择器分三种：

  • 简单选择器（其中类选择器和id选择器是最常用的）

  • 上下文选择器

  • 伪类选择器（重点）：
    结构伪类（又分为分组匹配和不分组匹配）|其他伪类
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：课堂 上将常用选择器进行分类, 其实还有一些没有归入, 可以通过查阅手册
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post