Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第四节 举例演示简单选择器，上下文选择器 结构伪类选择器，伪类与伪元素
Blogger Information
Blog 7
fans 0
comment 0
visits 4624
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
第四节 举例演示简单选择器，上下文选择器 结构伪类选择器，伪类与伪元素
如今放弃
Original
645 people have browsed it

一、 举例演示简单选择器，上下文选择器

1:简单选择器

选择器 说明 写法
后代选择器 直接引用标签 以元素开头，如body
类选择器 对应HTML标签中的class属性 以.开头，如.item
id选择器 通过对应的id选择 id=名称

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: blueviolet;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.       /*元素选择器:标签选择器*/
  24.       body {
  25.           background-color: burlywood;
  26.       }
  27.       /* 类选择器: 对应着html标签中的class属性 */
  28.       .item{
  29.         border: 2px solid #000;
  30.       }
  31.       /* 多个类复合应用 */
  32.       .item.center{
  33.           background-color: coral;
  34.       }
  35.       /* ID选择器 */
  36.     #first{
  37.     background-color: crimson;
  38.     }
  39.     #two{
  40.         background-color: cyan;
  41.     }
  42.      /* 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式 */
  43.      *#first {
  44.         background-color: yellow;
  45.       }
  47.       #first.item {
  48.         background-color: red;
  49.       }
  50.     </style>
  51. </head>
  52. <body>
  53. <div class="container">
  54.     <div class="item" id="first">1</div>
  55.     <div class="item" id="two">2</div>
  56.     <div class="item">3</div>
  57.     <div class="item">4</div>
  58.     <div class="item">5</div>
  59.     <div class="item">6</div>
  60.     <div class="item center">7</div>
  61.     <div class="item">8</div>
  62.     <div class="item">9</div>
  63. </div>
  64. </body>
  65. </html>

2、 上下文选择器

. 后代选择器效果

选择器 说明 写法
后代选择器 父元素下的所有后代均生效 祖先元素 空格 后代元素。如 .container div {}
父子选择器 父子关系，不含孙子辈 以>大于号表示。如 body>div{}
同级相邻/兄弟选择器 往下找一个同级元素，注意是向下仅找一个就停止了 以+连接。如 .item + .center
同级所有选择器 往下找全部同级元素，注意是向下找，找弟弟妹妹 以~波浪线连接。如.item.nav ~.item {} 
  1.       /* 后代选择器： 空格 */
  2.       .container div{
  3.         border: 1px solid lawngreen;
  4.       }


. 父子选择器效果

  1. /* 父子选择器： > */
  2.       body > div {
  3.        border: 5px solid darkcyan;
  4.       }

. 同级相邻选择器效果

  1.  /* 同级相邻选择器 */
  2.       .item.center + .item{
  3.         background-color: blue;
  4.       }


.同级所有选择器效果

  1. /* 同级所有选择器 */
  2.        .item.center ~ .item{
  3.          background-color: brown;
  4.        }

二：结构伪类选择器: 不分组 分组

1.结构伪类选择器（不分组）

选择器 说明 写法
匹配第一个子元素 不分组 父元素：first-child
匹配最后的子元素 不分组 父元素 >：last-child
选第n个 不分组 父元素：first-child
只选偶数/奇数 不分组 父元素>：nth-child（even/odd），应用场景：表格隔行变色
从指定位置(从第n个开始)，选择剩下的所有元素 不分组 .item:nth-child(n + 3)
从前往后数连续取n个 不分组 :nth-child(-n + 3)
倒数取第n个 不分组 :nth-last-child(-n + 3)
匹配第一个子元素 不分组 :nth-last-child(2) 
  1.  /*  匹配第一个子元素（后写的会覆盖前面的）*/
  2.       .container > :first-child{
  3.         background-color: chartreuse;
  4.       }
  5.       .container > .item:first-child{
  6.         background-color: mediumblue;
  7.       }

  1.  /* 最后一个子元素 */
  2.       .container > :last-child{
  3.         background-color: moccasin;
  4.       }
  5.       /* 选择第5个 索引是从1开始 */
  6.       .container > :nth-child(5){
  7.         background-color: olive;
  8.       }

  1.  /* 偶数用even代表 */
  2.       .container > :nth-child(even){
  3.         background-color: orchid;
  4.       }
  5.       /* 奇数用odd代表 */
  6.       .container > :nth-child(odd){
  7.         background-color: palegreen;
  8.       }

  1. /* 只取前三个单元格 */
  2.       .container > .item:nth-child(-n+3){
  3.         background-color: palegreen;
  4.       }
  5.       /* 只取后三个单元格 */
  6.       .container > .item:nth-last-child(-n+3){
  7.         background-color: palevioletred;
  8.       }
  9.       /* 取第7个，用倒数的方式更直观 */
  10.       .container > .item:nth-last-child(3){
  11.         background-color: red;
  12.       }

2.结构伪类选择器（分组）

选择器 说明 写法
匹配第一个子元素 分组 :first-of-type
匹配最后的子元素 分组 :last-of-type
在分组中匹配任何一个 分组 :nth-of-type(n)
从前往后连续k个 分组 :nth-of-type(-n + k)
从后往前连续k个 分组 ：nth-last-of-type(-n + k)
倒数取第n个 分组 :：nth-last-of-type(n) 
  1.   /* 分组结构伪类分二步：
  2.       1. 元素按类型进行分组
  3.       2. 在分组中根据索引进行选择 */
  4.       /* div的最后一个 */
  5.       .container div:last-of-type{
  6.         background-color: royalblue;
  7.       }
  8.       /* 在分组中匹配任何一个 */
  9.       .container span:nth-of-type(5){
  10.         background-color: tomato;
  11.       }
  12.       /* 前三个 */
  13.       .container span:nth-of-type(-n + 3){
  14.         background-color: wheat;
  15.       }
  16.       /* 后三个 */
  17.       .container span:nth-last-of-type(-n + 3){
  18.         background-color: yellow;
  19.       }

三：伪类与伪元素

选择器 说明 写法
：target 必须与id配合，实现锚点操作 #login-form:target {display: block;}
:focus 当获取焦点时执行改变样式 input:focus { background-color: yellow;}
:not 用于选择不满足条件的元素 .list > :not(:nth-of-type(3)) {color: red;}
::before 所谓伪元素就是指页面中部存在而浏览器中存在的元素 .list::before {content: “起点”;color: blue;}
::after 伪元素，可用于页脚等 .list::after {content: “结束…”;}
::selection 只允许设置选中文本的前景色和背景色 input::selection {color: white;background-color: red;}

案例代码：

  1.  <!DOCTYPE html>
  2. <html lang="en">
  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.     #login-form{
  9.         display: none;
  10.     }
  11.     /* :target: 必须id配合，实现锚点操作 */
  12.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  13.     #login-form:target {
  14.         display: block;
  15.     }
  16.    /* :focus: 当获取焦点的时候*/
  17.    input:focus {
  18.        background-color: yellowgreen;
  19.    }
  20. /* ::selection: 设置选中文本前景色和背景色 */
  21. input::selection{
  22.     color: white;
  23.     background-color:blue;
  24. }
  25. /* :not() 用于选择不满足条件元素 */
  26. .list > :not(:nth-of-type(2)){
  27.     color: red;
  28. }
  29. /* :::before */
  30. .list::before{
  31.     content: '起点';
  32.     color: royalblue;
  33.     font-size: 1.5rem;
  34.     border-bottom: 2px solid #000;
  35. }
  36. /* :::after */
  37. .list::after{
  38.     content: '结束';
  39.     color: black;
  40.     font-size: 1.5rem;
  41.     border-bottom: 2px solid wheat;
  42. } /* 伪元素前面是双冒号， 伪类前能是单冒号 */
  43.     </style>
  44. </head>
  45. <body>
  46.     <!-- <a href="#login-form">我要登陆:</a> -->
  47.     <button onclick="location='#login-form'">登录</button> 
  48.     <form action="" method="post" id="login-form">
  49.       <label for="email">邮箱:</label>
  50.       <input type="email" name="email" id="email" />
  51.       <label for="password">密码:</label>
  52.       <input type="password" name="password" id="password" />
  53.       <button>登录</button>
  54.     </form>
  55.     <hr />
  56.     <ul class="list">
  57.         <li>day1</li>
  58.         <li>day2</li>
  59.         <li>day3</li>
  60.         <li>day4</li>
  61.     </ul>
  62. </body>
  63. </html>
  64. 显示效果

Correcting teacher：WJWJ

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