CSS选择器有哪些

最新推荐文章于 2022-08-21 13:05:19 发布

weixin_40546229

最新推荐文章于 2022-08-21 13:05:19 发布

阅读量241

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_40546229/article/details/105081588

版权

CSS选择器的目的：选择标签

CSS的选择器有哪些？
1.标签选择器
p{color:red;} 把所有的p颜色改为红色。特点：选择部分标签
2.类选择器
.demo{color:red;} 把所有class名为demo的元素改为红色。特点：选择一个或多个标签，可以重复使用很多次
3.id选择器
#demo{color:red;} 把id为demo的元素变为红色。特点：使用方法和类选择器相同，只能用一次，唯一的
4.通配符选择器
“*” 选择所有的，特殊场合使用

复合选择器都有：
1.后代选择器
.nav li 选择所有的子孙后代
2.子代选择器
.nav>li 选择亲儿子，第一级别的儿子
3.并集选择器
.nav,.footer 集体声明，逗号隔开
4.交集选择器
p.nav 这个是p标签而且他的类名一定是nav
5.链接伪类选择器
a:link a:visited a:hover a:active

CSS3中：
1.属性选择器
input[class=“icon”]
input[class^=“icon”]
input[class$=“icon”]
input[class*=“icon”]
2.结构伪类选择器

ul li:first-child {}
ul li:last-child {}
ul li:nth-child(n) {}
n可以为数字，ul li:nth-child(5) {}
也可以为even(偶数)，odd（奇数），ul li:nth-child(even) {}
或为公式，其中n从0开始

公式	取值
2n	偶数
2n+1	奇数
5n	5,10,15
n+5	从第5个开始，包括5
-n+5	前5个，包括第5个

div span:first-of-type{}
div span:nth-of-type(2){}

<!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>
        div span:nth-of-type(2) {
            background-color: purple;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>
</body>

</html>