选择器进阶

后代选择器

选择父元素后代中满足条件的元素
语法:选择器1 选择器2 {css}

 <div class="item_1">
       <p>Hello,world</p>
    <div>

 .item_1 p {
           color: chartreuse;
        }

子代选择器

选择父元素子代中满足条件的元素
语法:选择器1>选择器2 {css}

<div class="item_2">
      <p>Hello,world</p>
   </div>

 .item_2 p {
            color: coral;
        }

并集选择器

同时选择多组标签,设置相同的样式
语法:选择器1,选择器2 {css}

<h4>Hello,world</h4>
<h5>Hello,world</h5>

 h4,
 h5 {
    font-weight: normal;
    color: rgb(51, 247, 247);
       }

交集选择器

选中页面中同时满足多个选择器的标签
语法:选择器1选择器2 {css}
注:标签选择器必须写在最前面

<div class="item_3">Hello,world</div>
    <p>Hello,world</p>
    <p class="item_3">Hello,world</p>

 p.item_3 {
         color: rgb(247, 40, 126);
        }

hover伪类选择器

选中鼠标悬停在元素上的状态,设置样式
语法:选择器:hover {css}

 <a href="#">Hello,world</a>
 <div class="box"></div>

 a {
    text-decoration: none;
      }

 a:hover {
        color: rgb(88, 18, 252);
        }

背景相关属性

背景颜色:background-color

默认值是透明:rgba(0,0,0,0)、transparent

<div class="box"></div>

  .box {
         width: 200px;
         height: 200px;
         background-color: rgb(245, 234, 234);
        }

背景图片:background-image

语法:background-image: ulr('图片的路径')
背景图片默认在水平和垂直方向平铺

<div class="pic"></div>

  .pic {
         width: 200px;
         height: 200px;
         background-image: url(./images/1.gif);
        }

背景平铺:background-repeat

1.repeat:(默认值)水平和垂直方向都平铺
2.no-repeat:不平铺
3.repeat-x:沿着水平方向(x轴平铺)
4.repeat-y:沿着垂直方向(y轴平铺)

<div class="dog"></div>

  .dog {
         width: 350px;
         height: 350px;
         background-image: url(./images/1.gif);
         background-repeat: no-repeat
        }

背景位置:background-position

1.方位名词
(1)水平方向
①left:左边 ②center:中间 ③right:右边
(2)垂直方向
①top:上边 ②center:中间 ③bottom:下边
2.数字+px(坐标)
(1)原点(0,0) 盒子左上角
(2)x轴水平向右
(3)y轴垂直向下

 <div class="position"></div>

  .position {
            width: 350px;
            height: 350px;
            background-color: aquamarine;
            background-image: url(./images/1.gif);
            background-repeat: no-repeat;
            /*方位名词*/
            background-position: left top; 
            /*数字+px(坐标)*/
            background-position: (0, 0);
          }

背景相关属性连写

background:color image repeat position

元素显示模式

块级元素

属性:display:block
1.独占一行
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高

行内元素

属性:display:inline
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高

 <span>Hello,world</span>

  span {
        display: block;
        width: 90px;
        height: 25px;
        background-color: chartreuse;
        text-align: center;
       }

行内块元素

属性:display:inline-block
1.一行可以显示多个
2.可以设置宽高

<a href="#">百度一下</a>

  a {
     display: inline-block;
     width: 90px;
     height: 25px;
     background-color: coral;
     color: black;
     text-decoration: none;
    }

css-Day2