search

博客列表 >关于伪类选择器，选择器权重，以及box-sizing属性的课后练习。

关于伪类选择器，选择器权重，以及box-sizing属性的课后练习。

飞天001
飞天001原创
2023年03月16日 19:28:40249浏览

通过3月15日直播课程的学习,熟悉了选择器中的伪类选择器的应用,掌握了关于选择器权重的相关知识,以及box-sizing属性的实际用法和好处。

1. 伪类选择器

伪类选择器分类两种：一是结构伪类选择器，二是状态伪类选择器。

1.1 结构伪类

  • :nth-child()
  • :first-child
  • :last-child
  • :ntf-last-child()

    结构伪类实例

    1. /* 伪类选择器实例css */
    2. /* 用结构伪类中的:nth-child()实现精准控制某个元素 */
    3. .list > .item:nth-child(2){
    4.   background-color:red;
    5. }
    6. .list > .item:nth-child(5){
    7.   background-color: blueviolet;
    8. }
    9. /* 用结构伪类中的:first-child控制第一个元素 */
    10. .list > .item:first-child{
    11.   background-color: blueviolet;
    12. }
    13. /* 用结构伪类中的:last-child控制最后一个元素 */
    14. .list > .item:last-child{
    15.   background-color: chartreuse;
    16. }
    17. /* 用结构伪类中的:nth-last-child()控制从最后一个元素倒数的第某个元素 */
    18. .list > .item:nth-last-child(2){
    19.   background-color: darkcyan;
    20. }
    21. .list > .item:nth-last-child(3){
    22.   background-color: darkgoldenrod;
    23. }
    运行效果如下:

  1. /* 通过:nth-child(-n+3)实现控制前3个元素 */
  2.  .list > .item:nth-child(-n+3){
  3.     background-color: blue;
  4.  }
  5.  /* 通过:nth-last-child(-n+3)实现控制倒数前4个元素 */
  6. .list > .item:nth-last-child(-n+4){
  7.     background-color: antiquewhite;
  8. }

运行效果如下:

  1. /* 通过:nth-child(n)实现控制所有元素 */
  2. .list > .item:nth-child(n){
  3.     background-color: brown;
  4. }

运行效果如下:

  1. /* 通过:nth-child(n+3)实现控制从第3个元素开始的所有元素 */
  2. .list > .item:nth-child(n+3){
  3.     background-color: bisque;
  4. }

运行结果如下:

  1. /* 通过:nth-last-child(n+5)实现控制倒数第5个元素开始的往前数所有元素 */
  2. .list > .item:nth-last-child(n+5){
  3.     background-color: bisque;
  4. }

运行结果如下:

  1. /* 通过结构伪类:nth-child(2n)或者：nth-child(even)实现控制偶数元素 */
  2. .list > .item:nth-child(even){
  3.     background-color: blueviolet;
  4. }

运行结果如下:

  1. /* 通过结构伪类:nth-child(2n+1)或者:nth-child(odd)实现对奇数元素的控制 */
  2. .list > .item:nth-child(odd){
  3.     background-color: chocolate;
  4. }

运行结果如下:

  1. /* nth-child(an+b) 当a>=2时,固定间隔a-1,可以用偏移量b来进行微调,可正可负*/
  2. .list > .item:nth-child(3n+2){
  3.     background-color: brown;
  4. }

运行结果如下:

1.2 状态伪类

  • :hover:鼠标悬停
  • enabled:有效控件
  • disabled:禁用控件
  • checked:选中控件
  • required:必填控件
  • focus:焦点控件
  • not():过滤掉某些元素
  • empty:空

状态伪类主要用于修饰链接和表单

  1. <form action="">
  2.     <fieldset class="login">
  3.         <div>
  4.             <legend class="title">用户登录</legend>
  5.             <label for="uname">用户名:</label>
  6.             <input type="text" name="uname" id="uname">
  7.         </div>
  8.         <div>
  9.             <label for="pwd">密  码:</label>
  10.             <input type="password" name="pwd" id="pwd">
  11.         </div>
  12.        <div class="remember">
  13.             <input type="checkbox">
  14.             <label for="rem">记住我</label>
  15.        </div>
  17.         <button class="submit">提交</button>
  18.     </fieldset>
  19.    </form>

1.状态伪类中的焦点控件:focus

  1. /* 状态伪类实例 */
  2. div>input{
  3.     border: none;
  4.     border-bottom: 1px solid gray;
  5. }
  6. /* :focus焦点类实现点击触发焦点后,input文本框边框加上红色 */
  7. .login :focus{
  8.     outline: 1px solid red;
  9.     border-bottom: none;
  10. }

实现效果如下

2.状态伪类中的必填控件::required

首先在表单中input文本框中加入必填属性

<input type="text" name="uname" id="uname" required>

在css中加入:required

  1.  /* 状态伪类实例 */
  2. div>input{
  3.     border: none;
  4.     border-bottom: 1px solid gray;
  5. }
  6. /* :focus焦点类实现点击触发焦点后,input文本框边框加上红色 */
  7. .login :focus{
  8.     outline: 1px solid red;
  9.     border-bottom: none;
  10. }
  11. .login :required{
  12.     background-color: aqua;
  13. }

实现效果如下:

3.状态伪类中的选中控件:checked

  1. .login input:checked + label{
  2.     color: blue;
  3. }

实现效果如下:

4.状态伪类中的鼠标悬停::hover

  1. .login>.submit:hover{
  2.     background-color: brown;
  3.     color: white;
  4.     cursor: pointer;
  5. }

执行效果如下:

2. 选择器权重

元素 = 标签 + 属性
原子选择器:标签(tag)+类(class)+id
权重大小:
tag:1, class:10, id:100

权重需要累加

<h2 class="title" id="header">php中文网</h2>

  1. /* 类class的 权重是10,字体颜色为红色*/
  2. .title{
  3.     color: red;
  4. }

效果如下

  1. /* 类class:title 权重是10,
  2.    id:header 的权重是100,权重高于,title,因此字体显示蓝色blue
  3. */
  5. #header{
  6.     color: blue;
  7. }
  9. .title{
  10.     color: red;
  11. }

执行效果如下:

  1. * 类class:title 权重是10,
  2.    id:header 的权重是100,h2是标签,权重是1. h2#header总共权重是101,为最高权重,因此字体显示绿色green
  3. */
  4. h2#header{
  5.     color: green;
  6. }
  8. #header{
  9.     color: blue;
  10. }
  12. .title{
  13.     color: red;
  14. }

执行效果如下:

  1. * 在类.title加了!important为最高权重,因此显示字体为红色
  2. */
  4. h2#header{
  5.     color: green;
  6. }
  8. #header{
  9.     color: blue;
  10. }
  12. .title{
  13.     color: red!important;
  14. }

执行效果如下:

3.盒模型 中的box-sizing属性

添加一个盒子<div class="box"></div>
css代码如下:

  1. /* 宽度设置为100px,高度设置为50px,但是实际的盒子大小是122*72
  2. 宽度是:100+20+2,高度是50+20+2  是加上边框border和内边距padding后的结果*/
  3. .box{
  4.     width: 100px;
  5.     height: 50px;
  6.     border: 1px solid red;
  7.     padding: 10px;
  8. }

这是因为盒子大小计算方法的属性box-sizing的默认值是content-box
content-box计算方法是:盒子大小需要设置的宽高加上边框+内边距.
border-box计算方法是:盒子大小直接以设置的width和height为准.

  1. /* 宽度设置为100px,高度设置为50px,因为box-sizing的值是:border-box
  2. 所以盒子大小就是100*50
  3. */
  4. .box{
  5.     width: 100px;
  6.     height: 50px;
  7.     border: 1px solid red;
  8.     padding: 10px;
  9.     box-sizing: border-box;
  10. }

通过这次直播课程,掌握了结构伪类和状态伪类两种伪类选择器使用方法,熟悉了选择器权重的知识,懂得了box-sizing属性值的运用.

上一条：这是学习的状态伪类下一条：这是第五天学习的权重的知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多