CSS语法基础--选择器

最新推荐文章于 2024-04-29 13:37:01 发布

没有不酸的柠檬

最新推荐文章于 2024-04-29 13:37:01 发布

阅读量700

点赞数 1

分类专栏： Css3语法基础文章标签： html css 定位

本文链接：https://blog.csdn.net/I_am_fine_/article/details/118757118

版权

CSS选择器

概述: CSS的选择器主要包括基本选择器，层次选择器，结构伪类选择器和属性选择器等等。选择器的主要作用是定位元素。

1 基本选择器

概述 : 基本选择器包括标签选择器，类选择器和ID选择器，三种选择器的优先级为：ID选择器>类选择器>标签选择器。

1.1 标签选择器

结构格式：

标签名{
   
	值;
}

CSS代码：

h1{
   
    color: aqua;
}
p{
   
    background: antiquewhite;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <h1>标题1</h1>
    <p>前后端分离</p>
</body>
</html>

运行结果：
在这里插入图片描述

1.2 类选择器

概述: 类选择器是先在标签内规定class属性，然后在CSS样式文件中设计属性值

结构格式：

.class名{
   
	值;
}

css代码：

.c1{
   
    background: aqua;
}
.c2{
   
    background: chartreuse;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <h1 class="c1">css样式表</h1>
    <h2 class="c2">前后端分离</h2>
</body>
</html>

运行结果：
在这里插入图片描述

1.3 ID选择器

概述: 与类选择器用法相同，但ID选择器的ID值需要全局唯一。

结构格式：

#ID名称{
   
	值;
}

css代码：

最低0.47元/天解锁文章

没有不酸的柠檬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS语法基础--选择器

CSS选择器概述: CSS的选择器主要包括基本选择器，层次选择器，结构伪类选择器和属性选择器等等。选择器的主要作用是定位元素。1 基本选择器概述 : 基本选择器包括标签选择器，类选择器和ID选择器，三种选择器的优先级为：ID选择器>类选择器>标签选择器。1.1 标签选择器结构格式：标签名{ 值;}CSS代码：h1{ color: aqua;}p{ background: antiquewhite;}HTML代码：<!DOCTYPE
复制链接

扫一扫

专栏目录