龙空技术网

「测试开发全栈--CSS」(2) css的基础选择器

蛋蛋杂谈 172

前言:

如今你们对“css名称选择器”都比较注意,我们都需要知道一些“css名称选择器”的相关内容。那么小编在网络上搜集了一些有关“css名称选择器””的相关知识,希望咱们能喜欢,小伙伴们一起来了解一下吧!

昨天先简单的说了css的样式,今天继续说下css的基础选择器。

选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用。简单来说,就是选择标签用的。对于样式更改,选择器根据所给的标签,就是所谓的选对人;然后设置这些标签的样式,就是所谓的做对事。

选择器分为基础选择器复合选择器两个大类,先讲解下基础选择器。基础选择器是由单个选择器组成的。基础选择器又包括:标签选择器类选择器、id选择器通配符选择器

先讲下标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的css样式。

语法:

标签名 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

...

}

来看下效果:

可以看到男生的颜色都变为红色了,对应的代码为:

<!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: red;

}

</style>

</head>

<body>

<p>男生</p>

<p>男生</p>

<p>男生</p>

<div>女生</div>

<div>女生</div>

<div>女生</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>

p {

color: red;

}

div {

color: pink;

}

</style>

</head>

<body>

<p>男生</p>

<p>男生</p>

<p>男生</p>

<div>女生</div>

<div>女生</div>

<div>女生</div>

</body>

</html>

再强调下标签选择器的作用: 把某一类标签全部选择出来,比如所有的<div>标签和<span>标签。

优点: 能快速为页面中同类型的标签统一设置样式

缺点: 不能设计差异化样式,只能选择全部的当前标签。

今天就先讲到这里,明天见

欢迎大家添加我的微信公众号 蛋蛋杂谈

国庆快乐~

标签: #css名称选择器 #css复合选择器有哪些