伪类选择器

  1. <ul class="list">
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5.   <li>item4</li>
  6.   <li>item5</li>
  7.   <li>item6</li>
  8.   <li>item7</li>
  9.   <li>item8</li>
  10.   <p>a1</p>
  11.   <p>a2</p>
  12.   <p>a3</p>
  13. </ul>

结构伪类

  • 分组结构伪类:用于选择子类元素,所以应该给他一个查询起点

:nth-of-type()

  1. .list > li:nth-of-type(3) {
  2.   color: bisque;
  3. }
  5. /_ ()内输入要选择的第几个 li 标签_/

:nth-last-of-type() 倒数选择.

第一个标签 可以简写 :first-of-type,最后一个可以写 :last-of-type

  1. .list > :first-of-type {
  2.   color: bisque;
  3. }
  5. /_ 选择第一个 li 标签_/
  8. .list > :last-of-type {
  9.   color: bisque;
  10. }
  12. /_ 选择左后一个 li 标签_/

伪类选择器的参数

:nth-of-type(an+b)

  • (an+b)参数

    1. a=0 为选择单个标签
    2. a=1 为选择多个标签
    3. a=-1 为选择前几个标签
    4. a=2 为选择奇数或偶数标签
    5. n 为循环(从 0 开始到最后标签数)
    6. b 为偏移量()

  • 匹配单个元素

  1. .list > li:nth-of-type(0n+3) {
  2.   color: bisque;
  3. }
  6. /_ ()内输入要选择的是 "an+b";从n=0开始往下循环.
  7. "0*1+3=3";
  8. "0*2+3=3";(0*2还是=0,再加3最终还是等于3,所以这个a=0,为选择一个标签)
  9. 所以可以直接输入3偏移量_/
  • 匹配一组
  1. 偏移量后面的所有标签 (a=1)
  1. .list > li:nth-of-type(1n+3) {
  2.   color: bisque;
  3. }
  6. /_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
  7. a=1
  8. "1*0+3=3";
  9. "1*1+3=4";
  10. "1*2+3=5";
  11. "1*3+3=6";
  12. 直到循环到最后一个1*6+3=9;
  13. 当循环等于9是 li标签没有9个所以最后一个=9的不生效;
  14. 选择结果就是3-8的li标签被选中._/

  1. 偏移量前面的所有标签 (a=-1)
  1. .list > li:nth-of-type(-n+3) {
  2.  color: bisque;
  3. }
  6. /_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
  7. "-1*0+3=3";
  8. "-1*1+3=2";
  9. "-1*2+3=1";
  10. "-1*3+3=0";
  11. 直到循环到最后一个"-1*3+3=0";
  12. 当循环等于0是 li标签没有0个所以最后一个=0的不生效;
  13. 选择结果就是1-3的li标签被选中._/
  1. 所有奇数的标签 (a=2)
  1. .list > li:nth-of-type(2n+1) {
  2.  color: bisque;
  3. }
  6. /_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
  8. "2*0+1=1";
  9. "2*1+1=3";
  10. "2*2+1=5";
  11. "2*3+1=7";
  13. 选择结果就是1,3,5,7的li标签被选中._/
  1. 所有偶数数的标签 (a=2)
  1. .list > li:nth-of-type(2n) {
  2.  color: bisque;
  3. }
  6. /_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
  8. "2*0+0=0";
  9. "2*1+0=2";
  10. "2*2+0=4";
  11. "2*3+0=6";
  12. "2*3+0=8";
  13. 选择结果就是2,4,6,8的li标签被选中._/

表单伪类

  1. <input type="text" disabled />
  2. <input type="text" enabled />
  4. <style>
  5.   input:disabled {
  6.     background-color: rgb(206, 20, 20);
  7.   }
  8.     input:enabled {
  9.     background-color: rgb(145, 199, 27);
  10. </style>

input 标签

  • 状态
  1. :disabled: 禁用
  2. :enabled: 所有 有效的
  3. :checked 选中的时候
  4. :hover 鼠标悬停
  5. :focus 获取焦点

表单选中样式

  1. <input type="text" disabled />
  2. <input type="text" />
  3. <input type="text" />
  5. <br />
  6. <p></p>
  8. <input type="radio" name="sex" value="0" /><label for="m">男</label>
  9. <input type="radio" name="sex" value="1" /><label for="f">女</label>
  11. <style>
  12.   input:checked + label {
  13.     color: rgb(15, 216, 58);
  14.   }
  15. </style>
  17. <!-- input:checked 为表单为选中状态;
  18.     + label   为相邻的 label标签(+ 为相邻的)
  19.  -->

更多相关文章

  1. 浅谈android的selector背景选择器
  2. 浅谈android的selector背景选择器
  3. 浅谈android的selector，背景选择器
  4. 浅谈android的selector背景选择器（ListView/GridView）
  5. Android实现XML解析技术
  6. 浅谈android的selector背景选择器
  7. android之组件2
  8. Android图形选择 - Selector
  9. 浅谈android的selector背景选择器

随机推荐

  1. 开开心心爬APP，结果一坑连一坑
  2. nginx跳转 去掉工程名
  3. #6.1# 用python画出你的童年回忆
  4. centos7 中yum不能用了
  5. 看了我做的年度报表，老板大呼NB！
  6. 摆摊吧，后浪
  7. 用python爬取4332条粽子数据进行分析
  8. 一个公式三指标，电商分析的破局之道
  9. Python爬取 201865 条《隐秘的角落》弹幕
  10. LeetCode第 146 号问题： LRU 缓存机制