search

博客列表 >演示简单，上下文和结构伪类选择器（0615）

演示简单，上下文和结构伪类选择器（0615）

丶久而旧之丶
丶久而旧之丶原创
2020年06月20日 01:44:10695浏览

html主题内容

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>0615作业</title>
  7.     <style>
  8.     /*使用九宫格演示grid布局的实现*/
  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:cornflowerblue;
  19.             display:flex;
  20.             justify-content: center;
  21.             align-items:center;
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item" id="first">1</div>
  27.         <div class="item">2</div>
  28.         <div class="item">3</div>
  29.         <div class="item">4</div>
  30.         <div class="item center">5</div>
  31.         <div class="item">6</div>
  32.         <div class="item">7</div>
  33.         <div class="item">8</div>
  34.         <div class="item">9</div>
  35.     </div>
  36. </body>
  37. </html>

1.简单选择器

  1. <style>
  2.  /* 元素选择器 ,设置了body的背景色*/
  3.        body{
  4.             background-color:cyan;
  5.         }
  6.         /* 类选择器，设置了所有class属性为item的边框宽度和颜色和线的类型 */
  7.         .item{
  8.             border: 1px solid black;
  9.         }
  10.         /* 复合类样式选择器，复合类样式的选择中间不能出现空格 */
  11.         .item.center{
  12.             background-color:blueviolet;
  13.         }
  14.         /* id选择器 */
  15.         #first{
  16.             background-color:lightcoral;
  17.         }
  18.         /* 层叠样式表：相同元素后面追加的样式会覆盖前面的样式 */
  19.         #first{
  20.             background-color:lightcyan;
  21.         }
  22.         /* 下方代码生效，上方#前面默认是*元素，优先级为元素<class<id,所以下方优先级更高 */
  23.         .item#first{
  24.             background-color:lightgreen;
  25.         }
  26.         /* 下方生效，前面是id选择器优先级大于上方的类选择器 */
  27.         #first.item{
  28.             background-color:lightpink;
  29.         }
  30. </style>

2.后代选择器

  1.  /* 后代选择器，选择类属性为containerde为起点后面（子代，孙子或者更后一代）的所有的div标签并设置边框属性 */
  2.         .container div{
  3.             border: 2px solid black;
  4.         }
  5.         /* 父子选择器 ,只选择子代不会选择更下一代*/
  6.         body>div{
  7.             border:2px solid lightblue;
  8.         }
  9.         /* 同级相邻（下一个）选择器 */
  10.         .item.center + .item{
  11.             background-color: lightyellow;
  12.         }
  13.         /* 同级后面所有选择器 */
  14.         .item.center  ~ .item{
  15.             background-color: lightcoral;
  16.         }

3.结构伪类选择器（不分组,不区分元素类型）

  1. /* 匹配第一个元素 （前面要添加父级不然采用全文档递归方式匹配第一个元素）*/
  2.         .container > :first-child{
  3.             background-color:lightgray;
  4.         }
  5.         /* 匹配最后一个元素 */
  6.         .container > :last-child{
  7.             background-color:lightblue;
  8.         }
  9.         /* 任意选择一个 (索引是从1开始的)*/
  10.         .container > :nth-child(3) {
  11.             background-color:greenyellow;
  12.         }
  13.         /* 只选择偶数的单元格,n从1开始(css定义一些关键字进行表达奇偶数，偶数是even，奇数是odd)*/
  14.         .container> :nth-child(2n){
  15.             background-color:hotpink;
  16.         }
  17.         /* 只选择奇数的单元格 */
  18.         .container > :nth-child(2n-1){
  19.             background-color:lawngreen;
  20.         }
  21.         /* 从指定位置开始选择剩下所有元素比如从第四个开始选择(n是从0开始算起的) */
  22.         .container > .item:nth-child(n+4){
  23.             background-color:lightgoldenrodyellow;
  24.         }
  25.         /* 只取前三个 */
  26.         .container > .item:nth-child(-n+3){
  27.             background-color:lightseagreen;
  28.         }
  29.         /* 只取最后三个 */
  30.         .container > .item:nth-last-child(-n+3){
  31.             background-color:maroon;
  32.         }
  33.         /* 只取第7个,用倒数的方式更直观 */
  34.         .container > .item:nth-last-child(3){
  35.             background-color:mediumturquoise;
  36.         }

4.结构伪类选择器（分组，区分元素类型）

分组结构伪类分两步
1，元素按类型/标签进行分组
2，在分组中根据索引进行选择

先把html主体内容进行一下更换(把第四个到第九个元素的div标签跟换成span标签)

  1. <body>
  2.     <div class="container">
  3.         <div class="item" id="first">1</div>
  4.         <div class="item">2</div>
  5.         <div class="item">3</div>
  6.         <div class="item">4</div>
  7.         <div class="item center">5</div>
  8.         <div class="item">6</div>
  9.         <div class="item">7</div>
  10.         <div class="item">8</div>
  11.         <div class="item">9</div>
  12.     </div>
  13. </body>

换成

  1. <body>
  2.     <div class="container">
  3.         <div class="item" id="first">1</div>
  4.         <div class="item">2</div>
  5.         <div class="item">3</div>
  6.         <span class="item">4</span>
  7.         <span class="item center">5</span>
  8.         <span class="item">6</span>
  9.         <span class="item">7</span>
  10.         <span class="item">8</span>
  11.         <span class="item">9</span>
  12.     </div>
  13. </body>

结构伪类选择器（分组）

  1. /* 选择div分组中的最后一个 */
  2.         .container div:last-of-type{
  3.             background-color:mediumturquoise;
  4.         }
  5.         /* 匹配任何一个，比如选择span分组中的第三个 */
  6.         .container span:nth-of-type(3){
  7.             background:mediumvioletred;
  8.         }
  9.         /* 选择span分组中的前三个 */
  10.         .container span:nth-of-type(-n+3){
  11.             background-color:lightsalmon;
  12.         }
  13.         /* 选择span分组中最后两个，用倒数方式 */
  14.         .container span:nth-last-of-type(-n+2){
  15.             background-color:lightgreen;
  16.         }

伪类和伪元素

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类和伪元素</title>
  6.     <style>
  7.         /* 先隐藏表单 */
  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:lightgray;
  19.       }
  20.       /* ::selection：设置选中文本的前景色和背景色（注意前面是双冒号） */
  21.       input::selection{
  22.           color:rgb(241, 9, 44);
  23.           background-color:lime;
  24.       }
  25.       /* not用于选择不满足元素 */
  26.       .list > li:not(:nth-of-type(3)){
  27.           color:lightpink;
  28.       }
  29.       /* ::before：在...之前生成一个元素,还可以进行样式设置 */
  30.       .list::before{
  31.          content:"PHP中文网";
  32.          background-color:lightgray;
  33.          color:lightseagreen;
  34.          font-size:1.3rem;
  35.          border-bottom:2px solid black;
  36.       }
  37.       /* ::after：在...之后生成一个元素，还可以进行样式设置 */
  38.       .list::after{
  39.           content:"地址：.......";
  40.           color:lightblue;
  41.           font-size:2rem;
  42.           border:2px solid lightgoldenrodyellow;
  43.       }
  44. </style>
  45. </head>
  46. <body>
  47.     <a href="#login-form">我要登录</a>
  48.     <form action="" method="post" id="login-form">
  49.         <label for="email">邮箱：</label>
  50.         <input type="email" name="email" id="email"></input>
  51.         <label for="password">密码：</label>
  52.         <input type="password" name="password" id="password"></input>
  53.         <button>登录</button>
  54.     </form>
  55.     <hr/>
  56.     <ul class="list">
  57.         <li>item1</li>
  58.         <li>item2</li>
  59.         <li>item3</li>
  60.         <li>item4</li>
  61.     </ul>
  63. </body>
  64. </html>

伪类前面使用的是单冒号，伪元素前面使用的是双冒号

总结

1，对于选择器的了解并要记住其规则。
2，还需多看回放和练习，以防学到后面就忘记前面的内容。

上一条：laravel通用后台-新闻文章系统开发下一条：Layui表单案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多