CSS样式继承和选择器的优先级

130 阅读2分钟

哪些样式可以继承

文本

/*
  当符合css默认继承的情况下(子元素必须是块级元素且无定位或浮动),是不需要写width属性,就
  可以默认继承,否则就要特殊声明width属性。
*/
width:继承父元素宽度
line-height:行高
color:文本颜色
direction:规定文本书写的方向
text-indent:文本缩进
text-align:文本水平对齐
word-spacing:增加或减少单词间的空白(即字间隔)  
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写

字体

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

cSS选择器优先级顺序

css样式是由两部分组成。
1.[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
2.“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

一、标签选择器

body,div,p,ul,li...

二、类选择器

class="demo" class="demo_1"

三、ID选择器

id="name",id="name_t"

四、全局选择器

*

五、组合选择器

.demo .demo_1 /*两选择器用空格键分开*/

六、后代选择器

#head .nav ul li /* 从父集到子孙集的选择器 */

七、群组选择器

div,span,img {color:blue} /*即具有相同样式的标签分组显示*/

八、继承选择器

div p /*两选择器用空格键分开*/

九、伪类选择器

link、visited、active、hover /* 链接样式,a元素的伪类,4种不同的状态*/

十、字符串匹配的属性选择符

^ $ * /*分别对应开始、结尾、包含*/

十一、子选择器

div>p /* 带大于号>*/

十二、CSS 相邻兄弟选择器

h1+p /* 带加号+ */

什么是层叠性?

层叠性:就是css处理冲突的能力。层叠性是一种能力。当多个选择器描述了同一个属性的时候,这个属性到底应该听谁的?

css选择器的优先级顺序!

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性