Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css伪类选择器
Blogger Information
Blog 9
fans 0
comment 0
visits 5624
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css伪类选择器
进
Original
626 people have browsed it

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post