进击的前端之升级的CSS

升级的CSS之选择器

学习一下新的选择器

复合选择器

后代选择器

结构：选择器1 选择器2 { … }

作用： 选择器1 所在的标签中找到满足 选择器2 的标签并设置样式

注意：后代包括：儿子、孙子…。选择器与选择器之间通过 空格 隔开

子代选择器

结构： 选择器1 > 选择器2 { … }

作用：选择器1 所在的标签中找到满足 选择器2 的标签并设置样式

注意：子代只包括儿子，子代选择器之间通过 > 来隔开

并集选择器

结构： 选择器1 , 选择器2 { … }

作用: 找到满足选择器1或选择器2的标签并设置样式

注意：选择器之间用 , 隔开。可以是复合选择器也可以是基础选择器。

交集选择器

结构： 选择器1选择器2 { … }

作用：找到同时满足选择器1和选择器2的标签并设置样式

注意：没有符号隔开，如果有标签选择器，必须写在最前面。

伪类选择器

结构： 选择器：hover { … }

作用： 鼠标悬停在元素上的状态

元素显示模式

块级元素

特点：独占一行。宽度默认是父元素的宽度，高度默认随内容变化而变化。可以设置宽高

代表的标签：div、p、h、ul、li、form等

行内元素

特点：一行可以显示多个。宽度和高度默认随内容变化而变化，不可以设置宽高否则无效

代表的标签：a、span、em、strong等

行内块元素

特点：一行可以显示多个。可以设置宽高

代表的标签：input、textarea、button等

元素显示模式的转换

作用：改变元素默认的显示特点，让元素符合布局要求

语法：

• 转换为块级元素:display:block
• 转换为行内块元素:display:inline-block
• 转换为行内元素:display:inline

注意：

• p 标签不能嵌套 div 、p、h 等块级元素
• a 标签不能嵌套 a 标签

CSS的特性

继承性

子元素继承父元素的样式

常见的有：font系列、text-alig、line-height、color等

继承性失效

例如： a标签的color样式、h标签的font-size样式。浏览器的默认样式会覆盖所继承的样式。

层叠性

一个标签有很多不同的样式，则会共同作用这个标签
一个标签设置相同的样式，只有最后一个样式会起作用

选择器的优先级

不同的选择器有着不同的优先级，优先级高的则会覆盖优先级低的样式。

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important