CSS样式——选择器及其优先级

选择器的作用就是将CSS样式和对应的需要修饰的标签关联起来，同时也增强了CSS代码的复用性，提高了代码效率。

首先来介绍基本的几个选择器

一、简单选择器

1、id选择器

<div id="only1"></div>

id选择器是在标签中增加一个id属性，并且为这个属性添加一个唯一的值。每个标签只能有一个id选择器。

之后，在CSS文件中定义这个id选择器：

#only1{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:black;
}

CSS中，定义ID选择器的格式为：#+[id名称]{}

在括号中定义需要的CSS样式。

2、class选择器

<div class="demo">hahaha</div>
<div class="demo demo1">对应多class值</div>

class选择器是在标签内定义一个class属性，并且为这个属性添加一个唯一的值。每个标签可以由多个class选择器。

比如class选择器demo负责定义背景颜色，class选择器demo1负责定义字体颜色，那么将两个结合之后就可以为这个<div>标签附上背景颜色和字体颜色的CSS样式了。可以通过多个class选择器的组合，为标签定义不同的CSS样式，这样提高了代码的灵活性和复用性，提高了编码效率和减少了重复代码数量。

.demo{
	background-color: yellow;
}
.demo1{
	color: red;
	/*color是改动字体颜色*/
}

class选择器在CSS文件中的定义如上代码所示，格式为： .classname{}

 

下面举个例子展示一下class标签的灵活性。

 

<!--例子-->
<!--HTML代码-->
<div id="demo1">123</div>
<div id="demo2">234</div>
<div id="demo3">456</div>

<!--对应的CSS代码-->
#demo1{
	width:100px;
	height:100px;
	margin:8px;
	padding: 8px;

	
	color: #f40;
}

#demo2{

	width:100px;
	height:100px;
	margin:8px;
	padding: