CSS选择器

最新推荐文章于 2022-08-25 22:31:05 发布

生活的高手☆

最新推荐文章于 2022-08-25 22:31:05 发布

阅读量82

点赞数

分类专栏：笔记文章标签： css elementui html

本文链接：https://blog.csdn.net/qq_63034068/article/details/121762120

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、交集选择器,并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box{
            color: aquamarine;
        }
    </style>
</head>
<body>
<div>标签1
    <p>标签2</p>
    <div class="box">标签3</div>
</div>
</body>
</html>

结果是标签1

标签2

标签3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,.box{
            color: red;
        }
    </style>
</head>
<body>
<div>标签1
    <p>标签2</p>
    <div class="box">标签3</div>
</div>
</body>
</html>

结果是标签1

标签2

标签3
交集选择器是选择两个选择器共同拥有的内容。而并集选择器是选择所有指定的选择器内容。
并集选择器是可以指定多个的，它们之间使用英文逗号分隔。

2、相邻的兄弟选择器和通用的兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div+p{
          color: red;
      }
    </style>
</head>
<body>
<div>标签1
    <p>标签2</p>
</div>
<p>标签3</p>
<p>标签4</p>
</body>
</html>

只有标签3被标为红色兄弟选择器只能选择相邻的兄弟只能选后面的，如果将style里面的div+p改为div~p就是通用的兄弟选择器，它能将div后面的所有p标签的兄弟标为响应的颜色

3、伪类选择器 hover first-child before after

hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     .box{
         width: 100px;
         height: 100px;
         border:red solid ;
     }
     .box:hover{
         cursor:pointer;/*鼠标指针*/
         background-color: aqua;
     }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行结果

first-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    ul>li{
        list-style: none;/*去掉前面的小圆点*/
    }
    li:first-child{
        color: red;
    }
    li:nth-child(2){
     color: aqua;
    }
    li:nth-child(3){
        color: blue;
    }
    li:last-child{
        color: chartreuse;
    }
    </style>
</head>
<body>
<div>
    <ul>
        <li>洗碗</li>
        <li>拖地</li>
        <li>洗衣</li>
        <li>做饭</li>
    </ul>
</div>

</body>
</html>

运行结果

第一个和最后一个有单独的表示中间的可以用nth-child()表示（里面填第几个孩子）

before after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }/*去掉内外边距*/
    .box{
        width: 50px;
        height: 50px;
        border:1px #888888 solid;
        position: relative;
    }
    .box:before {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 1px solid red;
        border-left: 1px solid red;
        position: absolute;
        left: -1px;
        top: -1px;
    }
    .box:after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 1px solid red;
        border-bottom: 1px solid red;
        position: absolute;
        right: -1px;
        bottom: -1px;
    }

    </style>
</head>
<body>
<div class="box"></div>

</body>
</html>

运行结果

生活的高手☆

关注

0
点赞
踩
0

收藏

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

1、交集选择器,并集选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div.box{ color: aquamarine; } </style></head>&lt
复制链接

扫一扫

专栏目录