css选择器

最新推荐文章于 2022-07-30 19:01:08 发布

HuiDT

最新推荐文章于 2022-07-30 19:01:08 发布

阅读量153

点赞数

分类专栏： HTML+CSS 文章标签： css选择器

本文链接：https://blog.csdn.net/qq_42842786/article/details/100172647

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

html

_{一切尽在代码中}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="lesson.css">
    <!-- 页面级css -->
    <!-- <style type="text/css"> 
    div{
        background-color: brown;
        width: 300px;
        height: 300px;
    } -->
    </style>
</head>
<body>
    <div style="background-color: rgb(111, 210, 228)" id="dede"></div>
    <br><div id="fefe"></div>
    <br><div id="dhgb"></div>
    <br><div class="srgsdz"></div>
    <br><div class="srgsdz dryjdr"></div>
    <br><div class="dryjdr"></div>
    <br><div style="background-color: darkmagenta; width: 100px; height: 100px;" id="suebzj"></div>
    
    
    <div id="2142" class="we"></div>
    <div id="iuhi" class="ui"></div>
    <div class="lplp"></div> 



    <div>
        <span>
            123
        </span>
    </div>
    <span>456</span>



    <div>
        <span>789</span>
        <strong>
            <span>567</span>
        </strong>
    </div>

    <section>
        <div>
            <p>
                <a href=""><span>

                </span></a>
            </p>
            <ul>
                <li>
                    <a href="">
                        <span>
                            <em>1</em>
                        </span>
                    </a>
                    <p></p>
                </li>
                <li></li>
            </ul>
        </div>
        <a href="">
            <p>
                <em>2</em>
            </p>
            <div></div>
        </a>
    </section>

    <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>

    <div class="wrapper">
        <div class="content">
            <em>1</em>
        </div>
    </div>

<br>
    <div class="classDiv" id="idDiv">
        <p class="classP" id="idP">890</p>
    </div>



    <div id="qweqwe">
        
    </div>

</body>
</html>
<!-- 第三 外部css文件 -->
<!-- 计算机的异步、同步是反的 -->

<!-- 
    id选择器        一对一
    class选择器     多对多
    标签选择器      全部选中
    通配符选择器    任意的（所有的标签）
    属性选择器      

    !important > 行间样式 > id > class = 属性选择器(先后顺序) = 伪类 > 标签 = 伪元素 > 通配符选择器


                CSS权重
    !important          Infinity（可计算）
    行间样式             1000
    id                  100
    class|属性|伪类     10
    标签|伪元素         1
    通配符              0

    权重值并不准确，从0到1是256进制


        总结优先级：
    1、使用了 !important声明的规则。
    2、内嵌在 HTML 元素的 style属性里面的声明。
    3、使用了 ID 选择器的规则。
    4、使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
    5、使用了元素选择器的规则。
    6、只包含一个通用选择器的规则。
    7、同一类选择器则遵循就近原则。

        总结：权重是优先级的算法，层叠是优先级的表现
-->

css

#dede {
    background-color: blueviolet;
    width: 100px;
    height: 100px;
}
#fefe{
    background-color: rgb(20, 90, 90);
    width: 100px;
    height: 100px;
}
#dhgb{
    background-color: rgb(38, 150, 38);
    width: 100px;
    height: 100px;
}
.srgsdz{
    background-color: rgb(226, 168, 60);
    width: 100px;
    height: 100px;
}
.dryjdr{
    background-color: rgb(31, 90, 167);
    width: 100px;
    height: 100px;
}
*{
    background-color: rgb(92, 57, 14);
}
#suebzj{
    background-color: aqua !important;
}
/* 属性选择器 */
/* [class]{
    background-color: black;
    width: 100px;
    height: 100px;
} */

/* 父子选择器（直接或间接地父子关系） */
div span{
    background-color: aqua;
    width: 50px;
    height: 50px;
}

/* 直接子元素选择器（直接地父子关系） */
div > span{
    background-color: rgb(3, 26, 26);
    width: 50px;
    height: 50px;
}

/* 浏览器底层遍历地顺序是自右向左，这样更快 */
section div ul li a em{
    background-color: red;
    width: 50px;
    height: 50px;
}

/* 并列选择器(多个属性并列) */
div.demo{
    background-color: blue;
    width: 60px;
    height: 100px;
}


/* 权重计算，并列地相加即可 */
/* 权重越大，优先级越高 */
/* 100+1 */
#idDiv p{
    background-color: greenyellow;
    width: 40px;
    height: 40px;
}
/* 1+10 */
div .classP{
    background-color: rgb(62, 23, 105);
    width: 40px;
    height: 40px;
}


/* 但是当权重一样时，遵循后来先到原则，后面地会覆盖原来的*/
/* 1+10+100 */
div .classP#idP{
    background-color: #f40!important;
    width: 40px;
    height: 40px;
}
/* 1+10+100 */
div .classP#idP{
    background-color: rgb(235, 114, 33);
    width: 40px;
    height: 40px;
}

/* 分组选择器 */
/* 多个标签用都好隔开，共用一段代码 */



#qweqwe{
    width: 0px;
    height: 0px;
    color: #f40;
    border: 100px solid black;
    border-left-color: blueviolet;
    border-right-color: rgb(105, 85, 218);
    border-top-color: rgb(119, 197, 30);
    border-bottom-color: transparent;/*透明色*/

}

选择器

附菜鸟CSS选择器教程

首先提css引入方式

内联方式：在标签中的 style 属性中添加 CSS
嵌入方式：在<head>标签中引入
外部css文件：链接本地文件或导入外部文件

css选择器

选择器	作用范围
id选择器	一对一
class选择器	多对多
标签选择器	全部选中
通配符选择器	任意的（所有的标签）
属性选择器	含有该属性地

附
1、属性选择器

[class]{
    background-color: black;
    width: 100px;
    height: 100px;

凡是带有class的标签都会被选中渲染（前提是权重）

1、父子选择器

<div>
        <span> YAMA 1</span>
    </div>
    
    <div>
        <span>YAMA 2</span>
        <strong>
            <span>YAMA 3</span>
        </strong>
    </div>

div span{
    background-color: aqua;
    width: 50px;
    height: 50px;
}
div > span{
    background-color: rgb(42, 196, 196);
    width: 50px;
    height: 50px;
}

div span{}这种方式可以对直接和间接的父子关系起作用
div > span{}只针对直接的父子关系

3、并列选择器（多个属性并列）

<div id="tyjc" class="we">web前端哈哈哈</div>

div.we#tyjc{
    color: rgb(10, 44, 44);
}

把属性并列写出来，不需要空格

css权重

引：当css代码出现对某一属性多次设定时，如何选择？例如分别用id和class分别对标签进行操作，到底该按照谁的来显示？
这就涉及css，谁的权值更大，谁就优先。

不建议记下面的顺序，因为在实际开发中可能会遇到四五层嵌套，非常复杂

!important > 行间样式 > id > class = 属性选择器(先后顺序) = 伪类 > 标签 = 伪元素 > 通配符选择器

应该记住每个方法对应的权值

权重计算，并列地相加即可权重越大，优先级越高，但是当权重一样时，遵循后来居上原则，后面地会覆盖原来的。

css权重	权值_{（注意其中0到1是256进制）}
!important	Infinity_{（可计算，比如（Infinity+1）> Infinity）}
行间样式	1000
id	100
class or属性or伪类	10
标签or伪元素	1
通配符	0

注：当权值相等时，按照后来居上的原则，后面的代码会覆盖前面的。

附

浏览器底层遍历顺序是从内层向外层，这样速度更快，如下代码，多层嵌套，自内向外查找

<section>
        <div>
            <p>
                <a href=""><span> </span></a>
            </p>
            <ul>
                <li>
                    <a href="">
                        <span>
                            <em>4</em>
                        </span>
                    </a>
                    <p></p>
                </li>
                <li></li>
            </ul>
        </div>
        <a href="">
            <p>
                <em>5</em>
            </p>
            <div></div>
        </a>
    </section>

section div ul li a em{
    background-color: red;
    width: 50px;
    height: 50px;
}

HuiDT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

文章目录htmlcss选择器html一切尽在代码中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="lesson.css">  ...
复制链接

扫一扫

专栏目录