前端入门--CSS选择器

 2025/01/03 

CSS，即层叠样式表（Cascading Style Sheets），可以用它来为HTML元素添加样式，是用于描述网页样式和布局的，
它为网页提供了丰富的样式控制功能，包括字体、颜色、边框、背景、边距、布局等。

元素选择器

通过HTML元素名称来选择元素

p指的是作用在html文档中的p元素上

1
2
3

p{
	color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet"/>
    </head>
    <body>
        <div>
            <h2>这是一个测试二级标题</h2>
            <p>这是一个测试的段落</p>
            <a href="https://www.baidu.com" target="_blank">百度一下</a>
            <br/>第一个div结束
        </div>
    </body>
</html>

类选择器

通过HTML类名选择元素

.title{
    font-size: 20px;
}
.content{
    color: red;
    font-size: 50px;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="类style.css" rel="stylesheet"/>
    </head>
    <body>
        <div>
            <h1>测试用一级标题</h1>
            <p>测试用段落</p>
            <a href="https://www.baidu.com" target="_blank">百度</a>
            <h1 class="title">测试用一级标题(字体缩小版)</h1>
            <p class="content">测试用段落(红色放大版)</p>
        </div>
    </body>
</html>

ID选择器

#container {
    /*设置边框,solid实线*/
    border: 10px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="id_style.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <!--在div中定义id-->
            <h2>测试用二级标题</h2>
            <p>测试用段落</p>
        </div>
    </body>
</html>

后代选择器

相当于是元素选择器与id选择器的结合

#container p{
    color: red;
}
#container .content p{
    color: green;
    font-style: italic;
}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>CSS后代选择器示例</title>
        <link href="后代style.css" rel="stylesheet">
        <body>
            <div id="container">
                <!--这里是ID选择器+元素选择器的嵌套-->
                <h1>测试用一级标题</h1>
                <div class="content">
                    <p>测试段落1</p>
                    <p>测试段落2</p>
                </div>
            </div>
            <div>
                <p>另一个div中的段落</p>
            </div>
        </body>
    </head>
</html>

相邻兄弟选择器

/*选择h2后面跟着的p元素*/
h2 + p{
    color:aqua;
}

<!DOCTYPE html>
<html>
    <link href="兄弟style.css" rel="stylesheet"/>
    <body>
        <h2>标题2</h2>
        <p>段落1</p>
        <h2>标题2</h2>
        <p>段落2</p>
        <p>段落3</p>
        <!--可见段落1和2都变色了,段落3没有变色-->
    </body>
</html>

通用选择器

不常用

1
2
3

*{
    border: 1px solid red;
}

<!DOCTYPE html>
<html>
    <link href="通用style.css" rel="stylesheet"/>
    <body>
        <div>
            这是第一个div
            <h2>这是测试标题</h2>
            <p>这是测试段落1</p>
            <p>这是测试段落2</p>
        </div>
        <div>这是第二个div
            <h2>这是测试标题</h2>
            <p>这是测试段落3</p>
            <p>这是测试段落4</p>
        </div>
    </body>
</html>

属性选择器

a[href="#"]{
    color: red;
    font-size: 40px;
}
/*
选择a元素中,属性href=#的元素
进行修改
*/

<!DOCTYPE html>
<html>
    <link href="属性style.css" rel="stylesheet">
    <body>
        <div>
            <a href="#">这是一个假链接</a>
        </div>
        <div>
            <a href="#">这是另一个div下的假链接</a>
        </div>
    </body>
</html>

伪类选择器

/*hover 这是鼠标悬停在a元素时的状态,文字颜色设置为红色*/
a:hover{
    color: red;
}

<!DOCTYPE html>
<html>
    <link href="伪类style.css" rel="stylesheet"/>
    <a href="https://www.baidu.com">测试用链接</a>
</html>

伪元素选择器

p::first-line {
    font-style: italic;
}
/*选择每个p元素的第一行元素*/

<!DOCTYPE html>
<html>
    <link href="伪元素style.css" rel="stylesheet" type="text/css">
    <body>
        <p>第一行段落<br/>
        第二行段落
        </p>
    </body>
</html>