CSS 知识点速记2

复合选择器

后代选择器：父选择器 子选择器 { CSS 属性}            包括儿子孙子...

div span {
color: red;}

子代选择器：父选择器 > 子选择器 { CSS 属性}        仅包括儿子

并集选择器：选中多组标签设置相同的样式。

div,
p,
span {
color: red;                逗号  ，  隔开
}                                最好回车分开，好阅读

交集选择器：选中同时满足多个条件的元素。

p.box {                直接写没有符号 点 .  是类标签自带的
color: red;                标签选择器必须书写在最前面。
}

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

        鼠标悬停状态：选择器:hover { CSS 属性 }

a:hover {
color: red;
}

超链接伪类

需要按 LVHA 的顺序书写。

一个 a 标签选择器设置超链接的样式，变颜色相当于四个类都无效
所以hover状态需特殊设置

CSS特性：化简代码 / 定位问题，并解决问题
继承性 子级默认继承父级的文字控制属性。
        如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。
层叠性

        相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
        不同的属性会叠加：不同的 CSS 属性都生效
优先级

        通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（慎用）
 （选中标签的范围越大，优先级越低）color：red !important(添加到属性后 慎用)

复合选择器 

improtant 非继承 权重才最高

 Emmet写法

CSS

背景属性

 

空格隔开，只写一个关键字，另一个默认居中；数字只写一个值表示水平方向，垂直方向为居中

 关键字取值方式写法，可以颠倒取值顺序

 background-size: 100%; 图片跟盒子宽度一样

 

显示模式

如 div

如 span

如 图片（只变一个 默认锁宽高）