CSS选择器

real代码渣渣

已于 2022-07-29 15:17:37 修改

阅读量97

点赞数 1

分类专栏： HTML+CSS 文章标签： css css3 html

于 2022-06-29 17:04:34 首次发布

本文链接：https://blog.csdn.net/qq_42765662/article/details/125525599

版权

HTML+CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

- CSS选择器

CSS选择器

选择器的优先级：
!important > 内联样式（1000） > id选择器（0100） > 类和伪类选择器（0010） > 元素选择器（0001）
比较优先级时，需要将所有选择器优先级相加，总的优先级越高，越优先显示。

1、元素选择器

根据标签名选中指定的元素
语法：标签名{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        div{color: red;} /* div就是元素标签名 */
    </style>
</head>
<body>
    <div>CSDN博客网</div>
    <p>CSDN博客网</p>
    <span>CSDN博客网</span>
</body>
</html>

2、id选择器

根据元素的id属性值选定一个元素
语法：#id值{ 样式 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        #first{color: red;} /* first为id属性值 */
    </style>
</head>
<body>
    <div id="first">CSDN博客网</div>
    <div>CSDN博客网</div>
    <div>CSDN博客网</div>
    <div>CSDN博客网</div>
</body>
</html>

3、class选择器

根据元素class属性值选择一组元素
用法：.class属性值 { 样式 }

<!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>css选择器</title>
    <style>
        #first{color: red;}
        .one{color: lawngreen;} /* one为class属性值 */
    </style>
</head>
<body>
    <div id="first">CSDN博客网</div>
    <div>CSDN博客网</div>
    <div class="one">CSDN博客网</div>
    <div class="one">CSDN博客网</div>
</body>
</html>

4、复合选择器

1、交集选择器

选择同时符合多个条件的元素
语法：选择器1选择器2选择器3{ 样式 }
注意：交集选择器中如果有元素选择器，必须以元素选择器开头

<!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>CSS选择器</title>
    <style>
        p.a{color: red;}
    </style>
</head>
<body>
<h3 class="a">你好，CSS</h3>
<p class="a">你好，CSS</p>
<div>你好，CSS</div>
<span>你好，CSS</span>
</body>
</html>

2、分组选择器（并集选择器）

同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3{ 样式 }

<!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>CSS选择器</title>
    <style>
        p, span{color: red;}
    </style>
</head>
<body>
    <h3>你好，CSS</h3>
    <p>你好，CSS</p>
    <div>你好，CSS</div>
    <span>你好，CSS</span>
</body>
</html>

5、关系选择器

1、子元素选择器

选择指定父元素的指定子元素
语法：父元素 > 子元素 { 样式 }

<!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>CSS选择器</title>
    <style>
        div span{color: blue;}
    </style>
</head>
<body>
    <div>
        <p>CSDN</p>
        <p>CSDN</p>
        <p>CSDN</p>
        <span>CSDN</span>
    </div>
</body>
</html>

2、后代元素选择器

选择指定元素的指定后代元素
语法：祖先后代 { 样式 }

<!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>CSS选择器</title>
    <style>
        .father1 div{color: red;}
        .father2 span{color: blue;}
    </style>
</head>
<body>
    <div class="father1">
        <div>CSDN</div>
        <div>CSDN</div>
    </div>

    <div class="father2">
        <p>CSDN</p>
        <p>CSDN</p>
        <p>CSDN</p>
        <span>CSDN</span>
    </div>
</body>
</html>

3、兄弟选择器

选择下一个兄弟元素
语法：当前元素 + 下一个元素{ 样式 }
选择后面所有的兄弟
语法：当前元素~后面的兄弟元素{ 样式 }

<!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>CSS选择器</title>
    <style>
        p+span{
       		color: red;
       	}
       	p~span{
       		color: green;
       	}
    </style>
</head>
<body>
      <p>CSDN</p>
      <p>CSDN</p>
      <p>CSDN</p>
      <span>CSDN</span>
</body>
</html>

6、属性选择器

[属性名]：选择含有指定属性的元素
[属性名=属性值]：选择含有指定属性和属性值的元素
[属性名^=属性值]：选择含有指定属性和属性值以指定值开头的元素
[属性名$=属性值]：选择含有指定属性和属性值以指定值结尾的元素
[属性名*=属性值]：选择含有指定属性和属性值包含某值的元素

<!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>CSS选择器</title>
    <style>
        p[title]{ color: red}
        p[title='abc']{ color: red}
        p[title^='abc']{ color: red}
        p[title$='abc']{ color: red}
        p[title*='abc']{ color: red}
    </style>
</head>
<body>
    <p title="abc">鹅鹅鹅</p>
    <p title="abcde">曲项向天歌</p>
    <p title="helloabc">白毛浮绿水</p>
    <p>红掌拨清波</p>
    <p>我想吃鹅</p>
</body>
</html>

7、伪类

伪类用来描述一个元素的特殊状态
用法：一般:开头

:first-child 第一个元素
:last-child 最后一个元素
:nth-child(n) 选择第n个元素
2n 或 even 表示选择偶数位的元素
2n+1 或 odd 表示选择奇数位的元素
注意：上述三个伪类选择是对所有子元素进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
注意：上述三个是在相同子元素中进行选择
:not() 除了某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul > li:first-child {
            color: red;
        }

        ul > li:last-child {
            color: green;
        }

        ul > li:nth-child(4) {
            color: orange;
        }

        ul > li:first-of-type {
            color: tomato;
        }

        ul > li:last-of-type {
            color: cadetblue;
        }

        ul > li:nth-of-type(2) {
            color: palevioletred;
        }
    </style>
</head>
<body>
<ul>
    <span>我是span标签</span>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>
</body>
</html>