Css中的选择器

基本选择器

标签选择器

• HTML中的标签作为标签选择器的名称
• 例如<h>...</h> <p></p>等等等

类选择器

• 可以根据元素中的class属性值选取元素

head中的style中
.a{   ：   }
body中
<p class="a">大黑翔</p>

ID选择器

head中的style中
#a{   ：   }
body中
<p id="a">大黑翔</p>

通配选择器

• 可以将页面中的所有元素都选中

*{   :   }

并集选择器

• 可以选择多个选择器对应的元素

选择器1，选择器2....{   :    }

CSS高级选择器

层次选择器

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素包含的元素
• 祖先元素：直接或者间接包含后代元素的元素
• 后代元素：直接或者间接被祖先元素包含的元素
• 兄弟元素：拥有相同的父元素

后代元素选择器

• 选定指定元素所指定的元素

祖先元素 后代元素{}

子元素选择器

• 选择指定父元素的指定元素

父元素>子元素{}

相邻兄弟选择器

• 作用可以选中一个元素后紧挨着的指定的兄弟元素

前一个+后一个{}、

通用兄弟选择器

• 作用于后面的所有的某一个元素

前一个~后面所有元素中的某一个元素{}

结构伪类选择器

• ：first-child父元素中所选择的第一个元素
• ：last-child选择最后一个元素
• ：nth-child(n)选择父元素后的第n个元素，n为odd时为奇数行，n为even时为偶数行
• ：first-of-type父元素里指定类型的第一个元素
• ：last-of-type父元素里指定类型的最后一个元素
• ：nth-of-type(n)父元素里指定类型的第n个元素

属性选择器

• 可以根据元素里的属性或者属性值指定元素

语法

• 标签[属性名]选择指定属性的元素
• 标签[属性名="属性值"]选取属性值的元素
• 标签[属性名^="属性值"]选取属性值以指定内容开头的元素
• 标签[属性名$="属性值"]选取属性值以指定内容为结尾的元素
• 标签[属性名*="属性值"]选取属性值包含的元素

选择器的优先级

行内样式>id选择器>类>标签>通配