Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器
Blogger Information
Blog 4
fans 0
comment 1
visits 3365
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选择器
magician风
Original
576 people have browsed it

CSS选择器

1. 简单选择器

1.1 种类

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 最常用的是: 元素选择器, 类选择器, id 选择器

  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略
    ps：寻找元素最简是用标签，id 和class也都属性选择器
    / 标签<class属性<id属性<div&id<class&id /

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>简单选择器</title>
    7.   <style>
    8.     /* 使用九宫格来演示简单选择器 */
    9.     /* 类选择器：选择一类元素，也属于属性选择器的一种，对应着元素的class */
    10.     .container {
    11.       width: 300px;
    12.       height: 300px;
    13.       display: grid;
    14.       grid-template-columns: repeat(3, 1fr);
    15.       gap: 5px;
    16.     }
    17.     .item {
    18.       font-size: 2rem;
    19.       background-color: lightgreen;
    20.       display: flex;
    21.       justify-content: center;
    22.       align-items: center;
    23.     }
    24.     body {
    25.       background-color: lightskyblue;
    26.     }
    28.     /* id选择器 */
    29.     #five {
    30.       background-color: white;
    31.     }
    32.     /* 多个类选择器 */
    33.     .item.center {
    34.       background-color: red;
    35.     }
    36.     /* id的优先级高于class */
    38.     /* class&id 选择器不限定被修改的元素类型时, 星号"`*`"可以省略 */
    40.     .item#five {
    41.       background-color: yellow;
    42.     }
    44.     div#five {
    45.       background-color: blue;
    46.     }
    48.     .item[title] {
    49.       background-color: pink;
    50.     }
    51.     /* 群组选择器 */
    52.     #first.item,
    53.     .item.center,
    54.     .item[title="world"] {
    55.       background-color: black;
    56.       color: white;
    57.     }
    58.     /* 标签<class属性<id属性<div&id<class&id */
    59.   </style>
    60. </head>
    61. <body>
    62.   <!-- .container>.item{$}*9 快速输入缩写 -->
    63.   <div class="container">
    64.     <div class="item" id="first">1</div>
    65.     <div class="item" title="hello">2</div>
    66.     <div class="item" title="world">3</div>
    67.     <div class="item">4</div>
    68.     <div class="item center" id="five">5</div>
    69.     <div class="item">6</div>
    70.     <div class="item">7</div>
    71.     <div class="item">8</div>
    72.     <div class="item">9</div>
    73.   </div>
    74. </body>
    75. </html>

2. 上下文选择器

  • html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
  • 每一个元素, 在文档中, 都有自己的位置,即上下文关系
  • 所以, 完全可以根据元素的上下文关系,来获取到它们

2.1 一个元素的四种角色

序号 角色 描述
1 祖先元素 拥有子元素,孙元素等所有层级的后代元素
2 父级元素 仅拥有子元素层级的元素
3 后代元素 与其它层级元素一起拥有共同祖先元素
4 子元素 与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>上下文选择器</title>
  7.     <style>
  8.       /* 使用九宫格来演示简单选择器 */
  9.       /* 类选择器：选择一类元素，也属于属性选择器的一种，对应着元素的class */
  10.       .container {
  11.         width: 300px;
  12.         height: 300px;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, 1fr);
  15.         gap: 5px;
  16.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightgreen;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 后代选择器 */
  25.       .container div {
  26.         border: 1px solid blue;
  27.       }
  28.       /* 父子选择器 */
  29.       body > div {
  30.         border: 3px solid pink;
  31.       }
  32.       /* 后代选择器模拟父子选择器 */
  33.       body div.container {
  34.         border: 5px solid chocolate;
  35.       }
  36.       /* 同级相邻选择器 */
  37.       .item.center + .item {
  38.         background-color: lightblue;
  39.       }
  40.       /* 同级所有选择器 （会选定后面所有同级项目）*/
  41.       .item.center ~ .item {
  42.         background-color: lightblue;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <!-- .container>.item{$}*9 快速输入缩写 -->
  48.     <div class="container">
  49.       <div class="item">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  52.       <div class="item">4</div>
  53.       <div class="item center">5</div>
  54.       <div class="item">6</div>
  55.       <div class="item">7</div>
  56.       <div class="item">8</div>
  57.       <div class="item">9</div>
  58.     </div>
  59.   </body>
  60. </html>

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. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>伪类选择器不分组匹配</title>
  7.     <style>
  8.       /* 使用九宫格来演示简单选择器 */
  9.       /* 类选择器：选择一类元素，也属于属性选择器的一种，对应着元素的class */
  10.       .container {
  11.         width: 300px;
  12.         height: 300px;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, 1fr);
  15.         gap: 5px;
  16.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightgreen;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 为了防止递归，应该在具体的父元素上调用伪类选择器 */
  25.       .container > :first-child {
  26.         background-color: rosybrown;
  27.       }
  28.       /* 匹配最后一个 */
  29.       .container > :last-child {
  30.         background-color: slateblue;
  31.       }
  32.       /* 匹配容器中任何一个，索引是从第一个开始计算 */
  33.       .container > :nth-child(6) {
  34.         background-color: tomato;
  35.       }
  36.       /* 匹配倒数第n个，使用nth-last-child(n),索引从最后一个倒着开始计算 */
  37.       .container > :nth-last-child(2) {
  38.         background-color: yellow;
  39.       }
  40.       /* :nth-child()支持表达式，如选中所有奇数item用odd或者（2n-1),偶数用2n或者even */
  41.       .container > :nth-child(2n - 1) {
  42.         background-color: lightskyblue;
  43.       }
  44.       /* 只选择前三个 (-n+3)*/
  45.       .container > :nth-child(-n + 3) {
  46.         background-color: green;
  47.       }
  48.       /* 选择第5个开始开始所有元素 */
  49.       .container > :nth-child(n + 5) {
  50.         border: indigo 5px solid;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <!-- .container>.item{$}*9 快速输入缩写 -->
  56.     <div class="container">
  57.       <div class="item">1</div>
  58.       <div class="item">2</div>
  59.       <div class="item">3</div>
  60.       <div class="item">4</div>
  61.       <div class="item">5</div>
  62.       <div class="item">6</div>
  63.       <div class="item">7</div>
  64.       <div class="item">8</div>
  65.       <div class="item">9</div>
  66.     </div>
  67.   </body>
  68. </html>

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)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面

  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>伪类选择器分组匹配</title>
    7.   <style>
    8.     /* 使用九宫格来演示简单选择器 */
    9.     /* 类选择器：选择一类元素，也属于属性选择器的一种，对应着元素的class */
    10.     .container {
    11.       width: 300px;
    12.       height: 300px;
    13.       display: grid;
    14.       grid-template-columns: repeat(3, 1fr);
    15.       gap: 5px;
    16.     }
    17.     .item {
    18.       font-size: 2rem;
    19.       background-color: lightgreen;
    20.       display: flex;
    21.       justify-content: center;
    22.       align-items: center;
    23.     }
    24.     /* 匹配分组中的第一个 */
    25.     .container > span:first-of-type {
    26.       background-color: green;
    27.     }
    28.     /* 匹配分组中的最后一个 */
    29.     .container span:last-of-type {
    30.       background-color: yellow;
    31.     }
    32.     /* 匹配分组中的第二个 */
    33.     .container span:nth-of-type(2) {
    34.       background-color: hotpink;
    35.     }
    36.     /* 匹配分组中第3个之后所有 */
    37.     .container span:nth-of-type(n + 3) {
    38.       background-color: hotpink;
    39.     }
    40.     /* 同等优先级，最后一个代码有效 */
    41.     .container span:last-of-type {
    42.       background-color: yellow;
    43.     }
    44.   </style>
    45. </head>
    46. <body>
    47.   <!-- .container>.item{$}*9 快速输入缩写 -->
    48.   <div class="container">
    49.     <div class="item">1</div>
    50.     <div class="item">2</div>
    51.     <div class="item">3</div>
    52.     <div class="item">4</div>
    53.     <span class="item">5</span>
    54.     <span class="item">6</span>
    55.     <span class="item">7</span>
    56.     <span class="item">8</span>
    57.     <span class="item">9</span>
    58.   </div>
    59. </body>
    60. </html>

    **表单选择器

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>表单选择器</title>
    7.   <style>
    8.     input:enabled {
    9.       background-color: khaki;
    10.     }
    11.     input:disabled {
    12.       background-color: gray;
    13.       color: black;
    14.     }
    15.     input:required {
    16.       border: blueviolet 1px solid;
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <h2>用户登陆</h2>
    22.   <form action="">
    23.     <div>
    24.       <label for="E-mail">邮箱：</label>
    25.       <input type="email" id="E-mail" placeholder="example@qq.com" required />
    26.     </div>
    27.     <div>
    28.       <label for="password">密码：</label>
    29.       <input
    30.         type="password"
    31.         id="password"
    32.         name="password"
    33.         placeholder="不少于6位"
    34.         minlength="6"
    35.         required
    36.       />
    37.     </div>
    38.     <div>
    39.       <label>是否保存密码:</label>
    40.       <input type="checkbox" name="cunchu" />
    41.     </div>
    42.     <div>
    43.       <label for="warning">警告：</label>
    44.       <input
    45.         type="text"
    46.         id="warning"
    47.         value="一天内仅允许登陆1次"
    48.         style="border:none;"
    49.         disabled
    50.       />
    51.     </div>
    52.     <button>提交</button>
    53.   </form>
    54. </body>
    55. </html>

    3.3 其它伪类

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

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>其他伪类选择器</title>
    7.   <style>
    8.     a:link {
    9.       color: coral;
    10.     }
    11.     a:visited {
    12.       color: green;
    13.     }
    14.     a:hover {
    15.       color: blue;
    16.     }
    18.     a:active {
    19.       color: rgb(255, 7, 7);
    20.     }
    21.   </style>
    22. </head>
    23. <body>
    24.   <h2>超级链接4中伪类选择</h2>
    25.   <div>
    26.     <a href="https://www.php.cn" target="_blank">php中文网</a>
    27.   </div>
    28.   <div>
    29.     <a href="https://www.php.cn" target="_blank">我也是php中文网</a>
    30.   </div>
    31. </body>
    32. </html>

    总结：因为一直没时间看直播，前几天都是直接2倍看录播，完了在回头敲，结果好多时候没时间就只是看了一遍录播，记得效果不好，好多有印象，但是敲不出来。昨天看群里有同学说一边看一边敲，看完也就写完了，今天也是这样做的，虽然时间比较可是效果还是不错的。今年内容理解的最好的一次。其他类的还有几个没完全尝试完，但因为时间问题，明天再做研究。

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