基础选择器（自学笔记）

最新推荐文章于 2021-10-23 09:39:51 发布

Mr.Zmh

最新推荐文章于 2021-10-23 09:39:51 发布

阅读量381

点赞数

分类专栏：自学笔记文章标签： css

本文链接：https://blog.csdn.net/zmhxuexi/article/details/106250041

版权

33 篇文章 0 订阅

订阅专栏

css样式规则

规则格式如下：

选择器（h1）{属性（color）：属性值（red）；属性（font-size）：属性值（25px）；}

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定css样式，其语法格式如下：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或
元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签选择器的优缺点：
优点是能为页面中的同类型标签指定统一的样式，同样这也是它的缺点，不能进行差异化样式

类选择器使用"."(英文点号）进行标识，后面紧跟类名，其语法格式如下：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签调用的时候用class=“类名” 调用即可

如：

<head>
	<style>
		.red {
		color="red"
		}
	</style>
</head>
<!--此处调用-->
<p class="red">
文本内容
</p>

可以给标签指定多个类名，从而达到更多选择目的

样式显示效果跟HTML元素中调用的类名先后顺序无关，受css样式书写的上下关系有关；
各个类名间用空格隔开；
css样式的书写顺序很重要；

id选择器使用"#"号进行标识，后面紧跟id名，其语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
相对应的调用就是id=“之前取的id名”

<head>
	<style>
		#yellow {
		color="red"
		}
	</style>
</head>
<!--此处调用-->
<p id="yellow">
文本内容
</p>

id和类选择器他们的区别就在于：id选择器只能调用一次，而类选择器则能多次调用；id选择器的优先级也比较高

语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

它是所有选择器中作用范围最广的，能匹配页面中所有的元素

关注

专栏目录