CSS样式之常用选择器

 

CSS样式之常用选择器

一、标签选择器

二、类选择器

三、id选择器

四、后代选择器

五、分组选择器

六、通配符选择器

七、选择器优先级

---

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。要使用CSS 对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。下面介绍几种常用的选择器。

一、标签选择器

• 标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名{
	声明1;
	声明2;
	...
	声明n;
}

• 示例如下

<p>文字大小36像素并且加粗</p>
<p>文字大小36像素并且加粗</p>
<style>
	p{//浏览器会为HTML文档内所有p标签元素添加“font-size: 36px;font-weight: bold;”CSS样式。
		font-size: 36px;
		font-weight: bold;
	}
</style>

• 输出结果

二、类选择器

• 类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

. 类选择器名 {
	declaration1;
	declaration2;
    …
}

• 示例如下：

<p class="a">添加边框且居中显示</p>
<p class="a">添加边框且居中显示</p>
<style>
	.a{
		text-align: center;
		border: 1px solid red;
	}
</style>

• 输出结果

• 注意事项

 ①class标签属性的属性值不能以数字开头；

 ②class标签属性的属性值可以有多个，每个值之间用空格间隔。

三、id选择器

• id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

# id选择器名 {
	declaration1;
	declaration2;
    	…
}

• 示例如下：

<p id="zzu">郑州大学</p>
<style>
	#zzu{
		text-align: center;
	 	font-family: "微软雅黑";
	 	font-size: 40px;
	 	border: 1px solid red;
	}
</style>

• 输出结果

• 注意事项

  ①id标签属性的属性值不能以数字开头；
  ②id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

四、后代选择器

• 后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
	declaration1;
	declaration2;
    	…
}

• 示例如下：

<ol>
	<li>第一项</li>
	<li class="zzu">第二项</li>
</ol>
<ul>
	<li>第一项</li>
	<li class="zzu">第二项</li>
</ul>
<style>
	ol .zzu{//只为ol标签元素内class="zzu"的子元素添加CSS样式
		color: red;
	}
</style>

• 输出结果

五、分组选择器

• 如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：

选择器1,选择器2,选择器3…{
	declaration1;
	declaration2;
    …
}

• 示例如下：

<span class="a">郑州大学</span>
<i id="zzu">郑州大学</i>
<style>
	.a,#zzu{
		color: red;
	}
</style>

• 输出结果

六、通配符选择器

• 通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{
	declaration1;
	declaration2;
    	…
}

• 示例如下：

<p style="border: 1px solid red;">海上生明月，天涯共此时 </p>
<style>
	*{  //取消标签默认margin和padding值
		margin: 0px;
		padding:0px;
	}
</style>

• 输出结果

七、选择器优先级

• id选择器优先级最高，标签选择器优先级最低，即：id选择器 > 类选择器 > 标签选择器。示例如下：

<span>span</span>
<span class="span_class">span</span>
<span class="span_class" id=span_id>span</span>
<style>
	span{
		font-size: 36px;
	}
	.span_class{
		font-size: 24px;
	}
	#span_id{
		font-size: 12px;
	}
</style>

• 输出结果