Css选择器

最新推荐文章于 2024-08-18 16:06:40 发布

时雨111

最新推荐文章于 2024-08-18 16:06:40 发布

阅读量638

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/G81948577/article/details/136138019

版权

本文详细介绍了CSS的基本选择器，包括元素选择器、属性选择器（如id、class、开始、结束和内容匹配）、ID选择器、Class选择器、包含选择器、兄弟选择器以及选择器的组合。通过实例展示了如何精确控制HTML元素的样式。

摘要由CSDN通过智能技术生成

一、Css选择器有哪些

基本选择器（8种），伪元素选择器，伪类选择器

基本选择器包括：

1、元素选择器 5、包含选择器

2、属性选择器 6、子元素选择器

3、ID选择器 7、兄弟选择器

4、class选择器 8、选择器的组合

二、基本选择器：

1、元素选择器

语法：E{

}// 注：E代指 element(元素名称)

} 注：*是元素选择器中的特例代表所有类型的元素

例如常用的*{

margin：0；

padding：0

} 一般加在代码的第一句，用于取消所有浏览器自带的内外边距

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

则常用于将元素居于浏览器中央显示

2、属性选择器

E[attr属性]{}

设置body部分代码为

    <div id="ID">id</div>
    <div class="class">class</div>
    <div id="ID">id</div>
    <div id="ID">id</div>
    <div class="class">class</div>
    <div class="class">class</div>
    <div id="ss">ss</div>
    <div id="ssa">ssa</div>
    <div id="assa">assa</div>
    <div id="assasw">assasw</div>

<1>div[id]{} 这个选择器会选择带有id属性的div

div[id] {
            font-size: 24px;
            color: red;
            margin: 6px;
        }

效果如下图所示

<2>div[id^="ss"]选择id属性值的前缀为ss的div

div[id^="ss"] {
            font-size: 24px;
            color: red;
            margin: 6px;
        }

<3>div[id$="ss"]选择id属性值的后缀为ss的div

div[id$="ss"] {
            font-size: 24px;
            color: red;
            margin: 6px;
        }

<4> div[id*="ss"]选择id属性值内容包含ss的div

div[id*="ss"] {
            font-size: 24px;
            color: red;
            margin: 6px;*

<5>div[id="ss"]选择id属性值为ss的div 这个等价于第三类id选择器中的div#ss{}

div[id="ss"] {
            font-size: 24px;
            color: red;
            margin: 6px;
        }

3、ID选择器

在上面的body中添加如下内容

 <h1 id="ID">H1H1</h1>

语法：#id值{}

ID选择器是属性选择器的严格等于下的简化

将元素选择器改为下面的内容

#ID {
            margin: 7px;
            font-size: 25px;
            color: aqua;
        }

效果如下图所示

h1#id 选择更精确注：元素选择器和id选择器结合使用时没有空格

若将选择器改为h1#id如下

h1#ID{}

则效果如下，可以看到只有h1标签并且值为ID的元素改变了样式

4、Class选择器

语法：.class名{}

 .class {
            margin: 7px;
            font-size: 25px;
            color: aqua;
        }

效果如下

5、包含选择器

语法为...... 爷爷级父级子{} 嵌套性

            body ul li a {

                          color: red;

                            }

    <ul>
        <li>
            <a href="#">一个链接</a>
            <div>
                <a href="#">1314111111111</a>
            </div>
        </li>
    </ul>

这句代码的意思是：去找<body> 下的<ul>标签下的<li>标签下的a链接，也就是“一个链接”四个字会变成红色。

但是这样其实并不准确，使用了上面的选择器后会出现这样的效果

聪明的你一定发现了，是因为<ul>标签下不仅有它的一个子元素<li>下的子元素a标签,而且它的一个孙元素<div>标签里面也有一个a标签。那有没有办法，让选择器准确指向内容为“一个链接”的a标签，这里就可以使用下面这个子元素选择器。

6、子元素选择器

语法：selector1>selector2>selector3{}

对上面的a标签使用下面的选择器

            body>ul>li>a {

                          color: red;

                            }

可以看到，这种选择器，指向了body的子元素ul的子元素li的子元素内容为一个链接的<a>标签

 body>ul>li>a{}

                        <ul>

        <li>

            <a href="">一级菜单</a>

        </li>

        <ul>

            <li>

                <a href="">二级菜单</a>

            </li>

            <li>

                <a href="">二级菜单</a>

            </li>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

        </ul>

    </ul>

    <ul>

        <li>

            <a href="一级菜单">一级菜单</a>

        </li>

        <ul>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

        </ul>

    </ul>

    <ul>

        <li>

            <a href="一级菜单">一级菜单</a>

        </li>

        <ul>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

            <li>

                <a href="二级菜单">二级菜单</a>

            </li>

        </ul>

    </ul>

body>ul>li>a {
            color: red;
            font-size: 30px;
        }
        
        body>ul>ul>li>a {
            color: black;
        }

使用上面的选择器效果如下：

7、兄弟选择器

语法：selector~selector2{}

从selector1向下查找具有共同父级元素的selector2的元素

    <style>   
     .Cpp~.php {
            color: red;
            font-size: 28px;
        }
    </style>
    <body>
    <span class="java">java</span>
    <span class="php">php</span>
    <span class="java">java</span>
    <span class="php">php</span>
    <span class="Cpp">C++</span>
    <span class="php">php</span>
    <span class="java">java</span>
    <span class="php">php</span>
    <span class="java">java</span>
    <span class="php">php</span>
    <span class="java">java</span>
    <span> <span class="php">php</span></span>
    </body>

效果如下

可以看到只有和Cpp处于同一父级下且位于其后面的类名为php元素生效了。

8、选择器的组合 selector，selector2，sele......

某几个选择器如果添加的样式相同，就可以合并来写，选择器之间用逗号隔开

                div>a{

                    color:red

                }

                .gg{

                    color:red;

                }

可以合并为 div>a,.gg{

color:red}

时雨111

关注

9
点赞
踩
25

收藏

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

E[attr属性]{}可以看到，这种选择器，指向了body的子元素ul的子元素li的子元素内容为一个链接的<a>标签。<4> div[id*="ss"]选择id属性值内容包含ss的div。<3>div[id$="ss"]选择id属性值的后缀为ss的div。<5>div[id="ss"]选择id属性值为ss的div 这个等价于。<2>div[id^="ss"]选择id属性值的前缀为ss的div。<1>div[id]{} 这个选择器会选择带有id属性的div。ID选择器是属性选择器的严格等于下的简化。
复制链接

扫一扫