CSS选择器-浅谈篇

前言

有老铁说让我不要讲的太官方，最好讲的一听就懂，所以我想我就稍微改变一下咯，

正文

CSS选择器-浅谈篇,屏幕截图 2022-12-03 221727.png,html,css,第1张

CSS样式表的每个规则都有两个主要部分：选择符(selector)和声明( declaration)。

CSS控制网页内容显示格式的方式是通过许多定义的样式属性(如字号、段落控制等)实现的，并将多个样式属性定义为一组可供调用的选择符(selector)。

CSS样式规则

selector{属性：属性值[[；属性：属性值]…]}

语法说明:
selector表示希望进行格式化的元素；声明部分包括在选择符后的大括号中；用“属性：属性值”描述要应用的格式化操作。

CSS选择器

1.标记选择器

标记名｛属性1:属性值1;属性2:属性值2;属性3:属性值3;｝

2．类选择器

类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>类选择器</title>
        <style type="text/css">
        .red{color:red;}
        .green{color:green;}
        .font22{font-size:22px;}
        p{
           text-decoration:underline;
           font-family:"微软雅黑";
        }
    </style>
    </head>
    <body>
        <h2 class="red">二级标题文本</h2>
        <p class="green font22">段落一文本内容</p>
        <p class="red font22">段落二文本内容</p>
        <p>段落三文本内容</p>
    </body>
</html>

CSS选择器-浅谈篇,屏幕截图 2022-12-03 222741.png,html,css,第2张

3.id选择器

#id名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style type="text/css">
            #bold {font-weight:bold;}
            #font24 {font-size:24px;}
        </style>
    </head>
    <body>
        <p id="bold">段落1：id="bold"，设置粗体文字。</p>
        <p id="font24">段落2：id="font24"，设置字号为24px。</p>
        <p id="font24">段落3：id="font24"，设置字号为24px。</p>
        <p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
    </body>
</html>