同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

文章目录


前言

同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

学到现在,其实可以发现代码越来越多,我们现在需要的就是简化代码,让整个代码看起来不会太冗杂,变得更高级更规范。


提示:以下是本篇文章正文内容,下面案例可供参考

一、先看常规操作

1.后代和子元素选择器的基本语法

后代选择器:元素1 元素2 {样式声明}(注意:元素中间用空格隔开,元素1父级,元素2子级(或孙子级,只要是后代都可以))

子元素选择器:元素1>元素2{样式声明}(注意:元素中间用大于号隔开,只能选择亲儿子)

2.来吧,展示!

现在代码看着好像不是很多,等等看对比就知道了…

效果1如下(示例):
同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

代码1如下(示例):

<!-- CSS代码 -->
 <style>
        li {
            list-style: none;
        }
        
        .box_1 {
            position: relative;
            width: 658px;
            height: 308px;
            margin: 0 auto;
            background: url(images/pic1.jpg)no-repeat;
        }
        
        .box_1 ul {
            position: absolute;
            top: 55px;
            left: 215px;
            background-color: transparent;
        }
        
        .box_1 ul li {
            margin-top: 10px;
        }
        
        .box_1 ul li input {
            width: 90px;
            height: 20px;
            border-radius: 5px;
            background-color: transparent;
        }
        
        .box_1>input {
            position: absolute;
            top: 165px;
            left: 235px;
            width: 50px;
            height: 50px;
            border: 1px solid #b2772b;
            background-color: #e29b3f;
            border-radius: 50%;
            margin-left: 75px;
        }
</style>
<!-- HTML结构代码 -->
<body>
    <form action="">
        <div class="box_1">
            <ul>
                <li><label>用户名:</label><input type="tel"></li>
                <li><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password"></li>
            </ul>
            <input type="submit" value="登录">
        </div>
    </form>
</body>

效果2如下(示例):
同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

代码2如下(示例):

<!-- CSS代码 -->
<style>
        li {
            list-style: none;
        }
        
        .box_2 {
            position: relative;
            width: 400px;
            height: 270px;
            margin: 0 auto;
            background: url(images/pic2.jpg)no-repeat;
        }
        
        .box_2 ul {
            position: absolute;
            top: 55px;
            left: 100px;
            background-color: transparent;
        }
        
        .box_2 ul li {
            margin-top: 10px;
        }
        
        .box_2 ul li label {
            color: rgb(255, 255, 255);
        }
        
        .box_2 ul li input {
            width: 90px;
            height: 20px;
            border-radius: 5px;
        }
        
        .box_2>input {
            position: absolute;
            top: 165px;
            left: 105px;
            width: 50px;
            height: 50px;
            background-color: #319fd1;
            border: 1px solid #1f79b9;
            border-radius: 50%;
            margin-left: 75px;
        }
</style>
<!-- HTML结构代码 -->
<body>
    <form action="">
        <div class="box_2">
            <ul>
                <li><label>用户名:</label><input type="tel"></li>
                <li><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password"></li>
            </ul>
            <input type="submit" value="登录">
        </div>
    </form>
</body>

观察一下会发现这两个登录页很多属性表单大小,背景颜色,边框圆角等好多是重复的,这时候我们就需要使用复合选择器里面的并集选择器来做,这样子可以节省代码。

二、看我大招——并集选择器

并集选择器:元素1,元素2{样式声明}(注意:元素中间用逗号隔开)

代码如下(示例):

<!-- CSS代码 -->
<style>
        li {
            list-style: none;
        }
        
        .box_1 ul li input,
        .box_2 ul li input {
            width: 90px;
            height: 20px;
            border-radius: 5px;
        }
        
        .box_1 ul li,
        .box_2 ul li {
            margin-top: 10px;
        }
        
        .box_1 ul,
        .box_2 ul {
            background-color: transparent;
        }
        
        .box_1>input,
        .box_2>input {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 75px;
        }
        
        .box_1 {
            position: relative;
            width: 658px;
            height: 308px;
            margin: 0 auto;
            background: url(images/pic1.jpg)no-repeat;
        }
        
        .box_1 ul {
            position: absolute;
            top: 55px;
            left: 215px;
        }
        
        .box_1 ul li input {
            background-color: transparent;
        }
        
        .box_1>input {
            position: absolute;
            top: 165px;
            left: 235px;
            border: 1px solid #b2772b;
            background-color: #e29b3f;
        }
        
        .box_2 {
            position: relative;
            width: 400px;
            height: 270px;
            margin: 0 auto;
            background: url(images/pic2.jpg)no-repeat;
        }
        
        .box_2 ul {
            position: absolute;
            top: 55px;
            left: 100px;
        }
        
        .box_2 ul li label {
            color: rgb(255, 255, 255);
        }
        
        .box_2>input {
            position: absolute;
            top: 165px;
            left: 105px;
            background-color: #319fd1;
            border: 1px solid #1f79b9;
        }
</style>
<!-- HTML结构代码 -->
<form action="">
        <div class="box_1">
            <ul>
                <li><label>用户名:</label><input type="tel"></li>
                <li><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password"></li>
            </ul>
            <input type="submit" value="登录">
        </div>
</form>
<form action="">
        <div class="box_2">
            <ul>
                <li><label>用户名:</label><input type="tel"></li>
                <li><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password"></li>
            </ul>
            <input type="submit" value="登录">
        </div>
</form>

运行一下,你会发现很神奇,效果是完全一样的,但是代码减少了很多。
同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

三、使用注意事项

这时候不得不提到一个知识点,CSS的三大特性:层叠性、继承性和优先级。

1.层叠性

层叠性(覆盖性):就近原则:哪个样式离结构近,就执行哪个样式

2.继承性

继承性:子标签继承父标签的某些样式,如text-,font-,line-这些元素开头的可以继承,以及color属性、行高的继承

3.优先性

常见问题:明明设置了样式,发现没有效果,这时候是该检查一下是不是权重不够大导致的没效果。
同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会

选择器权重从小到大:
继承或者*(0,0,0,0)
元素选择器(0,0,0,1)
类选择器,伪类选择器(0,0,1,0)
ID选择器(0,1,0,0)
行内样式style=“”(1,0,0,0)
!important重要的(无穷大)

权重的相加可以直接把0001看作1,把0010看作10,把0100看作100去计算,假如继承加元素选择器就等于0+1=1,类元素选择器加行内样式就等于10+1000=1010。

子继承父亲的权重为0,不管父亲本身的权重多大

上一篇:用javascript向一个网页连接接口发送请求,并接收该接口返回的json串


下一篇:HTML表格概述