CSS进阶

选择器进阶

复合选择器

后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中，满足条件的元素

选择器语法：选择器1 选择器2 {css}，例如：

div p {
    color:red;
}

上述代码会选择div标签中后代中的p标签

结果：在选择器1所找到标签的后代中，找到满足选择器2的后代，设置样式

注意点：

• 后代包括：儿子，孙子，重孙子
• 后代选择器中，选择器与选择器之间通过空格隔开

子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1 > 选择器2 {css}。例如：

div > p {
color:red;
}

上述代码会选择div中的子代p标签

结果：在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式

注意点：

• 子代选择器指挥选择子代
• 子代选择器中，选择器与选择器之间通过>隔开

并集选择器

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1 , 选择器2 {css}。例如：

div,p,a {
color:red;
}

上述代码会选择所有的div，p和a标签

结果：找到选择器1和选择器2对应的标签，设置样式

注意点：

• 并集选择器中的每组选择器通过,隔开
• 并集选择器中的每组选择器可以是基础选择器或者复合选择器
• 并集选择器中的每组选择器通常一行写一个，可以提高代码的可读性

交集选择器

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2{ css }。例如：

p.box {
color:red;
}

上述代码会选择box类的p标签

结果：找到既符合选择器1也符合选择器2的标签

注意点：

• 交集选择器中的选择器之间是紧挨的，没有大学分隔
• 交集选择器中如果有标签选择器，标签选择器必须写在最前面

hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover {css}。

注意点：伪类选择器选中元素的某种状态

emmet语法

作用：通过简写语法，快速生成代码

例如：打出标签名即可生成标签，打出点加类名可以生成类选择器

背景相关属性

背景颜色

属性名：background-color（bgc）

属性值：颜色取值：关键字，rgb表示法，rgba表示法，十六进制……

注意点：

• 背景颜色默认为透明：rgba(0,0,0,0)，transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片

属性名：background-image（bgi）

属性值：url('图片的路径')

注意点：

• 背景图片中的url可以省略引号
• 背景图片默认水平和垂直方向平铺
• 背景图片仅仅是给盒子起到装饰作用，类似于背景颜色，不能撑开盒子

背景平铺

属性名：background-repeat（bgr）

属性值：

• repeat：默认值，水平和垂直方向都不平铺
• no-repeat：不平铺
• repeat-x：沿着水平方向平铺
• repeat-y：沿着垂直方向平铺

背景位置

属性名：background-position（bgp）

属性值：

• 方向名词：
  • 水平方向：left，center，right
  • 垂直方向：top，center，bottom
• 数字+px：坐标系：原点为盒子左上角，水平向右为x轴正方向，垂直向下为y轴正方向

注意点：方位名词取值和坐标值可以混着使用，第一个取值为水平，第二个取值为垂直

背景属性连写

属性名：background（bg）

属性值：单个属性值的合写，取值之间以空格隔开

书写顺序：推荐为：background: color image repeat position

省略：可以按照需求省略。一种特殊情况为：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写：background: url()

注意点：若需设置单独的样式和连写：

• 要么单独的样式写在连写下面
• 要么单独的样式写在连写里面

元素显示模式

块级元素

显示特点：

• 独占一行（一行只能显示一个）
• 宽度默认是父元素的宽度，高度默认有内容撑开
• 可以设置宽高

代表标签：div，p，h系列，ul，li，dl，dt，form，header，nav，footer……

行内元素

显示特点：

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高

代表标签：a，span，b，u，i，s，strong，ins，em，del……

行内块元素

显示特点：

• 一行可以显示多个
• 可以设置宽高

代表标签：input，textarea，button，select……

特殊情况：img标签由行内块元素特点，但是chrome的调试工具中显示结果是inline

元素显示模式转换

目的：改变元素默认的显示特点，让元素复合布局特点

语法有：

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

拓展：HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套文本，块级元素，行内元素，行内块元素等，但是，p标签中不能嵌套div，p，h等块级元素

a标签内部可以嵌套任何元素，但是，a标签不能嵌套a标签

拓展：居中方法总结

水平居中：

• text-align: center，可适用于文本，行内元素和行内块元素

  注：如果需要让以上类型元素水平居中，则直接上这些元素的父元素设置即可

• margin: 0 auto，适用于块级元素

  注：直接给当前元素设置即可

垂直居中：line-height，适用于单行文本

CSS特性

继承性

特性：子元素由默认继承父级元素样式的特点

可以继承的常见属性有：

• color
• font-style，font-weight，font-size，font-family
• text-indent，text-align
• line-height

注意点：可以通过调试工具判断样式是否可以继承

好处：可以在一定程度上减少代码

常见应用场景：

• 可以直接给ul标签设置list-style:none属性，去除列表前面的小圆点
• 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式。

a标签的color和h系列标签的font-size会继承失效。但其实属性继承下来了，但是被浏览器默认属性覆盖掉了

层叠性

特性：

• 给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
• 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果