CSS 选择器有哪些?哪些属性可以继承

128 阅读2分钟

CSS 选择器有哪些?哪些属性可以继承

选择器

基础选择器

标签选择器:通过标签名找到页面中所有这一类标签,设置样式

类选择器:找到页面中所有带有该类名的标签,设置样式

id选择器:找到页面中所有带有该id的标签,设置样式

通配符选择器:找到页面中所有标签,设置样式

复合型选择器

复合选择器:

1:后代选择器:先通过选择器1找到一堆标签,在再一堆标签的后代中(子代,孙代...)找到满足条件的选择器2的标签,设置样式

2:子代选择器:先通过选择器1找到一堆标签,在再一堆标签的子代中找到满足条件选择器2的标签,设置样式

并集选择器:找到选择器1和选择器2对应的标签,设置样式

交急选择器:找到页面中既满足选择器1,又满足选择器2的标签,设置样式

hover伪类选择器:加在选择器后面使用,设置鼠标悬停的状态

结构伪类选择器

p:first-child{}:匹配父元素中第一个子元素

p:last-child{}:匹配父元素中最后一个子元素

p:nth-child(n){}:匹配父元素中第n个子元素

p;nth-child( 2n 或者 even ){}:匹配父元素中偶数子元素

p:nth-child( 2n-1 或者 odd ){}:匹配父元素中奇数子元素

p:nth-child(-n+5){}找到父元素中前五个子元素

p:nth-child(-n+5){}:从父元素中第五个开始往后找

p:nth-last-child(n){}:找到父元素中倒数第n个子元素

p:nth-of-type(n){}:找到父元素中同类型的子元素中的第n个

属性继承

color:可以继承颜色,a标签不能继承颜色

font-style:可以继承字体样式

font-weight:可以继承字体粗细,h标签不能继承字体粗细

font-size:可以继承字体大小

font-family:可以继承字体系列

text-indent:可以继承首行缩进两em

text-align:可以继承文本水平位置

line-height:可以继承行高