Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端简单选择器、上下文选择器和伪类选择器
Blogger Information
Blog 53
fans 3
comment 0
visits 46781
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
前端简单选择器、上下文选择器和伪类选择器
emagic
Original
725 people have browsed it

0615作业

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

1.简单选择器

  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.       .day {
  9.         font-size: 2rem;
  10.         background-color: lightskyblue;
  11.         display: flex;
  12.         justify-content: center;
  13.         align-items: center;
  14.       }
  15.       /* 简单选择器 */
  16.       /* 元素选择器: 标签选择器 */
  17.       body {
  18.         background-color: lightcyan;
  19.       }
  20.       /* 类选择器: 通过class属性定位 */
  21.       .day {
  22.         border: 1px solid #000;
  23.       }
  24.       /* id选择器 */
  25.       #first {
  26.         background-color: lightpink;
  27.       }
  28.       /* * :属于元素级别
  29.       元素 < class < id */
  30.       /* id,class可以添加到任何元素上，所以可以省略 */
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="day" id="first">星期一</div>
  36.       <div class="day">星期二</div>
  37.       <div class="day">星期三</div>
  38.       <div class="day">星期四</div>
  39.       <div class="day">星期五</div>
  40.       <div class="day">星期六</div>
  41.       <div class="day">星期日</div>
  42.     </div>
  43.   </body>
  44. </html>

简单选择器

2.上下文选择器

  • 后代选择器效果:

    1.     /* 后代选择器: 空格 */
    2.     body div {
    3.       border: 5px solid coral;
    4.     }

  • 父子选择器效果：

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

    父子选择器

  • 同级相邻选择器效果：

    1. /* 同级相邻选择器 */
    2.     .day.friday + .day {
    3.       background-color: lightgreen;
    4.     }

    同级相邻

  • 同级所有选择器效果

    1.    /* 4. 同级所有选择器 */
    2.     .day.friday ~ .day {
    3.       background-color: lightsalmon;
    4.     }

    同级所有

    二、 举例演示结构伪类选择器（不分组与分组）

1.结构伪类选择器（不分组)练习

  1.       /* 匹配第一个子元素 */
  2.       .container > :first-child {
  3.         /*子元素直接指定，精确控制>:first-child，不要用空格，即便用了，first-child也只能取到子元素，但是代码不清晰*/
  4.          background-color: red; 
  5.       }
  7.             /* 最后一个子元素 */
  8.       .container > :last-child {
  9.          background-color: violet; 
  10.       }
  12.             /* 选第3个: 索引是从1开始 */
  13.       .container > :nth-child(3) {
  14.          background-color: yellow; 
  15.       }

不分组1

隔行（奇/偶）

  1.       /* 偶数用even表示 */
  2.       .container > :nth-child(even) {
  3.          background-color: limegreen; 
  4.       }
  6.       /* 奇数: odd */
  7.       .container > :nth-child(odd) {
  8.          background-color: salmon; 
  9.       }

奇偶

从前往后数取2个，从后往前数取2个,倒数取第3个

  1.       /* 只取前三个 */
  2.       .container .day:nth-child(-n + 2) {
  3.         background-color: red;
  4.       }
  5.       /* -0 + 3 = 3
  6.       -1 + 3 = 2
  7.       -2 + 3 = 1  序号为0就跳出不再取*/
  9.       /* 只取最后三个 */
  10.       .container .day:nth-last-child(-n + 2) {
  11.         background-color: blue;
  12.       }
  14.       /* 取倒数第3个，用倒数的方式更直观 */
  15.       .container .day:nth-last-child(3) {
  16.         background-color: yellow;
  17.       }

2.结构伪类选择器（分组)练习

html代码

  1.  <body>
  2.     <div class="container">
  3.       <div class="day">星期一</div>
  4.       <div class="day">星期二</div>
  5.       <div class="day">星期三</div>
  7.       <span class="day">星期四</span>
  8.       <span class="day">星期五</span>
  9.       <span class="day">星期六</span>
  10.       <span class="day">星期日</span>
  12.     </div>
  13.   </body>

css代码

  1.    <style>
  2.       .day{
  3.         font-size: 2rem;
  4.         background-color: lightskyblue;
  5.         display: flex;
  6.         justify-content: center;
  7.         align-items: center;
  8.       }
  10.       /* 分组结构伪类分二步：
  11.       1. 元素按类型进行分组
  12.       2. 在分组中根据索引进行选择 */
  14.       .container div:first-of-type {
  15.         background-color: red;
  16.       }
  18.       /* 在分组中匹配任何一个 */
  19.       .container span:nth-of-type(2) {
  20.         background-color: violet;
  21.       }
  22.       /* 前2个 */
  23.       .container span:nth-of-type(-n + 2) {
  24.         background-color: yellow;
  25.       }
  27.       /* div最后2个,实际效果并非星期六、日，而是二三 */
  28.       .container div:nth-last-of-type(-n + 2) {
  29.         background-color: green;
  30.       }
  31.     </style>

分组

三、举例演示:target, :not, :before, :after, :focus

  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: yellow;
  19.       }
  20.       /* ::selection: 设置选中文本的前景色与背景色 */
  21.       input::selection {
  22.         color: white;
  23.         background-color: blue;
  24.       }
  26.       /* :not(): 用于选择不满足条件元素 */
  27.       .list > :not(:nth-of-type(2)) {
  28.         color: red;
  29.       }
  31.       /* ::before  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
  32.       .list::before {
  33.         content: "我的地址管理";
  34.         color: blue;
  35.         font-size: 1.5rem;
  36.         border-bottom: 1px solid #000;
  37.       }
  39.       /* ::after  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
  40.       .list::after {
  41.         content: "验证码发送中...";
  42.         color: green;
  43.         font-size: 1.1rem;
  44.       }
  46.       /* 伪元素前面是双冒号， 伪类前能是单冒号 */
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <!-- <a href="#login-form">我要登录:</a> -->
  51.     <button onclick="location='#login-form'">点击登录</button>
  52.     <!-- 把按钮变成锚点，通过点击事件跳转绑定 -->
  53.     <form action="" method="post" id="login-form">
  54.       <label for="email">邮箱:</label>
  55.       <input type="email" name="email" id="email" />
  56.       <label for="password">密码:</label>
  57.       <input type="password" name="password" id="password" />
  58.       <button>登录</button>
  59.     </form>
  60.     <hr />
  61.     <ul class="list">
  62.       <li>地址1</li>
  63.       <li>地址2</li>
  64.       <li>地址3</li>
  65.       <li>地址4</li>
  66.       <li>地址5</li>
  67.     </ul>
  68.   </body>
  69. </html>

伪元素

课堂复习心得小结

1.简单选择器

序号 简单选择器名称 特征 示例写法
1 元素选择器/标签选择器 通过标签定位 元素名称。如 body {}或者ul {}
2 类选择器 对应html标签中的class属性定位 以.点开头。如 .item
3 id选择器 通过对应的id名称定位 以#开头加id名称。如 #idname
4 多个类可以复合使用 多个类的元素定位，两个类名要连起来中间无空格 .item.nav {background-color:red;}

2.上下文选择器

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

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

序号 结构选择器名称 特征 示例写法
1 匹配第一个子元素 不分组 父元素：first-child
2 匹配最后的子元素 不分组 父元素 >：last-child
3 选第n个 不分组 父元素>：nth-child（n）
4 只选偶数/奇数 不分组 父元素>：nth-child（even/odd），应用场景：表格隔行变色
5 从指定位置(从第n个开始)，选择剩下的所有元素 不分组 .day:nth-child(n + 4)
6 从前往后数连续取n个 不分组 :nth-child(-n + 3)
7 从后往前数连续取n个 不分组 :nth-last-child(-n + 2)
8 倒数取第n个（不连续） 不分组 :nth-last-child(2)

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

序号 结构选择器名称 特征 示例写法
1 匹配第一个子元素 分组 组别:first-of-type
2 匹配最后的子元素 分组 组别:last-of-type
3 在分组中匹配任何一个 分组 组别:nth-of-type(n)
4 从前往后连续k个 分组 组别:nth-of-type(-n + k)
5 从后往前连续k个 分组 组别：nth-last-of-type(-n + k)
6 倒数取第n个（不连续） 分组 组别：nth-last-of-type(n)

如果不指定具体父元素，就是从html开始，按文件流递归查询符合条件的元素变更式样，哪怕是meta这些设置都无效的元素也会带上样式属性。建议设置指定具体父元素，在具体父元素上调用，防止递归

注意：-n开头就是从0计算。其余从1开始计算。公式中，n必须写在前面，如nth-child(n + 4)不可以写成nth-child(4 + n）否则不生效

5.伪类与伪元素

序号 伪类/伪元素 特征 示例写法
1 ：target 必须与id配合，实现锚点操作 #login-form:target {display: block;}
2 :focus 当获取焦点时执行改变样式 input:focus { background-color: yellow;}
3 ::selection 只允许设置选中文本的前景色和背景色 input::selection {color: white;background-color: red;}
4 :not 用于选择不满足条件的元素 .list > :not(:nth-of-type(3)) {color: red;}
5 ::before 所谓伪元素就是指页面中部存在而浏览器中存在的元素 .list::before {content: “我的地址管理”;color: blue;}
6 ::after 伪元素，可用于页脚等 .list::after {content: “验证码发送中…”;}

伪元素前面是双冒号：：而伪类前面是单冒号：

6.注意事项

优先级：元素 < class < id

  • id,class可以添加到任何元素上，所以可以省略, 属于元素级别,有限定的情况下如.item#first优先级大于没有限定的#first（相当于*#first）,因为class优先于元素标签级别。

  • 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式

  • 所谓伪元素就是指页面中部存在而浏览器中存在的元素。

  • ：target 必须与id配合，实现锚点操作

  • 伪类与伪元素可以实现以往一些js的功能

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