1、选择器补充

在上篇分享中已说明了结构相关的伪类选择器，通过nth-of-type可以定位到页面上任何一个对象，本次主要补充状态匹配的伪类选择器。
以<a>为例，示范代码：

<style>
/* 链接四种状态:顺序是固定的 */
/* 1. 默认,没有访问/点击 */
a:link {
    color: blue;
    text-decoration: none;
}
/* 2. 已访问过的状态 */
a:visited {
    color: violet;
}
 /* 3. 悬停的状态 */
a:hover {
    color: red;
    text-decoration: underline;
}
/* 4. 激活,当鼠标点击压下去的时候 */
a:active {
    color: green;
}
</style>
<body>
    <form action="">
        <p>用户名:<input type="text" name="" value="admin" readonly autofocus></p>
        <p>邮箱:<input type="email" name="" value="" required></p>
        <p>密码:<input type="password" name="" value="123456" disabled></p>
        <p><button>提交</button></p>
    </form>
</body>

2、选择器提权

在简单选择器中，按优先级排名分别为：id>class>tag，可以理解为当定位得越准确（属性越多），优先级越高。所以选择器上可以【0(id数).0(class数).0(tag数)】依次按位对比得出优先级高低。

<head>
    <style>
/* 有一个计算公式: [id选择器的数量, class选择器的数量, tag选择器的数量] */
        /* body h2: [id=0, class=0, tag=2] */
        /* h2: [id=0, class=0, tag=1] */
        /* tag级向class级进位,class级向id级进位 */
        /* .on h2: [id=0, class=1, tag=1], [0,1,1]*/
        /* 如果想继续提权,选择一个只要比body h2 权重高的选择器组合就可以了 */
        /* [0,0,3] */
        html body h2 {
            color: skyblue;
        }
        /* [0,0,2] */
        body h2 {
            color: red;
        }
        /* 因为html是根元素,上面没有人 */
        /* [0,1,0] */
        /* .on {
            color: skyblue;
        } */
        /* [0,0,3] */
        /* html body h2 {
            color: red;
        } */
        /* [0,1,0] */
        /* .on {
            color: skyblue;
        } */
        /* [0,1,1] */
        h2.on {
            color: red;
        }
        /* [0,1,2] */
        body h2.on {
            color: skyblue;
        }
        /* [0,1,3] */
        html body h2.on {
            color: teal;
        }
        /* [0,2,3] */
        .on.off {
            color: red;
        }
        /* [1,0,0] */
        #foo {
            color: teal;
        }
        /* [1,0,1] */
        h2#foo {
            color: red;
        }
        /* [1,1,0] */
        #foo.on {
            color: seagreen;
        }
        /* [1,0,3] */
        html body h2#foo {
            color: red;
        }
        /* [1,0,2] */
        body h2#foo {
            color: blue;
        }
    </style>
</head>
<body>
<!-- h2标签定义了两个class属性，用空格隔开 -->
    <h2 class="on off" id="foo">hello php.cn</h2>
</body>

3、盒模型属性缩写

在盒子模型中，padding与margin可以按照顺时针分别定义上、右、下、左的四边属性。规律如下：

.box {
/* 内边距 */
/* padding: 上 右 下 左; 按顺时针方向*/
padding: 5px 10px 15px 20px;
/* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
/* 将背景色裁切到到内容区 */
background-clip: content-box;
/* 当左右相等，而上下不相等，使用三值语法 */
padding: 10px 20px 15px;
/* 当左右相等，上下也相等，使用二值语法 */
padding: 10px 30px;
/* 如果四个方向全相等，使用单值语法 */
 padding: 10px;
/* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
}

对于单边的属性，可以单独写每一个属性的名值对，也可以用复合属性的写法，后者更常用：

.box {
/* 边框 */
/* 每个边框可以设置三个属性: 宽度,样式,颜色 */
/* border-top-width: 5px;
border-top-color: red;
border-top-style: solid; */
/* border-top: 5px red solid; */
border-top: rgb(255, 0, 255) solid 5px;
border-bottom: 10px red dashed;
border: 5px solid #000;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php-229911-1208

2020-12-09 19:03:51