CSS选择器、背景属性

1.选择器进阶

1.1后代选择器 ：空格

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

选择器语法：选择器1 选择器2 {CSS}

在选择器1所找到的标签的后代（儿子、孙子、重孙子......）中，找到满足选择器2的标签，设置样式。需要注意的是：选择器之间需要空格隔开

    
    
    
    
    


    
    
P标签
    

        
这是div的儿子p
    

1.2 子代选择器：>

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

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

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式。子代只包括儿子。

    
    
    
    
    


    

        父级
        这是div里面的a
        

            这是div里面的p里面的a
        
    

1.3 并集选择器：，

同时选择多组标签，设置相同的样式。

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

找到 选择器1 和 选择器2 选中的标签，设置样式 。

• 每组选择器之间通过 , 分隔；
• 每组选择器可以是基础选择器或者复合选择器；
• 每组选择器通常一行写一个，提高代码的可读性。

    
    
    
    
    


    
ppppp
    
div
    span
    
h1
    
h2

1.4 交集选择器：紧挨着

选中页面中 同时满足 多个选择器的标签。

选择器语法： 选择器1选择器2 { css }

（既又原则）找到页面中 既 能被选择器1选中， 又 能被选择器2选中的标签，设置样式

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

    
    
    
    
    


    
    
这是p标签；box
    
ppppppp
    
div：box

1.5 hover 伪类选择器

选中鼠标 悬停 在元素上的 状态 ，设置样式。属于链接伪类选择器。

伪类选择器选中的元素的 某种状态

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

 /* 悬停时文字颜色是红色 */

        div:hover {

            color: red;

        }

   

 1.6 Emmet 语法

通过简写语法，快速生成代码。

类似于刚刚学习的选择器的写法：

    
    
    

        
1111
        
1111
        
1111
    

    
    
    

        
1
        
2
        
3
    

总结： 

 2. 背景相关属性

2.1 背景颜色    

background-color（bgc）

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

   div {

            /* background-color: pink; */

            width: 400px;

            background-color:rgba(0,0,0, .5);

        }

 2.2 背景图片

background-image （bgi）

属性值：background-image: url (‘图片的路径’) ； 

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

  div {

              width: 400px;

              height: 400px;

              background-color: pink;

              background-image: url(./images/1.jpg);

          }

 2.3 背景平铺

属性名： background-repeat （bgr）

平铺可以理解为“重复”。

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺，图片只显示一个
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

 2.4 背景位置

利用 background-position(bgp) 属性可以改变图片在背景中的位置。

 background-position: 水平方向位置 垂直方向位置;

注意：

• 正数：向右向下移动；负数：向左向后移动
• 背景色和背景图片只显示在盒子里面

2.5  背景相关属性连写

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background: color image repeat position

背景图位置如果是英文单词可以换顺序，效果不变。如果是数字不可以。

注意：可以按照需求省略，取值之间需要空格。在PC端，如果盒子大小和背景图片大小不一样，此时可以直接写background：url（）。需要设置的单独样式，要写在连写的下面或者里面。

拓展：img标签和背景图片的区别

都可以在网页中展示这张图片。

img直接写上标签即可。img不设置宽高会以原始默认值显示。img显示重要的图片。

div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰的css的样式，不能撑开div标签。