search

博客列表 >第四节 举例演示简单选择器，上下文选择器 结构伪类选择器，伪类与伪元素

第四节 举例演示简单选择器，上下文选择器 结构伪类选择器，伪类与伪元素

如今放弃
如今放弃原创
2020年06月17日 17:23:28565浏览

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

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. 显示效果

上一条：CSS选择器下一条：使用表格开发简易购物车及注册的静态页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多