search

博客列表 >前端简单选择器、上下文选择器和伪类选择器

前端简单选择器、上下文选择器和伪类选择器

emagic
emagic原创
2020年06月16日 15:55:22723浏览

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的功能

上一条：css选择器总结下一条：下拉菜单的css样式和js代码解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多