css3内部格式-CSS3 基本选择器入门

bendan520 2023年9月5日 css3 0

基本选择器

要将css样式应用到指定的html元素，首先找到目标元素。 样式规则中执行此任务的部分称为选择器。

以下是使用多项选择题指定 html 元素的格式规则

选择器{属性1:属性值1;属性2:属性值2;}

标签选择器

基本句子格式是：

标记名{属性1:属性值1;属性2:属性值2;}

使用标签选择器对该类型的所有标签生效

例如：

格式内部存储空间_css3内部格式_格式内部文件工具

<!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></title>
    <style type="text/css">
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>如何</p>
    <p>学习选择器</p>
</body>
</html>

功效图：

正如您所看到的，选择器将 p 标签的字体颜色更改为蓝色。

id 选择器和类选择器

id选择器的基本句子格式：

#id名{属性1:属性值1;属性2:属性值2;}

类选择器的基本句子格式是：

格式内部文件工具_css3内部格式_格式内部存储空间

#类名{属性1:属性值1;属性2:属性值2;}

类选择器为该类的所有标签设置样式，id 选择器为该 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></title>
    <style type="text/css">
        .A{
            font-size: 24px;
            color:red
        }
        #B{
            color: green;
        }
    </style>
</head>
<body>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p id="B">学习真难</p>
</body>
</html>

展示

转义选择器

基本句子格式

*{属性1:属性值1;属性2:属性值2;}

该选择器设置所有标签的属性

交叉点选择器

选择器由两个选择器组成，第一个是标记选择器css3内部格式，第二个是类选择器或id选择器（选择器之间没有空格），用于匹配两个选择器标记。

基本句子格式

标记名#id名{属性1:属性值1;属性2:属性值2;}

或者

标记名.类名{属性1:属性值1;属性2:属性值2;}

格式内部存储空间_css3内部格式_格式内部文件工具

例如：

<!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></title>
    <style type="text/css">
        p.A{
            font-size: 24px;
            color:red
        }
    </style>
</head>
<body>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p>学习真难</p>
</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></title>
    <style type="text/css">
        h4,p.A{
            font-size: 24px;
            color:red
        }
    </style>
</head>
<body>
    <h4>学习笔记</h4>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p>学习真难</p>
</body>
</html>

功效：

可以看到选择器为h4标签和p标签都配置了A类的样式

后代选择器

后代选择器用于选择元素或元素组的后代css3内部格式，每个标签之间用空格分隔，后写的标签是先写的标签的后代

基本句子格式

父亲 后代{属性1:属性值1;属性2:属性值2;}


<p>不经巨大的<strong>困难</strong>，
不会有伟大的<strong>事业</strong>。
</p>

您可以像这样设置强标签

p strong{
            color: red;
        }