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

更多相关文章

  1. 手动部署Android-apk应用到模拟器
  2. Android(安卓)4.0 界面
  3. Android大图片裁剪终极解决方案（中：从相册截图）
  4. 阿里app法人认证备案流程
  5. android网络连接使用GET方式请求服务器时的setDoOutput(true)惹
  6. Android(安卓)屏幕截图 代码
  7. Android(安卓)屏幕截图 代码
  8. Android(安卓)ListView下滑会报空指针异常
  9. android之monkeyrunner截图及图像对比

随机推荐

  1. Android常用复杂控件使用(三)--Fragment
  2. 开放的Android更易中招 安全防护刻不容缓
  3. Qt for Android获取手机序列号/手机型号/
  4. android实现向右滑动返回功能
  5. 东拼西凑的第一个Android应用程序
  6. Android大牛的博客
  7. Android布局文件中命名空间的解析
  8. android样式，主题设置心得
  9. 自定义View系列教程02--onMeasure源码详
  10. Android学习小结