伪类的选择器

伪类的级别为最低的,比class,id,标签的级别更低

两种伪类

  1. 结构伪类
    根据元素位置获取元素
  2. 状态伪类
    根据状态来获取元素
    结构伪类
    说明:伪类结构属于父级结构元素 常与 > 符号一起使用
    nth-of-type 参数正数第几个.
    单选情况案例1:
    1.  <ul class="ul">
    2.    <li class="li1">测试</li>
    3.    <li class="li2">测试</li>
    4.    <li class="li3">测试</li>
    5.    <li class="li4">测试</li>
    6.    <li class="li5">测试</li>
    7.  </ul>
    8.  <style>
    9.    .ul > li:nth-of-type(2) {
    10.      background-color: black;
    11.    }
    12.  </style>
    示例图:

    更改北京颜色的是class属性为li2的一行

一组情况案例2:

  1.     <ul class="ul">
  2.       <li class="li1">测试</li>
  3.       <li class="li2">测试</li>
  4.       <li class="li3">测试</li>
  5.       <li class="li4">测试</li>
  6.       <li class="li5">测试</li>
  7.     </ul>
  8.     <style>
  9.       .ul > li:nth-of-type(n + 2) {
  10.         background-color: black;
  11.         color: chartreuse;
  12.       }
  13.     </style>

示例图:

单选情况案例3:
nth-last-of-type 参数倒数第几个
代码:

  2.     <ul class="ad">
  3.       <li class="a1">测试倒数</li>
  4.       <li class="a2">测试倒数</li>
  5.       <li class="a3">测试倒数</li>
  6.       <li class="a4">测试倒数</li>
  7.       <li class="a5">测试倒数</li>
  8.       <li class="a5">测试倒数</li>
  9.     </ul>
  10.     <style>
  11.       /* nth-last-of-type属性,是倒数第三个,在of前面加了一个last */
  12.       .ad > li:nth-last-of-type(3) {
  13.         background-color: blue;
  14.       }
  15.     </style>

示例图:

这里底部颜色变色的是倒数第三个,也就是class=”a4”的一行.

一组情况案例4:

  1.     <ul class="ad">
  2.       <li class="a1">测试倒数</li>
  3.       <li class="a2">测试倒数</li>
  4.       <li class="a3">测试倒数</li>
  5.       <li class="a4">测试倒数</li>
  6.       <li class="a5">测试倒数</li>
  7.       <li class="a6">测试倒数</li>
  8.       <li class="a7">测试倒数</li>
  9.       <li class="a8">测试倒数</li>
  10.     </ul>
  11.     <style>
  12.       /* 这里出来的是从倒数第三个,往前走,意思是2*0+3,第二个为2*1+3 第三个为2*2+3 */
  13.       /* 所以底色选中的是倒数第三个,倒数第五个,倒数第七个 */
  14.       .ad > li:nth-last-of-type(2n + 3) {
  15.         background-color: blue;
  16.       }
  17.     </style>

示例截图:

其他类参数:
first-of-type 整数第一个
last-of-type 倒数第一个

参考表格:

参数值说明
nth-of-type(值)数字例如1,2,3/an+b(a是可以是一个数字或-1,n属于自增字段,b也可以是1个数字)选择正数第几个或者第几组(在an+b情况下是组)
nth-last-of-type(值)数字例如1,2,3/an+b(a是可以是一个数字或-1,n属于自增字段,b也可以是1个数字)这里与nth-of-type相反,是倒数第几行或者第几组(在an+b情况下是组)
first-of-type空选中正数第一个
last-of-type空选中倒数第一个

解释:

  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.     </ul>
  11.     <style>
  12.       /* 
  13.         :nth-of-type(an+b)
  14.         1. a: 系数, [0,1,2,...]
  15.         2. n: [0,1,2,3,....]
  16.         3. b: 偏移量, 从0开始
  17.         注: 计算出来的索引,必须是有效, 从1开始
  18.       */
  20.       /* 选择元素只有二种情况: 
  21.       1. 选择一个
  22.       2. 选择一组 */
  24.       /* 1. 匹配单个, a = 0  */
  25.       /* 匹配第3个 */
  26.       .list > :nth-of-type(0n + 3) {
  27.         background-color: lightgreen-;
  28.       }
  29.       /* 0n+3 => 3 */
  30.       /* 因为0乘任何数都0,所以可简化,只写偏移量 */
  31.       .list > :nth-of-type(3) {
  32.         background-color: lightgreen-;
  33.       }
  35.       /* 2. 匹配一组 */
  36.       /* 2.1 a = 1 */
  37.       .list > :nth-of-type(1n) {
  38.         background-color: lightgreen-;
  39.       }
  40.       /* 1乘任何数不变, 所以1可以不写 */
  41.       .list > :nth-of-type(n) {
  42.         background-color: lightgreen-;
  43.       }
  45.       /* .list > * {
  46.         background-color: lightblue !important;
  47.       } */
  49.       /* 实际开发过程, 使用 n + b(偏移量)来匹配元素 */
  51.       /* 任务: 匹配第3个子元素后面的所有兄弟元素 */
  52.       /* .list .three,
  53.       .list .three ~ * {
  54.         background-color: lightgreen;
  55.       } */
  57.       /* an+b = 1n+3 */
  58.       /* n+3: 偏移量是3, 表示从第3个开始匹配 */
  59.       .list > :nth-of-type(n + 3) {
  60.         background-color: lightgreen-;
  61.       }
  62.       /*
  63.         n: 从0开始取, n+3 匹配的全过程
  64.         1. n=0: 0+3=3, 匹配第3个
  65.         2. n=1: 1+3=4, 匹配第4个
  66.         3. n=2: 2+3=5, 匹配第5个
  67.         4. n=3: 3+3=6, 匹配第6个
  68.         5. n=4: 4+3=7, 匹配第7个
  69.         6. n=5: 5+3=8, 匹配第8个
  70.         7. n=6: 6+3=9, 索引越界,匹配失败,结束计算
  71.         n+3 => [3,4,5,6,7,8], 匹配到6个
  72.       */
  74.       /* 2.2 a=-1, 功能与 a=1是一样,但是反向取 */
  75.       /* 取前3个 */
  76.       .list > :nth-of-type(-n + 3) {
  77.         background-color: lightgreen-;
  78.       }
  79.       /*
  80.       -n+3: 
  81.       1. n=0: -0+3=3, 匹配第3个
  82.       2. n=1: -1+3=2, 匹配第2个
  83.       3. n=2: -2+3=1, 匹配第1个
  84.       4. n=3: -3+3=0, 匹配失败,计算结束
  85.       -n+3 => [3,2,1],返回前3个
  86.       */
  88.       /* 思考: 如果匹配最后三个怎么办? */
  89.       .list > :nth-last-of-type(-n + 3) {
  90.         background-color: lightgreen-;
  91.       }
  93.       /* 2.3 a=2 : 匹配奇偶位置的元素 */
  94.       /* 2n+0: 偶数位元素 */
  95.       .list > :nth-of-type(2n) {
  96.         background-color: lightgreen-;
  97.       }
  98.       /* 2n+1: 奇数位元素 */
  99.       .list > :nth-of-type(2n + 1) {
  100.         background-color: lightgreen-;
  101.       }
  102.       /* 2n: even, 2n+1: odd  */
  104.       /* .list :nth-of-type(even):hover {
  105.         background-color: yellow;
  106.       } */
  107.     </style>

一组案例代码5:
兄弟元素的使用
代码:

  2.     <ul class="ad">
  3.       <li class="a1">test</li>
  4.       <li class="a2">test</li>
  5.       <li class="a3">test</li>
  6.       <li class="a4">test</li>
  7.       <li class="a5">test</li>
  8.       <li class="a6">test</li>
  9.       <li class="a7">test</li>
  10.       <li class="a8">test</li>
  11.     </ul>
  12.     <style>
  13.       /* 意思是从class="a3"开始,往后所有的兄弟元素添加一个底颜色 */
  14.       .ad > li.a4 ~ *:nth-last-of-type(n) {
  15.         background-color: blue;
  16.       }
  17.     </style>

意思是从class=”a3”开始,往后所有的兄弟元素添加一个底颜色,
示例图:

表单类伪元素

表单类伪元素就是进行对表单添加伪元素,使其增加一些class属性
表单类伪元素表格及使用说明:

属性值用法说明
disabledinput:disabled针对无效属性设置相关的css,前提情况下是当前属性在disabled禁用状态下,常常配合input中text属性值来使用,无效点击的设置
enabledinput:enabled针对有效属性,前提情况下是当前属性在enabled状态下,也就是默认开启的状态下,配合input中text属性值来使用,有效点击下的背景属性
focusinput:focus光标的聚焦移动到文本框后,鼠标的箭头的变化,一般也是配合input中text属性值来用的,input光标焦点的设置
checkedinput:checked + label此属性一般跟复选框/单选框挂钩,当type的值为radio,checkbox中, + label绑定使用,添加style属性,比如背景,点击后背景改变等, 这里解析为单击选中后文字的特效
hoverinput:hover类似class中hover使用方法一直,就是鼠标移动过去之后的效果

先贴代码,明天去公司继续撸代码

  1.     <form method="post" action="loin.php">
  2.       <div>
  3.         <span>用户名:</span>
  4.         <input type="text" id="text" name="text" value="用户名" />
  5.       </div>
  6.       <div>
  7.         <span>性别:</span>
  8.         <label for="m">男性</label>
  9.         <input type="radio" id="m" name="m" value="0" required />
  10.         <label for="g">女性</label>
  11.         <input type="radio" id="g" name="m" value="1" />
  12.       </div>
  13.       <div>
  14.         <span>爱好:</span>
  15.         <label for="love">php</label>
  16.         <input type="checkbox" id="love" name="l[]" checked />
  17.         <label for="html">html</label>
  18.         <input type="checkbox" id="html" name="l[]" />
  19.         <label for="css">css</label>
  20.         <input type="checkbox" id="css" name="l[]" />
  21.       </div>
  22.       <div>
  23.         <span>邮箱:</span>
  24.         <label for="email"></label>
  25.         <input type="email" id="email" name="email" placeholder="请填写您的邮箱" required />
  26.       </div>
  27.       <div>
  28.         <span>邀请码:</span>
  29.         <input type="text" value="75sgst" name="y" disabled />
  30.       </div>
  31.       <button type="submit">提交</button>
  32.       <button type="reset">重置</button>
  33.       <button type="button">无效点击</button>
  34.       <style>
  35.         input:disabled {
  36.           /* 无效点击的设置 */
  37.           background-color: gray;
  38.           color: honeydew;
  39.         }
  40.         input:enabled {
  41.           /* 有效点击下的背景属性 */
  42.           background-color: cyan;
  43.         }
  44.         span {
  45.           display: block;
  46.           width: 60px;
  47.           float: left;
  48.         }
  49.         div {
  50.           height: 30px;
  51.         }
  52.         input:focus {
  53.           /* input光标焦点的设置 */
  54.           background-color: blanchedalmond;
  55.         }
  56.         input:checked + label {
  57.           /* 这里解析为单击选中后文字的特效 */
  58.           color: red;
  59.           background-color: chartreuse;
  60.         }
  61.         input:hover {
  62.           /* hover为光标移动后的属性 */
  63.           background-color: crimson;
  64.           cursor: pointer;
  65.           /* 鼠标移动过去鼠标的属性 */
  66.         }
  67.       </style>
  68.     </form>

更多相关文章

  1. Android(安卓)AutoCompleteTextView动态自动补全
  2. Android面试复习（Android篇一）
  3. MySQL组合索引与最左匹配原则详解
  4. Android(安卓)内容提供者ContentProvider
  5. 详解Mysql查询条件中字符串尾部有空格也能匹配上的问题
  6. MySql比较运算符正则式匹配REGEXP的详细使用详解
  7. MySQL全面瓦解之查询的正则匹配详解
  8. 浅谈Mysql连接数据库时host和user的匹配规则
  9. android正则并不完全兼容java正则

随机推荐

  1. 类比MySQL，学习Tableau
  2. 关于虚拟机磁盘格式互转及合并，自带工具VM
  3. 什么是Lambda表达式?有什么优点?
  4. centos 普通用户使用root的权限
  5. Python的容器有哪些?分别有什么作用？
  6. android 问题汇总系列之七
  7. 不再纠结，一文详解pandas中的map、apply、
  8. 90题细品吴恩达《机器学习》，感受被刷题支
  9. 谈谈统计学正态分布阈值原理在数据分析工
  10. 学Flask框架有什么用?为什么学习Flask?