html&css系列学习——（五）css选择器

浅浅云烟

已于 2022-09-01 09:17:39 修改

阅读量252

点赞数

文章标签： css

于 2022-08-31 19:59:08 首次发布

本文链接：https://blog.csdn.net/qianqianyunyan/article/details/126610388

版权

选择器:

标签选择器

格式：标签名称{属性:值;}
例如：div{color:skyblue;}

id标签选择器

格式：#id名称{属性:值;}
例如：#id{color:pink;}

class选择器

格式：.类名{属性:值;}
例如：.class{color:orange;}

伪类选择器

格式：选择元素:状态{属性:值;}
状态：
:first-child ------------------选中同级别中的第一个标签
:last-child ------------------选中同级别中的最后一个标签
:nth-child() ----------------该状态的括号内可填：
------------------------------ n(选中同级别中的第n个标签);
------------------------------ odd(选中同级别中的所有奇数);
------------------------------ even(选中同级别中的所有偶数);
------------------------------ an+b(a和b是用户自定义的, 而n是一个计数器, 从0开始递增)
:nth-last-child(n) ---------选中同级别中的倒数第n个标签
:only-child -----------------选中父元素仅有的一个子元素E。仅有一个子元素时生效
:first-of-type---------------选中同级别中同类型的第一个标签
:last-of-typ ---------------选中同级别中同类型的最后一个标签
:nth-of-type(n) -----------选中同级别中同类型的第n个标签
:nth-last-of-type(n) -----选中同级别中同类型的倒数第n个标签
:only-of-type -------------选中父元素的特定类型的唯一子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:first-child{color:pink;}
        div:last-child{color:aqua;}
        div:nth-child(2){color: gold;}
    </style>
</head>
<body>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</body>
</html>

动态伪类

格式：选择元素:状态{属性:值;}
状态：
:link 超链接未被访问过
:visited 超链接被访问过
:active 超链接被点击瞬间
:hover 鼠标滑入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a:link{color:aqua;}
        #a:visited{color:pink;}
        #a:active{color:red;}
        div:hover{color:yellow}
    </style>
</head>
<body>
    <a href="#" id="a">xxx</a>
    <div>xxxxxxxxxxxx</div>
</body>
</html>

否定伪类

格式：选择元素:not(剔除元素){属性:值;}
例如：除id属性为a的div,其他div的color都变为粉色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:not(#a){color:pink;}
    </style>
</head>
<body>
    <div>xxx</div>
    <div id="a">xxx</div>
    <div>xxx</div>
</body>
</html>

交集选择器

交集选择器格式：标签名称1标签名称2{属性:值;}
例如：仅选择满足p标签且满足id属性为a的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p#a{color:pink;}
    </style>
</head>
<body>
    <div id="a">one</div>
    <p id="a">two</p>
    <p id="b">three</p>
</body>
</html>

并集选择器

并集选择器格式：标签名称1,标签名称2{属性:值;}
例如：同时选择class属性为a的和id属性为b的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a,#b{color:pink;}
    </style>
</head>
<body>
    <div id="a" class="a">one</div>
    <p id="a">two</p>
    <p id="b">three</p>
</body>
</html>

后代选择器

格式：标签名称1 标签名称2{属性:值;}
例如：选择div中后代为span标签的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div span{color:pink;}
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <p>2</p>
        <span>3</span>
    </div>
</body>
</html>

子代选择器

格式：标签名称1>标签名称2{属性:值;}
例如：div中选择子代class属性为three的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>.three{color:pink;}
    </style>
</head>
<body>
    <div>
        <span class="one">1</span>
        <p class="two">2</p>
        <span class="three">3</span>
    </div>
</body>
</html>

兄弟选择器

相邻兄弟选择器格式：标签名称1+标签名称2{属性:值;}
例如：选择id属性为id1的相邻兄弟id2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1+#id2{color:pink;}
    </style>
</head>
<body>
    <div>
        <div id="id1">1</div>
        <div id="id2">2</div>
        <div id="id3">3</div>
    </div>
    <div id="id2">22</div>
</body>
</html>

通用兄弟选择器格式：标签名称1~标签名称2{属性:值;}
例如：.选择id属性为id1的兄弟id3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1~#id3{color:pink;}
    </style>
</head>
<body>
    <div>
        <div id="id1">1</div>
        <div id="id2">2</div>
        <div id="id3">3</div>
    </div>
    <div id="id3">33</div>
</body>
</html>