CSS基本选择器、复杂选择器、伪元素选择器、属性选择器及新增属性选择器（2）

最新推荐文章于 2022-07-07 11:55:43 发布

VIP文章 sunnyaha12

最新推荐文章于 2022-07-07 11:55:43 发布

阅读量233

点赞数

分类专栏： # CSS 文章标签： html5

本文链接：https://blog.csdn.net/sunnyaha12/article/details/107447897

版权

一、基本选择器

标签选择器:用于指定元素名称的所有元素
类选择器:选取带有指定类(class)的元素
ID选择器:为带有指定id的元素设置样式
通配符:选取所有元素,也能选取另一个元素中的所有元素:

<p class="yellow big">两个类名放一起</p>

二、复杂选择器

群组选择器(并集选择器) :用于同时选取多个元素用逗号隔开

.box,p,h2,#great{
    color:pink;
 }

交集选择器:用于选中二者各自元素范围的交集直接写一起不加任何空格逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .pink{
            color: pink;
        }
        p.pink{
            font-size: 70px;
        }
    </style>
</head>
<body>
    <div class="pink">1</div>
    <div>2</div>
    <p>3</p>
    <p class="pink">4</p>
</body>
</html>

后代选择器:用于选取元素内部的元素一定得用空格隔开，表示他们是父子关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div ul{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div ul li{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        <p>3</p>
        <p>4</p>
    </div>
    <ul>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

子代选择器:用于选取带有特定父元素的元素。 .box>p{......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta

最低0.47元/天解锁文章

sunnyaha12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本选择器、复杂选择器、伪元素选择器、属性选择器及新增属性选择器（2）

一、基本选择器标签选择器:用于指定元素名称的所有元素类选择器:选取带有指定类(class)的元素ID选择器:为带有指定id的元素设置样式通配符:选取所有元素,也能选取另一个元素中的所有元素:<p class="yellow big">两个类名放一起</p>二、复杂选择器群组选择器(并集选择器):用于同时选取多个元素交集选择器:用于选中二者各自元素范围的交集后代选择器:用于选取元素内部的元素子代选择器:用于选取带有特定父元素的元素。相邻兄弟选择器:选择紧.
复制链接

扫一扫