html中的常用选择器

html中的常用选择器

我们先了解一下，什么是选择器

概念： 要使用css对HTML页面中的元素实现一对一，一对多或者多对多的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的

注意的事：文中的元素指定是html中的标签

1. 元素选择器

• 作用：通过元素选择器可以选择页面中的所有指定元素
• 语法：元素名{}

 p{<!--p指的是页面中所有p元素包含的内容-->
 color:red;
 font-size:30px;
 }

2. id选择器

• 作用：通过元素的ID属性选中唯一的的一个元素（虽然可以设置多个id同名，但 一般来说，id是唯一的标识符，不建议多个 id 同名）
• 语法：#id属性值{}

 #id名{
 	color:red;
 	font-size:30px;
 }

3. 类选择器

• 作用：通过元素的class属性选中一组元素（class属性和id属性相似，但是class属性可以重复，用于相同 class属性的元素，我们说他们是一组元素，我们可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开）
• 语法：.class属性值{}

 .class名{
 	color:red;
 	font-size:30px;
 }

4. 选择器分组(并集选择器)

• 作用：通过选择器分组可以同时选中多个选择器对应的元素
• 语法：选择器1，选择器2，选择器N{}

 .class名,#id名{
 	color:red;
 	font-size:30px;
 }

5. 复合选择器（交集选择器）

• 作用：可以选中同时满足多个选择器的元素（一般用于类选择器，id选择器不会使用）
• 语法:选择器1选择器2选择器N{}

.class1p{<!--表示class名为class1并且被p标签所包含的元素会被选中-->
 	color:red;
 	font-size:30px;
 }

注意复合选择器 和并集选择器 的区别，复合选择器 选中的是交集元素，并集选择器 选中的是并集元素

6. 通配选择器

• 作用：可以用来选中页面中的所有元素
• 语法：*{}

 *{
 	color:red;
 	font-size:30px;
 }

在介绍后面两个选择器之前，我们需要先了解元素之间的关系，大家看一下我的这篇博客：
html中元素之间的关系

7. 子元素选择器（子代选择器）

• 作用：可以选中指定父元素中的指定子元素
• 语法：父元素>子元素{}

div>p{<!--选中div元素下的p元素包含的内容，div和p必须是父子元素关系-->
 	color:red;
 	font-size:30px;
 }

8. 后代选择器

• 作用：和子代选择器相似，可以选中指定元素的指定后代元素
• 语法：祖先元素 （中间隔一个空格）后代元素{}

div p{<!--选中div元素中的所有p元素，div元素和p元素是祖先元素和后代后代的关系-->
 	color:red;
 	font-size:30px;
 }

9. 属性选择器
   作用：可以根据元素中的属性或属性值来选取指定元素
   语法：

• [属性名] 选取含有指定属性的元素
• [属性名=“属性值”]选取含 有指定属性值的元素
• [属性名^=“属性值”] 选取属性值 以指定内容开头的元素
• [属性名$=“属性值”] 选取属性值以指定内容结尾的元素
• [属性名*=“属性值”] 选取属性值以包含指定内容的元素