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

结构伪类

伪类选择器: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>

第二种盒子计算

更多相关文章

  1. windows系统上安装与使用Android(安卓)NDK r5
  2. CSS选择器种类
  3. css伪类选择器
  4. 样式分类与选择器详解
  5. html基础：css自定义样式的来源及选择器优先级权重的分析
  6. CSS样式优先级和权重和常用选择器代码演示
  7. css基础：链接形式及选择器的用法
  8. 跟着大牛学PHP--CSS样式和选择器
  9. css自定义样式来源选择器与选择器的权重分析

随机推荐

  1. 100篇原创文章，可乐de数据分析之路
  2. 2020年出生人口会大跌吗？解读人口数据
  3. ssh 创建多个秘钥对，连接不同的服务器
  4. centos 7 scp命令的使用
  5. 强势回归！再说回归分析
  6. 数据会说谎的真实例子有哪些
  7. 火爆全网的条形竞赛图，原来做起来这么简单
  8. Python爬虫-selenium
  9. 全网最新最良心的IDEA安装教程
  10. Python数据可视化：2018年北上广深空气质量