前端CSS选择器进阶与背景相关属性

#博学谷IT学习技术支持#

• 选择器进阶

• 复合选择器

1. 后代选择器

1. 结构：选择器1 选择器2 {css}
2. 作用：先通过选择器1找到一堆标签，再一堆标签的后代（儿子、孙子、重孙子....）中找到满足选择器2的标签，设置样式

1. 子代选择器

1. 结构：选择器1>选择器2 {css}
2. 作用：先通过选择器1找到一堆标签，再一堆标签的子代（儿子）中找到满足选择器2的标签，设置样式

• 并集选择器

1. 结构：选择器1,选择器2 {css}
2. 作用：找到选择器1和选择器2对应的标签，设置样式
3. 注意点：并集选择器中可以同时写多个选择器，多种选择器，选择器之间以逗号隔开

• 交集选择器

1. 结构：选择器1选择器2 {css
2. 作用：找到页面中既满足选择器1又满足选择器2的标签，设置样式
3. 注意点：1、交集选择器中可以同时写多个选择器，多种选择器，选择器之间紧挨着的；2、如果交集选择器中有标签选择器，此时标签选择器必须写在第一个

• 背景相关属性

• background-color（背景颜色）

      取值：关键字；rgb表示法；rgba表示法；十六进制表示法

• background-image（背景图片）

      取值：url（图片的路径）

• background-repeat（背景平铺）

      取值：平铺repeat；不平铺no-repeat；沿着水平方向平铺repeat-x；沿着垂直方向平铺repeat-y

• background-position（背景位置）

      取值：方位名词（最多只能表示9个位置）——水平方向（left,center,right）;垂直方向（top,center,bottom）。数字+px（坐标）——坐标系，原点（盒子的左上角），x轴（水平向右），y轴（垂直向下）

      操作：将图片左上角与坐标点重合即可

• 连写形式background

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

      注意点：如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

      省略问题：按照你的需求省略。特殊情况，如果盒子的大小和背景图片一样大，此时可以直接写background：url();

• img标签和背景图片的区别

      img标签：不设置宽高会显示默认宽高

      div + 背景图片：需要给div设置宽高，因为背景图片只是一个css样式，不是html中的内容，不能撑开div标签

• 总结

    学习不是一蹴而就的，每天得定时定量的学。学习有学习的乐趣，也有学习的痛苦，但是贵在坚持。每天给自己定个小目标，大家一起努力呀！