search

博客列表 >CSS选择器

CSS选择器

magician风
magician风原创
2020年04月07日 19:26:53577浏览

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

上一条：详解CSS选择器中国象棋下一条：css层叠样式表学习进阶（伪类选择器是重点）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多