css3常见选择器

使用工具 Visual Studio Code

1.CSS3基础选择器

1.1 标签选择器 

1.2.1 标签选择器的语法

一个完整的HTML5页面是由很多不同的标签组成的，而标签选择器则决定标签应采用的CSS样式，语法如下:
标签名{

        属性1：属性值1；

        属性2：属性值2；

}
所有的HTML5标签都可以作为标签选择器

1.2 类选择器

1.2.1 类选择器的语法

类选择器使用英文"."进行标识，后面紧跟类名，语法如下:
.类名{

        属性1：属性值1；

        属性2：属性值2；

}

1.2.2 类选择器的引用方法

类名为HTML5元素的class属性，即<标签名 class="类名">标签内容；
类名的第一个字符不能使用数字，并且严格区分大小写 ；
<标签名 class = "class名">标签内容；

1.3 id选择器

1.3.1 id选择器的语法

在CSS中，ID选择器使用"#"进行标识，后面紧跟ID名，语法如下:
#ID名{

属性1：属性值1；

属性2：属性值2；

}

1.3.2 id选择器的引用方法

<标签名 ID = "ID名">标签内容；
ID选择器在HTML页面中只能使用一次；

1.4 基础选择器的优先级

三种选择器的优先级是
id选择器>类选择器>标签选择器

2. CSS3高级选择器

CSS3高级选择器包含层次选择器、结构伪类选择器和属性选择器；

2.1 层次选择器

2.1.4 后代选择器

    用来选择特定元素或元素组的后代，将对付元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。(就是表示前面那个标签中所有的后面那个标签)

2.1.4 子选择器

    子选择器与后代选择器容易混淆，因此请注意子选择器仅指它的直接后代，也可以理解为作用于子元素的第一个后代。子选择器通过>标识符进行选择(就是表示前面那个标签中有直接关系的后面那个标签)

2.2 结构伪类选择器

在最后一个标签后加一个标签可以查找该父标签内内容的第几个该标签

2.2.1 first-child选择器 

用于为父元素的第一个子元素设置样式；
选择子级第一个；

2.2.2 last-child选择器

用于为父元素的最后一个子元素设置样式；
选择子级最后一个；

2.2.3 nth-child(n)选择器

用于为父元素的第n个子元素设置样式；
选择子级第n个；

2.2.4 first-of-type选择器

用于选择父元素下相同类型子元素的第一个；
选择父标签中寻找类型寻找标签子元素的第一个；

2.2.5 last-of-type选择器

用于选择父元素下相同类型子元素的最后一个；
选择父标签中寻找类型寻找标签子元素的最后一个；

2.2.6 nth-of-type(n)选择器

用于选择父元素下相同类型子元素的第n个；
选择父标签中寻找类型寻找标签子元素的第n个；

2.3 属性选择器

attr填写属性
val自定义值
E可以是HTML5中的任意标签

2.3.1 E[attr]

选择匹配具有属性attr的E元素；

2.3.2 E[attr=val]

选择匹配具有属性attr的E元素，并且属性的值为val(val区分大小写)；
选中与输入值相等的；

2.3.3 E[attr^=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串；

2.3.4 E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串；

2.3.5 E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了"val"；