一天搞定CSS：css选择器--07

最新推荐文章于 2022-04-18 09:45:58 发布

Java仗剑走天涯

最新推荐文章于 2022-04-18 09:45:58 发布

阅读量422

点赞数

分类专栏：前端基础HTML5/CSS3 文章标签： css 选择器 id class 标签

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71440686

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

选择器：是指选择标签的方法

1.选择器类型

这里写图片描述

2.id选择器

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
            #box1{
                width: 200px;
                height: 200px;
                background: green;
            }
        </style>
    </head>
    <body>
        <!--
            id选择器           能过id选择元素（选择到的是一个元素）
                语法          #id名称{要添加的样式}
                注意：id具有唯一性，一个页面当中只能出现一个同样的id
        -->
        <div id="box"></div>
        <div id="box1"></div>
    </body>
</html>

3.标签选择器

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <!--
            标签选择器           通过标签名字选择元素（选择到的是一组元素）
                语法              标签名{要添加的样式}
                注意：标签选择器会给所有的标签都添加上相同的样式，会影响其它的标签
        -->
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

4.class选择器

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 50px;
            }
            .border{
                border: 10px solid #000;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <!--
            类选择器                通过class选择元素（选择到的是一组元素）
                语法              .class名称{要添加的样式}
                注意：页面中的class是可以重名的
                    一个元素的class可以有多个，每个class之间用空格隔开，如果后面class里的样式与前面的有重复的，那后面的会把前面的覆盖了
        -->
        <div class="box"></div>
        <p class="box border"></p>
        <section class="box border"></section>
    </body>
</html>

5.群组选择器

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>


            div,p,section,#title1,#title2,.head{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <!--
            群组选择器           能过逗号的方式选择元素（选择到的是一组元素）
                语法              标签名,标签名{要添加的样式}
                                #id名称,#id名称{要添加的样式}
                                .class名称,.class名称{要添加的样式}
                                标签名,#id名,.class名称{要添加的样式}
                只要任意一个元素有相同的样式，那都可以用群组选择器放在一起，不过要用逗号隔开。不管他是id选择器、class选择器、标签选择器都可以
        -->
        <div></div>
        <p></p>
        <section></section>
        <h1 id="title1"></h1>
        <h2 id="title2"></h2>
        <header class="head"></header>
    </body>
</html>

6.包含选择器

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*div div{
                width: 100px;
                height: 100px;
                background: green;
            }*/
            /*.wrap div{
                width: 100px;
                height: 100px;
                background: green;
            }*/

            .wrap #div2{
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
    </head>
    <body>
        <!--
            包含选择器           通过范围选择元素（选择到的可能是一个元素也可能是多个元素）
                语法              父级 目标元素{要添加的样式}
                                父级与目标元素都可以是用任意一种选择器选择到的元素
        -->
        <div class="wrap">
            div1
            <div id="div2">div2</div>
        </div>
    </body>
</html>

**7.通配符（*）**

通配符（*）——->获取页面所有的元素

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

            *{
                height: 50px;
                border: 1px solid #f00;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <!--
            *       通配符
            用来获取到页面中的所有元素
        -->
        <div>
            div
        </div>
        <p>p</p>
        <h1>h1</h1>
        <h2></h2>
    </body>
</html>