CSS3:CSS基础选择器

最新推荐文章于 2022-12-25 19:44:59 发布

Julian Q

最新推荐文章于 2022-12-25 19:44:59 发布

阅读量201

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/qjyws/article/details/119350243

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

前言
一、CSS选择器
二、基础选择器
总结

前言

复习CSS语法的基础选择器部分，为小程序开发做好准备

一、CSS选择器

在CSS中，存在着能够对页面标签进行选择，从而进行针对被选中标签进行样式修改的选择器。

选择器分为基础选择器和复合选择器两个大类，此篇复习的是基础选择器。

以下根据对基础选择器的分类介绍：标签选择器、类选择器、id选择器、通配符选择器。

二、基础选择器

1.标签选择器

标签选择器，顾名思义，就是通过选中某个标签群体进行修改，如常见的div、span、li等常见标签；

语法格式为

标签名 {
	标签样式
}

代码如下（示例）：

<!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>
        /* 标签选择器 */ 
        p {
            color: aqua;
        }    
        div {
            color: yellow;
        }
    </style>
</head>

<body>
    <p>你好</p>
    <p>我也好</p>
    <p>大家都好</p>
    <div>昨天</div>
    <div>今天</div>
    <div>明天</div>
</body>

</html>

显示结果：
在这里插入图片描述

2.类选择器

当想要差异化选择不同的标签时，单独选一个或者某几个标签，可以选用
类选择器；

类选择器在HTML中以class属性进行表示，在CSS选择器中，类选择器以"."号进行显示.

类选择器分为两个大类：单类名选择器和多类名选择器

单类名选择器语法格式为

.类名 {
	相关样式
}

<tag class='类名'></tag>

多类名选择器语法格式为

.类名A .类名B {
	相关样式
}

<tag class='类名A 类名B'></tag>

多类名使用的注意事项：
1.在标签class属性中写多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式

多类名开发使用场景：
1.可以把一些标签元素相同的样式（共同部分）放到一个类里面
2.这个标签都可以调用这个共同的类，再调用自己独有的类
3.节省CSS代码，也可以统一进行修改

代码如下（示例）：

<!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>
        .box{
            width: 900px;
            height: 900px;
            background-color: black;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">我是普通盒子啊</div>    
    <div class="box red">我是多类名选中的红盒子啊</div>
    <div class="box green">我是多类名选中绿盒子啊</div>
</body>
</html>

效果如下：
在这里插入图片描述

3.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素可以以id属性来设置id选择器，CSS中id选择器以"#"来定义

id选择器语法格式为

#id名 {
	相关样式
}

<tag id='id名'></tag>

代码如下（示例）：

<!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>
        #redBox {
            background-color: red;
        }
        
        #greenBox {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="redBox">我是红盒子啊</div>
    <div id="greenBox">我是绿盒子啊</div>
</body>

</html>