CSS选择器

最新推荐文章于 2023-10-17 08:00:00 发布

blag_

最新推荐文章于 2023-10-17 08:00:00 发布

阅读量463

点赞数

分类专栏： HTML5&CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_64067728/article/details/124799498

版权

HTML5&CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的各种选择器，包括基础选择器（标签选择器、ID选择器、类选择器、多类选择器、通配符），链接伪类选择器，结构伪类选择器，以及复合选择器（交集选择器、兄弟选择器、并集选择器、后代选择器、子元素选择器）。内容涵盖了选择器的用法、特性和实例，帮助读者深入理解CSS选择器的使用技巧。

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

1.基础选择器

1.1标签选择器

如：

div{
            background-color: red;
        }

就是将所有div标签选中，将其背景颜色改为红色。

1.2 ID选择器

首先，要使用id选择器必须给标签添加一个id属性，然后才能通过在style标签中通过#表示对应的标签的id属性

如：body中写一个div标签：

<div id="box">一个盒子</div>

style中用id选择器选中它就用：

#box {

            widows: 300px;

            height:200px;

            background-color: red;

        }

但是，需要注意是：

id选择器的id不能重复使用，如上面的div盒子使用了,id=box，所以，之后的标签就不能再使用，box这个id。

也就是id选择器具有唯一性

只能设置一个值其他人不能再使用同样的id

id的值同时只能有一个，不能id=box1 box2

1.3 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Document</title> -->
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: rgb(104, 16, 112);
        }
        .div2{
            
            width: 200px;
            height: 200px;
            background-color: rgb(93, 140, 172);
            line-height: 50%;
        }
    </style>

</head>
<body>
    <!-- class属性表示类 -->
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

图中的选择器就是类选择器

1.4 多类选择器

在1.2中讲到 id选择器的id值同时只能有一个，而不能有多个，但是类选择器不同与id选择器，它的class值可以有多个，代表着同时被多个选择器选中。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Document</title> -->
    <style>
        .div1{
            width: 200px;
            height: 200px;

        }
        .box{
            background-color: yellowgreen;

        }
        .test{
            color :white;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="div box test">测试div</div>
</body>
</html>

上述代码中，div标签就同时被三个选择器选中。

1.5 通配符

通配符 * : 能匹配页面上的所有元素

使用：在style标签中 * {}

1.6 链接伪类选择器

首先，得知道链接伪类选择器是拿来操作说明标签的，

链接伪类选择器就是拿来操作链接标签，a标签的

链接伪类标签有四个

(一).未访问的链接状态

/* 未访问的链接状态 */
        a:link{
            color: greenyellow;
            background-color: rgb(27, 9, 9);
        }

(二).访问过后的链接状态

 /* 访问过后的链接状态 */
        a:visited{
            color: gray;
            background-color: rgb(216, 56, 56);
        }
        /* 正常来说visited是只能修改字体的颜色的 但是如果link标签设置了背景颜色
        那么visited也能多一个设置背景颜色 */

注意：在本地的html中，有时候给一个a：visied{color：red} 在打开网页的时候，没有点击a标签，也会显示红色，是因为这里的是否访问过是本地电脑是否访问，如果曾经电脑访问过，那么就会显示红色，并不是本次打开浏览器是否点击过这个标签。

(三)鼠标滑上去时的显示效果

a:hover {
    color:red;
}

(四)鼠标按下未松开的链接状态

a:active{
            color: purple;
        }

对于链接伪类选择器，的link=>visted=>hover=>active顺序不能颠倒

1.7 结构伪类选择器

/* 选择所有元素的最后一个子元素 如果这个子元素是li就匹配成功 */
         li:last-child{
            color: blue;
        }

/* 选择所有元素第一个子元素,如果这个子元素是div就匹配成功 */
         div:first-child{
            color: red;
        }

/* 选中所有元素的顺数第二子元素 如果这个子元素是span就匹配成功 */
         span:nth-child(2){
            color:purple
        }

/* 选中所有元素的顺数的第偶数个子元素 如果这个子元素是span就匹配成功 */

         span:nth-child(even){
        } 

或者
         span:nth-child(2n){
            color:red
        }

/* 选中所有元素的顺数的第奇数个子元素 如果这个子元素是span就匹配成功 */
         span:nth-child(odd){

        } 
或者
        span:nth-child(2n-1){
            color: red;
        }

2.复合选择器

2.1 交集选择器

交集选择器:既....又...既

如：要求元素名(标签名)是div 又要求元素的class属性值包含base

两个标签挨在一起中间不能有空格

div.base{
            background-color: red;
        }

2.2 兄弟选择器

选择当前div其后的所有与当前div同层级的p元素（标签）

 div~p{
            color: blueviolet;
        }

选择div标签之后紧挨着div的p标签这个p标签和div同层级是兄弟关系

div+p{
            background-color: #000;
        }

2.3 并集选择器

并集选择器（群组选择器）

很多个选择器（任意的选择器）组合而成，这些选择器之间通过逗号链接在一起{}之间的样式就会作用到对应的选择器上

如：同时选中div和span标签：

div,span{
            background-color: red;
        }

2.4 后代选择器

后代选择器，很容易和交集选择器搞混淆，交集选择器是将元素名(标签名）紧挨在一起表示同时求交集而后代选择器则是在父元素民(标签名)的后面隔一个空格再写子元素名(标签名)。如：

选中body下 .father的.son标签

body .father1 .son2{
            width: 300px;
            height: 200px;
            background-color: red;
        }

<div class="father1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

2.5 子元素选择器

子元素选择器:只能通过父级选中子元素亲儿子父元素写在前面子元素写在后面中间用>链接

如:

 .div1>.div2{
            color: hotpink;
        }

<body>
    <div class="div1">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    <div class="div2"></div>
</body>

只选中第一个div2标签

blag_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录