前言:
如今你们对“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复合选择器有哪些