12.3css选择器

原创已于 2024-01-21 22:28:12 修改 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2021-12-09 13:29:07 首次发布

网络安全专栏收录该内容

31 篇文章

订阅专栏

本文详细讲解了CSS选择器中的交集选择器、并集选择器，以及相邻兄弟选择器、通用兄弟选择器和伪类选择器hover、first和before/after的用法，包括实际示例和应用场景。

一，交集选择器与并集选择器

交集选择器就是在两个标签相交的部分，也就是交集进行修改格式。
对于交集选择器，可以与id和class共同使用。
格式：
标签1标签2
{
属性;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        div.box{
            color:red;
        }
    </style>
</head>
<body>
<div>没有样式的div</div>
<p>
    <div class="box">在p标签中的div</div>
</p>
<div class="box">带有样式的div</div>
<p class="box">这是p标签中的内容</p>
</body>
</html>

与交集选择器不同，并集选择器是对两个标签同时进行修改样式。
并集选择器同样可以与id和class同时使用。
格式：
标签1,标签2
{
属性；
}

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        div,p.box{
            color:red;
        }
    </style>
</head>
<body>
<!--
交集选择器是选择两个选择器共同拥有的内容，并集选择器选择所有指定的选择器内容
并集选择器用英文逗号隔开
-->
<div>没有样式的div</div>
<p>
<div class="box">在p标签中的div</div>
</p>
<div class="box">带有样式的div</div>
<p class="box">这是p标签中的内容</p>
</body>
</html>

二、相邻兄弟选择器与通用的兄弟选择器
相邻兄弟选择器通过+相连，只能选中紧跟其后的那个标签，不能选择隔开的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        div+p{
            color:red;
        }
    </style>
</head>
<body>
<!--选择div相邻的p标签，只会选择他之后且紧挨着的-->
<p>《凤求凰》</p>
<div>
<p>有一美人兮，见之不忘</p>
<p>一日不见兮，思之如狂</p>
<p>凤兮凤兮归故乡</p>
<p>遨游四海求其凰</p>
</div>
<p>司马相如</p>
<p>唐朝</p>
</body>
</html>

通用的兄弟选择器之间用~连接，其选中的是所有由选择器1指定的兄弟标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用的兄弟选择器</title>
    <style>
        div~p{
            color:red;
        }
    </style>
</head>
<body>
<!--选择div所有的兄弟标签，会选择后面所有的标签-->
<p>《凤求凰》</p>
<div>
    <p>有一美人兮，见之不忘</p>
    <p>一日不见兮，思之如狂</p>
    <p>凤兮凤兮归故乡</p>
    <p>遨游四海求其凰</p>
</div>
<p>司马相如</p>
<p>唐朝</p>

</body>
</html>

三、伪类选择器之hover/first/beforeafter
hover 一般用于链接中，当把鼠标悬浮在带有该选择器的元素或者链接上时触发特定效果
我们可以通过设置 :hover
达到当鼠标移动到第一个链接上的时候第二个链接会变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之hover</title>
    <style>
        .box{
            width:100px;
            height:100px;
            border:1px solid #000000;
        }
        .box:hover{
            cursor:pointer;
            background-color: red;
        }
    </style>
</head>
<body>
<!--鼠标变为小手，背景为红色，hover为自动触发效果，需要搭配其他选择器一起使用-->
<div class="box"></div>
</body>
</html>

first向下逐一降级，进行等级排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之first</title>
    <style>
        ul>li{
            list-style:none;}/*去掉li前面的小黑点*/
        li:first-child{
            color:red;
        }
        li:last-child{
            color:blue;/*选择第一个与最后一个*/
        }
        li:first-child+li{
            color:green;
        }
        li:nth-child(3){
            color:gold;/*可以指定子节点*/
        }

before 向选定的元素前插入内容
after 向选定的元素后插入内容
一般使用是，类或者id::after , 类或者id::before
after是在类的后面处理逻辑
before 是在先的前面处理逻辑
它们都有一个共同的元素content 可以在里面定义要添加的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之beforeandafter</title>
    <style>
        .box{
            width:500px;
            height:500px;
            border:1px solid #000000;
            position:relative;/*相对定位*/

        }
        .box:before{
            content:"";
            width:500px;
            height:500px;
            border-top:1px solid red;/*上边线*/
            border-left:1px solid red;/*左边线*/
            position:absolute;/*绝对定位*/
            left:-1px;
            top:-1px;

        }
        .box:after{
            content:"";
            width:500px;
            height:500px;
            border-right:1px solid red;/*右边线*/
            border-bottom:1px solid red;/*下边线*/
            position:absolute;/*绝对定位*/
            right :-1px;
            bottom:-1px;
        }
    </style>

四、通配符选择器（定位）
配符选择器用于同时选择或选择各种元素。该选择器将帮助选择相似类型的类名称，名称或属性，并使它们CSS属性可用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
       /* #box{
            width:100%;
            height:20px;
            background-color: gold;
        }*/
        .top{
            width:100%;
            height:50px;
            background-color: red;
            position:relative ;
            top:10px;
           /*display:none;表示隐藏*/
        }
        .center{
            width:400px;
            height:100px;
            background-color: black;
            position: absolute;
            left:25%
            top:25%
            /*transform:translate(-50%,-50%);其作用用于移动位置*/
        }
        .bottom{
            width:100%
            height:50px;
            background-color: green;
            position: fixed;
            left:40%;
            bottom:40%;
        }
        body{
            height:2000px;
        }
        /*通配符选择器，会匹配页面中所有的元素*/
    </style>