CSS学习笔记（二） --CSS选择器

CSS学习笔记（二） --CSS选择器

这章重点介绍CSS的选择器 ，利用CSS可以创建易于修改和编辑的规则。

CSS规则结构：

CSS规则=选择器+声明块，声明块由*个声明组成，每个声明是一个键值对。

选择器：

• 标签选择器：通过标签名来进行匹配：

p{
   color:white;
}

• 选择器分组：可将有相同样式的元素通过，隔开：

/*  文档中所有的p、div、h1元素都会被匹配上该样式  */
p,div,h1{ 
	color:blue;
}

• 通配选择器：通配符*可以与任何元素匹配 ：

/*  文档中所有的元素元素都会被匹配上该样式  */
*{
   color:white;
}

• 类选择器：可以用于作用于多个元素，通过设置标签的class属性：

<!-- HTML中 -->
<div class="class1">
	123456
</div>

/* CSS中 */
.class1{
   color:white;
}

另外一种用法：

<!-- HTML中 -->
<div class="class1">
	123456
</div>
<div class="class2">
	123456
</div>
<div class="class1 class2">
	123456
</div>
<p class="class1 class2">  <!--只有这里的字体变成白色-->
	456789
</p>

/* CSS中 */
p.class1.class2{ 
   /* 翻译为只有class同时包含class1和class2的p标签才会被选中 */
   color:white;
}

• ID选择器：仅使用一次，因为一个ID在HTML中只能出现一次（但是浏览器并不会检测）。

<!-- HTML中 -->
<div id="id1">
	123456
</div>

/* CSS中 */
#id1{
   color:white;
}