ASCII码 ASCII码

css伪类选择器

发布于：2022-07-08 13:08:49  栏目：技术文档

css伪类选择器

结构伪类

  1. <body>
  2.     <div>
  3.         <ul>
  4.             <li>
  5.                 <p>我是1</p>
  6.             </li>
  7.             <li>
  8.                 <p>我是2</p>
  9.             </li>
  10.             <li>
  11.                 <p>我是3</p>
  12.             </li>
  13.             <li>
  14.                 <p>我是4</p>
  15.             </li>
  16.             <li>
  17.                 <p>我是5</p>
  18.             </li>
  19.             <li>
  20.                 <p>我是6</p>
  21.             </li>
  22.             <li>
  23.                 <p>我是7</p>
  24.             </li>
  25.             <li>
  26.                 <p>我是8</p>
  27.             </li>
  28.             <li>
  29.                 <p>我是9</p>
  30.             </li>
  31.         </ul>
  32.     </div>
  33.     <style>
  34.         li:nth-of-type(n){
  35.             color: red;
  36.         }
  37.     </style>
  38. </body>

效果图

image-20220707231151668

选择1-6

  1. <body>
  2.     <div>
  3.         <ul>
  4.             <li>
  5.                 <p>我是1</p>
  6.             </li>
  7.             <li>
  8.                 <p>我是2</p>
  9.             </li>
  10.             <li>
  11.                 <p>我是3</p>
  12.             </li>
  13.             <li>
  14.                 <p>我是4</p>
  15.             </li>
  16.             <li>
  17.                 <p>我是5</p>
  18.             </li>
  19.             <li>
  20.                 <p>我是6</p>
  21.             </li>
  22.             <li>
  23.                 <p>我是7</p>
  24.             </li>
  25.             <li>
  26.                 <p>我是8</p>
  27.             </li>
  28.             <li>
  29.                 <p>我是9</p>
  30.             </li>
  31.         </ul>
  32.     </div>
  33.     <style>
  34.         li:nth-of-type(-n+6){
  35.             color: red;
  36.         }
  37.     </style>
  38. </body>

效果截图展示

image-20220707232130518

选择6-9

  1. <body>
  2.     <div>
  3.         <ul>
  4.             <li>
  5.                 <p>我是1</p>
  6.             </li>
  7.             <li>
  8.                 <p>我是2</p>
  9.             </li>
  10.             <li>
  11.                 <p>我是3</p>
  12.             </li>
  13.             <li>
  14.                 <p>我是4</p>
  15.             </li>
  16.             <li>
  17.                 <p>我是5</p>
  18.             </li>
  19.             <li>
  20.                 <p>我是6</p>
  21.             </li>
  22.             <li>
  23.                 <p>我是7</p>
  24.             </li>
  25.             <li>
  26.                 <p>我是8</p>
  27.             </li>
  28.             <li>
  29.                 <p>我是9</p>
  30.             </li>
  31.         </ul>
  32.     </div>
  33.     <style>
  34.         li:nth-of-type(n+6){
  35.             color: red;
  36.         }
  37.     </style>
  38. </body>

效果截图展示

image-20220707232251599

状态伪类

将鼠标移入按钮变成小手并改变背景颜色

  1. <body>
  2.     <div>
  3.         <button class="anniu">我是按钮</button>
  4.     </div>
  5.     <style>
  6.         .anniu{
  7.             border: 0px;
  8.             background-color: coral;
  9.             color: white;
  10.         }
  11.         .anniu:hover {
  12.             cursor: pointer;
  13.             background-color: darkslategray;
  14.         }
  15.     </style>
  16. </body>

移入前效果截图演示

image-20220707233249823

移入后效果截图演示

image-20220707233349507

盒子

div宽度150，高度300，内边距10px，边框5px。

  1. <body>
  2.     <div class="box"></div>
  3.     <style>
  4.         .box {
  5.             box-sizing: border-box;
  6.             width: 150px;
  7.             height: 300px;
  8.             padding: 10px;
  9.             border: 5px;
  10.             border-color: black;
  11.             background-color: bisque;
  12.         }
  13.     </style>
  14. </body>

效果截图演示

image-20220707234049706

image-20220707234217767

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行