前端day2-优快云博客

本文链接：https://blog.youkuaiyun.com/DingXinX/article/details/128467907

本文详细介绍了CSS中各类选择器的应用，包括类别选择器、ID选择器、群组选择器、包含选择器及伪类选择器，并深入探讨了文本属性、列表属性和背景属性等关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端还在复习

类别选择器
id选择器
群组选择器和包含选择器![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b2c6e80bb4f0a3a559e94bd526c7cbd3.png#pic_center)
伪类选择器
文本属性
列表属性
背景属性

类别选择器

<!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>
        .ibm{
            background-color: aqua;
        }

        .qianfeng{
            color: blueviolet;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>1111</div>
    <div class="ibm qianfeng">2222</div>
    <div class="ibm">3333</div>
    <div class="ibm">4444</div>
    <div>5555</div>
    <div>6666</div>
</body>
</html>

id选择器

在这里插入图片描述

<!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>
        #box1{
            background-color: rgb(30, 153, 210);
        }

        #box1{
            background-color: rgb(30, 210, 144);
        }


    </style>
</head>
<body>
    <div id="box1">1111</div>
    <div id="box2">2222</div>
    <div id="box3">3333</div>
    <div>4444</div>
    <div>5555</div>
    <div>6666</div>
</body>
</html>

群组选择器和包含选择器

<!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,p,h1{
            background-color: cornflowerblue;
        }

        //后代选择器
        div p{
            background-color: darkgoldenrod;
        }
    </style>
</head>
<body>
    <div>111111111111<p>22222222222</p></div>
    <p>111111111111</p>
    <h1>111111111111</h1>

    <div>
        <p>111111111111</p>
    </div>
    <p>11111111111111</p>
</body>
</html>

伪类选择器

在这里插入图片描述

文本属性

font-size：字体大小
font-family：字体，多个字体用逗号链接
color：颜色
font-weght：加粗（bolder 更粗 bold 加粗 normal 常规）
font-style：倾斜（italic 倾斜字 oblique 倾斜的文字 normal 常规显示）
text-align：文本水平对齐
line-height：行高
text-indent：首行缩进，可以取负值，只对第一行起作用
letter-spacing：字间距
text-transform：大小写

列表属性

list-style-type：定义列表符合样式（disc 实心圆 circle 空心圆 square 实心方块 none 去掉）
list-style-image：将图片设置为列表符合样式（list-style-image：urt（））
list-style-position：设置列表项标记的放置位置（outside 列表外面 inside 列表里面）

背景属性

background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的平铺
background-position：背景图片的定位（水平垂直可以给负值）
background-attachment：背景图片的固定（scroll 滚动 fixed 固定）
可以简写为background