search

博客列表 >1、实例演示伪类选择器: 结构伪类与状态伪类 2. 实例演示盒模型常用属性,附图

1、实例演示伪类选择器: 结构伪类与状态伪类 2. 实例演示盒模型常用属性,附图

秋闲独醉
秋闲独醉原创
2022年07月08日 13:27:25273浏览

实例演示伪类选择器: 结构伪类与状态伪类

结构伪类

伪类选择器:nth-of-type(an+b);相当于一个class选择器
a 从0开始,依次是1,2,3,4…
n 从0开始,依次是1,2,3,4…
b 从0开始,依次是1,2,3,4…

选择第一个元素

  1. ul>li:nth-of-type(1){
  2.         color: red;
  3. }
  4. ul>li:first-of-type{
  5.         background-color: yellow;
  7. }

选择其中一个元素

  1. ul>li:nth-of-type(n){
  2.         font-size: 2em;
  3.         margin: 5px;
  5. }

选择最后一个元素

  1. ul>li:last-of-type{
  2.         color: purple;
  4. }

选择前3个元素

  1. ul>li:nth-of-type(-n+3){
  2.         border: 2px solid black;
  4. }

最后3个无素

  1. ul>li:nth-last-of-type(-n+3){
  2.         background-color: orange;
  4. }

从第3个元素开始

  1. ul>li:nth-of-type(n+3){
  2.         font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  4. }

奇数元素

  1. ul>li:nth-of-type(2n-1){
  2.         color: pink;
  4. }
  5. ul>li:nth-of-type(2n+1){
  6.         background-color: blue;
  8. }
  9. ul>li:nth-of-type(odd){
  10.         border-top: 3px solid red;
  12. }

偶数元素

  1. ul>li:nth-of--type(2n){
  2.         border-left: 3px solid pink;
  4. }
  5. ul>li:nth-of-type(even){
  6.         border-bottom: 3px solid yellow;
  8. }

结构伪类

状态伪类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       button:disabled {
  10.         color: red;
  11.         background-color: pink;
  12.       }
  13.       input:checked + label {
  14.         color: blue;
  15.       }
  16.       button:hover {
  17.         cursor: pointer;
  18.         background-color: coral;
  19.       }
  20.       input:focus {
  21.         background-color: gray;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div>
  27.       <label for="uname">用户名：</label>
  28.       <input type="text" />
  29.       <input type="radio" name="sex" id="male" value="1" checked /> <label for="">男</label> <input type="radio" name="sex" id="fmale" value="2" /><label for="">女</label>
  30.       <button disabled>提交</button>
  31.     </div>
  32.   </body>
  33. </html>

状态伪类

实例演示盒模型常用属性,附图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       div {
  14.         width: 200px;
  15.         height: 100px;
  16.         background-color: orange;
  17.         border: 10px solid red;
  18.         padding: 10px;
  19.         margin: 10px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div></div>
  25.   </body>
  26. </html>

第一个盒子计算

  1. <style>
  2.       * {
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.       }
  7.       div {
  8.         width: 200px;
  9.         height: 100px;
  10.         background-color: orange;
  11.         border: 10px solid red;
  12.         padding: 10px;
  13.         margin: 10px;
  14.       }
  15.     </style>

第二种盒子计算

上一条：7.4——常用标签与应用场景之表格与单元格下一条：伪类选择器-结构伪类、根据位置选择匹配
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多