零基础学习CSS---02.选择器详解

吃烤肉的小飞飞

已于 2022-10-20 11:03:42 修改

阅读量362

点赞数

分类专栏： css零基础学习文章标签： css 学习 html

于 2022-10-20 11:00:52 首次发布

本文链接：https://blog.csdn.net/m0_52136934/article/details/127405566

版权

css零基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明：本人是一个小白，刚入门，学习没多长，如果有写的不对的地方，欢迎各位大佬前来指正，感谢！
目录：
1.class选择器
2.id选择器
3.包含选择器
4.通配符选择器
5.群组选择器
6.各选择器的权重
一、选择器
1.元素选择器
格式：元素名{属性:属性值;}**
比如： div{ color:red },所谓的元素名就是常见的标签：div,p,strong,img等。
如下：

<!-- 文件名为004-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> /* 这个就是内部样式 */
        div{/* 这个就是元素选择器的表现形式 */
            background-color: orange;
        }
        h1{
            background-color:red;
        }
    </style>
</head>
<body>
    <div>11111</div>
    <h1>44455444</h1>
    
</body>
</html>

显示结果就是div背景色为橙色，h的的背景色为红色，结果如下：
在这里插入图片描述
2.class选择器
格式：.定义的名字{属性:属性值;}
比如：<div class="ibm"></div>你定义的名字是ibm,那么在style标签中就应该这样写<style> .class{ color:red;}</style> 注：不要抄这个代码，是我自己写的，只是为了表达书写的方式。
注意：定义的名字前面的点一定不能往（非常重要）
举例如下:

<!-- 文件名：05-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ibm{/* 这个就是class选择器表现形式 */
            background-color:blue;
        }
        .name{
            background-color:red;
        }
        .qing{
            color:orange;
            background-color: black;
        }
    </style>
</head>
<body>
    <div>111111</div>
    <div class="ibm qing">222222</div><!-- 看style内部顺序，ibm在qing前面,这里有个先后顺序，在后面的qing掩盖了前面的ibm -->
    <div>3333333</div>
    <div class="name">45555555</div>
    <div>566666666</div>
</body>
</html>
<!-- class选择器 -->

注：各位小伙伴一定要看代码中的注释哦，上面说明了class 里面是可以放入多个我们定义的选择器，相互之间用空格隔开。然后同一个属性，后面的会掩盖前面的，不信你看下面的运行结果。
运行结果如下：
在这里插入图片描述
3.id选择器
格式：#id名{属性:属性值;}
比如：<div id="box"> </div> id名是box,那么在style标签中就应该这样写<style> #box{ color:red;}</style>注：这回要写"#"号
举例如下：

<!-- 文件名是06-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{/* id选择器的书写方式 */
            background-color: aqua;
        }
        #box2{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box1 box2">dsdsdsdsd</div><!-- 不能写其它box,只能写一个 -->
    <div id="box2">sdsd7788</div>
    <div id="box3">97788878877</div>
</body>
</html>
<!-- Id选择器 -->

小伙伴记得看代码的注释呀，id选择器不支持多个选择器放在一起，一个对应一个，不然没效果的，看下面的运行结果。
运行结果如下：
在这里插入图片描述
4.通配符选择器
语法：{属性:属性值;}
说明：通配选择符的写法是“*” ,其含义就是所有元素。
比如：{margin:0;padding:0;}代表清除所有元素的默认变凝聚值和填充值；这个东西以后经常用到的。
举例如下：

<!-- 文件名07-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{/* 通配符选择器 */
            margin: 0;/* 外边距 */
            padding: 0;/* 内边距 */
        }
    </style>
</head>
<body>  
    <h1>标签</h1>
    <div>11111111</div>
    <ul><!-- 这个是设置有序列表，但由通配符选择器的存在去掉了内外边距所以就在挤在一起来了 -->
        <li>4555</li>
        <li>9988</li>
        <li>789999</li>
    </ul>
</body>
</html>
<!-- 通配符选择器 -->

运行结果如下：
在这里插入图片描述
5.群组选择器
格式：选择符1，选择符2，选择符3{属性:属性值;}
直接看下面代码吧：

<!-- 文件名:08-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div,.boxp,h1{/* 逗好别忘,这个就是群组选择器的写法，应用于多个选择符有相同声明的时候 */
        background-color: orange;
       }
    </style>
</head>
<body>
    <div><p>sdsdadsadsd</p></div>
    <p class="boxp">sdsadqqeqeqeqeqeqeqeq</p>
    <h1>7889789988</h1>
</body>
</html>
<!-- 群组选择器 -->

主要各个选择符之间用","隔开。运行的结果应该就是div,boxp,h1标签里面的内容会有背景颜色。
运行结果如下：
在这里插入图片描述
6.后代选择器
格式：选择符1 选择符2{属性:属性值}
比如：<style> div p{color:red} </style> ,指的就是div标签中的p标签里的文字设置颜色为红色。
举例结果如下：

<!-- 文件名09-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{/*这个就是包含选择器的写法，可以这么理解就是 div 后面的p标签里的内容背景变成红色，就是针对后面设计，运行顺序 从右到左，先匹配P在找div */
        background-color: red;
        }
        div b{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div> <p>4444</p></div>
    <p>555555</p>
    <div><b>sdsadsadsad</b></div>
</body>
</html><!-- 后代选择器，包含选择器 -->

运行结果如下：
在这里插入图片描述
这也说明了div p{}对p标签里的内容没有影响，它只影响div标签里面的p标签里面的内容。
7.伪类选择器
语法：
1.a:link{属性:属性值} :超链接未访问过的状态。
2.a:visited{属性:属性值}:超链接访问过的状态。
3.a:hover{属性:属性值}:鼠标滑过超链接的状态。
4.a:active{属性:属性值}:超链接被激活的状态。
注意：
1.不一定是a标签哦，以后其他标签也会用得到。
2.引用他们要用":"。
3.当这四个伪类选择符一起使用时，要注意顺序，按照上述的顺序，不然可能会出现错误。
举例如下：

<!-- 10-css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问过的 */
        a:link{/* 伪类选择器 */
            color: blue;
        }
        /* 访问过的 */
        a:visited{
            color: red;
        }
        /* 鼠标放上去显示的的 */
        a:hover{
            color: aqua;
        }
        /* 点击激活 */
        a:active{
            color: green;
        }
        /* 顺序不能变 顺序变了就不能完成相应的效果*/

    </style>
</head>
<body>
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
</body>
</html>
<!-- 伪类选择器 -->

运行结果如下：
未访问的结果：
在这里插入图片描述
访问过的结果显示：

鼠标放进超链接上的显示：

二、选择器的权重
这里我们先写一个代码在代码里书写几个选择器，一个class选择器,一个id选择器,一个元素选择器,一个包含选择器，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: yellow;
        }
        .name{/* class选择器 */
            background-color: red;
        }
        #ui{/* id选择器 */
            background-color: aqua;
        }/* id>class>div */
        p{
            background-color: brown;
        }
        div p{/* 包含选择器，是选择器之和 */
            background-color: aquamarine;
        }/* 就近原则style中 */
    </style>
</head>
<body>
    <div class="name" id="ui">weweweewewew</div><!-- 比较class选择器和Id选择器的权重比 -->
    <!-- <div><p>sdaweweweweqeqqqqqq</p></div>
    <p>88888888888888888</p> -->

</body>
</html>

我们来看一下结果：
在这里插入图片描述

可以清楚的看到，显示的是id选择的颜色，说明，id选择器的权重大于class选择器，其他的证法同样如此，我就不一一验证，直接给出结论-----id选择器>class选择器>元素选择器。
下面我们来验证一下包含选择器与元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{/* 元素选择器 */
            background-color: yellow;
        }
        .name{/* class选择器 */
            background-color: red;
        }
        #ui{/* id选择器 */
            background-color: aqua;
        }/* id>class>div */
        p{
            background-color: brown;
        }
        div p{/* 包含选择器，是选择器之和 */
            background-color: aquamarine;
        }/* 就近原则style中 */
    </style>
</head>
<body>
    <!-- <div class="name" id="ui">weweweewewew</div>比较class选择器和Id选择器的权重比 -->
    <div><p>sdaweweweweqeqqqqqq</p></div>
    <p>88888888888888888</p>

</body>
</html>

运行结果如下：
在这里插入图片描述
说明：运行的结果是包含选择器>元素选择器。包含选择器，是包含选择器之和，即上述的div p{}的意思是div选择器+p选择器>p选择器。
下面我们在来验证一下内联样式与上一节的!important:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{/* 元素选择器 */
            background-color: yellow;
        }
        .name{/* class选择器 */
            background-color: red;
        }
        #ui{/* id选择器 */
            background-color: aqua;
        }/* id>class>div */
        p{
            background-color: brown;
        }
        div p{/* 包含选择器，是选择器之和 */
            background-color: aquamarine;
        }/* 就近原则style中 */
    </style>
</head>
<body>
    <div class="name" id="ui" style="background-color:black;">weweweewewew</div><!-- 验证一下内联样式 -->
    <!-- <div><p>sdaweweweweqeqqqqqq</p></div>
    <p>88888888888888888</p> -->

</body>
</html>

运行结果：
在这里插入图片描述
说明：这就表明了内联比其他的选择器权重更大哦。
我们在试试在元素选择器div里加上!important:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{/* 元素选择器 */
            background-color: yellow !important;/* 加上!important,important放在最后 */
        }
        .name{/* class选择器 */
            background-color: red;
        }
        #ui{/* id选择器 */
            background-color: aqua;
        }/* id>class>div */
        p{
            background-color: brown;
        }
        div p{/* 包含选择器，是选择器之和 */
            background-color: aquamarine;
        }/* 就近原则style中 */
    </style>
</head>
<body>
    <div class="name" id="ui" style="background-color:black;">weweweewewew</div><!-- 验证一下内联样式 -->
    <!-- <div><p>sdaweweweweqeqqqqqq</p></div>
    <p>88888888888888888</p> -->

</body>
</html>

运行结果如下：
在这里插入图片描述
所以我们综上案例可以得出结论：!important>内联样式>id选择器>class选择器>元素选择器,包含选择器是根据包含的选择器比重来计算的。
总结：
我们这一章学习了选择器：
1.class选择器:.box1{属性：属性名}
2.id选择器:#box{属性：属性名}
3.包含选择器:div p{属性：属性名}
4.通配符选择器:*{margin:0px;padding:0px}
5.群组选择器:a :link{属性：属性名};a:vistited{属性：属性名};a:hover{属性：属性名};a:active{属性：属性名}
以及各选择器的权重:!important>内联样式>id选择器>class选择器>元素选择器