html5+css3(十四)CSS选择器

CSS选择器

1、基本选择器

（1）“*”选择器：通配符

1. 描述：将匹配所有的HTML标记，所有的标记都会改变的。
2. 语法：*{ color:red; }
3. 注意：“*”尽量少用，因为IE6不支持。

 

（2）标签选择器

1. 描述：将匹配指定的HTML标记。
2. 语法：h1{ color:red; }
3. 注意：CSS标签选择器，与HTML标记的名称一样，但不能加尖括号。

 

（3）class选择器(类选择器)——类选择器是使用频率最高的

1. 描述：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有。
2. 类选择器的名称，必须以“.”开头，后限HTML标记的class属性的值。如：.box{ color:red; }
3. HTML标记的class属性的值，不能以数字开头。

 

 

（4）id选择器

1. 描述：给指定id的元素添加样式。
2. 注意：网页中HTML标记的id属性的值，必须是唯一的。
3. 每一个HTML标记都有一个id的公共属性。
4. 注意：id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
5. id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。

 

2、组合选择器

（1）多元素选择器

1. 描述：给多个元素加同一个样式，多个选择器之间用逗号“,”隔开。
2. 举例：h1,p,div,body{color:red;}

 

（2）后代元素选择器(最常用)

1. 描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。
2. 举例：div  .title{ color:red;}

 

 

（3）子元素选择器

1. 描述：给某个元素的子元素添加样式。
2. 举例：div > h1.title{color:red;}