欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

伪类选择器

程序员文章站 2022-05-10 17:33:49
...

伪类选择器

  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. }
  4. /_ ()内输入要选择的第几个 li 标签_/

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

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

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

伪类选择器

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

表单伪类

  1. <input type="text" disabled />
  2. <input type="text" enabled />
  3. <style>
  4. input:disabled {
  5. background-color: rgb(206, 20, 20);
  6. }
  7. input:enabled {
  8. background-color: rgb(145, 199, 27);
  9. </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" />
  4. <br />
  5. <p></p>
  6. <input type="radio" name="sex" value="0" /><label for="m"></label>
  7. <input type="radio" name="sex" value="1" /><label for="f"></label>
  8. <style>
  9. input:checked + label {
  10. color: rgb(15, 216, 58);
  11. }
  12. </style>
  13. <!-- input:checked 为表单为选中状态;
  14. + label 为相邻的 label标签(+ 为相邻的)
  15. -->