真正开始系统的总结知识,才明确意识到原来前端的内容是多么的庞大复杂,也不得不佩服我们每一位程序员

内容

1. 复合选择器
2. hover伪类选择器
3. 背景相关属性

以及使用 Emmet 语法提高编码速度

复合选择器

后代选择器

作用:后代选择器可以选择所有后代标签 包括儿子 孙子 重孙子...

语法:
选择器1 选择2{
      css属性
      属性:属性值;
      属性:属性值;
     ...
 }

选择器与选择器之间使用空格隔开 后代选择器最终选择的是子代元素.选中子孙后代.

后代选择器可以是任意基础选择器的组合.

示例代码

<ul>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <!-- 特殊的a标签 -->
        <li><a href="#">我也想改变颜色</a></li>
    </ul>

 ul li {
       color: red;
       font-size: 30px;
   }


 ul li a { 
     /*如果想要给a标签设置颜色,必须选中a标签才可以.*/
     color: skyblue
}

子代选择器

作用:子代选择器只能选择亲儿子标签(亲儿子选择器)

语法
        选择器1 > 选择器2{
            css属性
            属性:属性值;
            属性:属性值;
            ...
        }

只能选中亲儿子 选择器与选择器之间使用>隔开

示例代码:

<div class="box">
        <strong>我是儿子</strong>
        <p>
            <strong>我是孙子</strong>
        </p>
    </div>

.box>strong {
            color: red;
        }

并集选择器

作用:同时选中多组标签,设置相同的样式.

语法:
 选择器1,选择器2{
        css属性
        属性:属性值;
        属性:属性值;
   }

注意事项:

选择器与选择器之间使用逗号隔开

并集选择器中每组选择器习惯竖着写,最后一个选择器的后面千万不要加逗号.

并集选择器每组选择器可以是任意基础选择器或复合选择器的组合

示例代码:

<em>倾斜的文字</em>
    <em>倾斜的文字</em>
    <em>倾斜的文字</em>
    <i>倾斜的文字</i>
    <i>倾斜的文字</i>
    <div>熊大</div>
    <p>熊二</p>
    <h3>光头强</h3>
    <ul>
        <li>小猪佩奇</li>
        <li>乔治</li>
        <li class="last">小龙女</li>
    </ul>

em,
        i {
            font-style: normal;
        }

        div,
        p,
        h3,
        ul .last {
            color: pink;
        }

交集选择器

作用:交集选择器可以理解为既又的原则

语法
            选择器1选择器2{
                css属性
                属性:属性值;
                属性:属性值;
                ...
            }

选择器1与选择器2之间紧挨着,不需要任何符号分隔

交集选择器如果有标签选择器,标签选择器必须放到最前面

/*只需要给大哥设置颜色为红色*/
    <div class="box" id="box">大哥</div>
    <div>大姐</div>
    <p>二姐</p>
    <span class="box">三姐</span>

	div.box {
            color: red;
        }

        /* #box.box {
            color: pink;
        } */

hover伪类选择器

作用:选中鼠标悬停时候的样式

选择器:hover{
            css属性
            属性:属性值;
            属性:属性值;
        }

:hover选择器不仅可以给a标签使用,其它的任意标签都可以使用

:的前面和后面不能有空格.

<a href="#">小米</a>
<div class="box"></div>

/* 鼠标经过改变a的文本颜色 */
        a:hover {
            color: orange;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        /* 鼠标经过改变盒子背景颜色 */
        .box:hover {
            background-color: #ff6700;
        }

背景相关属性

背景颜色

background-color:red;
/* 默认颜色值 透明色 */
background-color: transparent;

背景图片

background-image:url(图片路径);

背景是否平铺

默认值
background-repeat:repeat;
不平铺
background-repeat:no-repeat;
水平平铺
background-repeat:repeat-x;
垂直平铺
background-repeat:repeat-y;

背景连写

background:color image  repeat position
background: pink url(./img/icon.png) no-repeat left center;

背景案例

<h3 class="title">成长守护平台</h3>

.title {
            /* 1.1 设置h3的基本样式 */
            width: 118px;
            height: 41px;
            /* background-color: pink; */
            font-weight: 400;
            font-size: 14px;
            line-height: 41px;
            /* 1.2 设置背景的相关样式 */
            background-image: url(./img/icon.png);
            background-repeat: no-repeat;
            background-position: left center; 
    	 /* 背景连写 */
            /* background:color image repeat position*/
            /* 背景连写 各个属性值之间使用空格隔开 */
            background: url(./img/icon.png) no-repeat left center;
            /* 1.3 文字首行缩进 */
            text-indent: 1.5em;
        }

        /* 1.4 鼠标经过改变文本颜色 */
        .title:hover {
            color: orange
        }

img标签应用场景:产品图片

背景图片的应用场景:装饰型的小图片 logo 超大背景图

区别:

img标签可以撑开盒子.

背景图片只是装饰css的样式,不能撑开盒子

以后要使用背景图片,一定要记得设置宽高.