ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-10-22 09:32:27  阅读：116  来源： 互联网

标签：box 样式 好几遍 li ul nbsp background 选择器


文章目录

前言

在这里插入图片描述

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

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

一、先看常规操作

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

标签：box,样式,好几遍,li,ul,nbsp,background,选择器
来源： https://blog.csdn.net/m0_61843874/article/details/120892168

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有