【CSS】选择器

最新推荐文章于 2024-07-18 17:34:14 发布

Amusheng

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量105

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_51664510/article/details/129643458

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、标签选择器

结构：标签名 { css属性名 : 属性值 ; }

p { 
 
}

作用：对所有同种标签都生效。

2、类选择器

结构：.类名 { css属性名 : 属性值 ; }

.name {

}

作用：对同一个class的生效。类名可重复，一个类选择器可以同时选中多个标签，一个标签可以有多个类名。

3、id选择器

结构：#id属性值 { css属性名 : 属性值 ; }

#idName {

}

作用：对页面中一个有对应id属性值的标签生效。一个标签只能有一个id属性值，一个id选择器只能选中一个标签。

4、通配符选择器

结构：* {css属性名 : 属性值 ; }

作用：找到页面中的所有的标签，设置样式。

开发中使用极少，只会在极特殊情况下才会使用。

一般用来清楚标签的默认间距

* {
    margin : 0;
    padding : 0;
}

5、复合选择器

后代选择器：

结构：选择器1 选择器2 {css属性名 : 属性值 ; }

后代包括：儿子、孙子、重孙子···

子代选择器：

结构：选择器1 > 选择器2 { css属性名 : 属性值 ; }

子代只包括：儿子

6、并集选择器

结构：选择器1 , 选择器2 { css属性名 : 属性值 ; }

并集选择器中的每组选择器可以是基础选择器或者复合选择器。

并集选择器通常是一行一个，提高代码可读性。

7、交集选择器

结构：选择器1.属性值2 { css属性名 : 属性值 ; } .可以省略

<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.one {
            color : red ;
        }
    </style>
</head>
<body>
    <p class="one">111</P>
    <p>222</P>
    <div class="one">1212</div>
</body>
</html>

这样就只有第一个标签会变红。

8、hover伪类选择器

结构：选择器:hover { css属性名 : 属性值 ; }

作用：选中鼠标悬停在元素上的状态，设置样式

选择器优先级

1.id选择器（#id）

2.类选择器（.classname）

3.标签选择器（div,h1,p）

4.子选择器（ul > li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）