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

2024-01-08 22:43:10

文章目录

前言
一、先看常规操作
- 1.后代和子元素选择器的基本语法
- 2.来吧，展示！
二、看我大招——并集选择器
三、使用注意事项

前言

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

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

一、先看常规操作

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，不管父亲本身的权重多大

码农公寓