day 38 高级选择器

1.高级选择器

一.高级选择器
    1-后代选择器 *****
        儿子、孙子、重孙子
        1.    .father .wu{
                color: red;
            }      　　　　　　　　　　　　选择父类中特定的子类
        2.　　.father p{    #后代中间用空格分开
            color: red;
            }        选择父类中所有的标签 

    2-子代选择器
        只能是亲儿子（可能有继承关系）仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
      div>p{
      }

    3-组合选择器
        多个选择器组合到一起共同设置样式
        div,p,a,li,span{
            font-size: 14px;
        }

    4-交集选择器
        第一个标签必须是标签选择器，第二个标签必须是类选择器
        div中有active 才会被选中
        div.active{
        }

    5-属性选择器
    input[type='text']

    伪类选择器：LoVe HAte
        a:link    没有被访问的
        a:visited 访问过后的
        a:hover   鼠标悬停的时候
        a:active  摁住的时候

    -伪元素选择器
        p:before 在...的前面添加内容 一定要结合content
        p:after 在...的后面添加内容 与后面的布局有很大关系
        2.css的继承性和层叠性 （坑）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.father p{    #后代中间用空格分开  选择父类中所有的标签
            color: red;
        }*/
        .father .wu{      选择父类中特定的子类
            color: green;
        }

    </style>
</head>
<body>

    <div class="father">
        <p>alex</p>
        <ul>
            <li>
                <p class="wu">wusir</p>
            </li>
        </ul>
    </div>

    <p class="wu">日天</p>

</body>
</html>

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father>p{
            color: red;
        }
        .father>ul>li{  （属性继承）
            width: 100px;
        }        

        .container{
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">

        <p>alex</p>
        <p>alex</p>
        <div class="content">
            <p>wusir</p>
        </div>
        <ul>
            <li>
                alex2
                <ul>
                    <p>defad </p>
                    <li>wusir</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="container">
        <p>日天</p>
    </div>

</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size: 12px;   #由于继承关系，所有的都继承下来
        }

        *{
            padding: 0;
            margin: 0;
        }

        body,div,p,a,span{
            padding: 0;
            margin: 0;
        }

    </style>
</head>
<body>
    <div>
        alex
    </div>
    <p>alex2</p>
    <a href="#">日天</a>
    <span>wusir</span>

</body>
</html>

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        div{
            color: red;
        }
        div.active{
            color: green;
        }
    </style>

</head>
<body>
    <div class="active">alex</div>
    <div>hahaha</div>
    <p class="active">youyou</p>
</body>
</html>

交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        form input[type='text']{
            background-color: red;
        }
        form input[type='password']{
            background-color: yellow;
        }
        form #user{
            background-color: green;
        }
    </style>
</head>
<body>

    <form action="">
        <input type="text" id="user">
        <input type="password">
    </form>
</body>
</html>

属性选择器

/*根据属性查找*/
            /*[for]{
                color: red;
            }*/

            /*找到for属性的等于username的元素 字体颜色设为红色*/
            /*[for='username']{
                color: yellow;
            }*/

            /*以....开头  ^*/
            /*[for^='user']{
                color: #008000;
            }*/

            /*以....结尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/

            /*包含某元素的标签*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/

            /**/

            /*指定单词的属性*/
            label[for~='user1']{
                color: red;
            }

            input[type='text']{
                background: red;
            }

属性选择器特殊(了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        /*爱恨准则 LoVe HAte*/    

        a:link{
            color: green;  /*没有被访问的a标签的颜色*/
        }

        a:visited{
            color: yellow;     /*访问过后的a标签的颜色*/
        }

        a:hover{
            color: red;   /*鼠标悬停的时候a标签的颜色*/
        }

        a:active{
            color: blue;   / 鼠标摁住的时候a标签的颜色
        }

        span:hover{
            color: red;
            font-size: 24px;
            text-decoration: underline;
        }

        .child{
            display: none;    display（显示的意思）
        }

        .father:hover .child{     #鼠标悬浮在父亲上，让它孩子显示
            color: red;
            display: block;
         }

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

    <span>alex</span>

    <div class="father">
        wusir
        <p class="child">alex</p>
    </div>

</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter{        /*设置第一个首字母的样式*/
            color: red;
            font-size: 26px;   #字体都是偶数
        }

    /*伪元素选择器与后面的布局有很大关系*/
        p:before{           /*用伪元素 属性一定是content*/
            content: '$'    /* 在....之前 添加内容
        } 

        p:after{
            content: '.'      /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
         }

    /*需求：这个盒子一定是块级标签  span==>块 并且不再页面中占位置。未来与布局有很大关系 */
        .box2{
            /*display: none;*/        /*隐藏元素 不占位置*/
            display: block;            强制把span转换成块

            visibility: hidden;     /*隐藏元素 占位置*/
            height: 0;                设置高度为0，同样不占位置
        }

    </style>
</head>
<body>
    <p class="box">
        <span>alex</span>
    </p>

    <span class="box2">alex</span>
    <div>wusir</div>

</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*#p1{
            font-size: 30px;
            color: green;
        }
        #p2{
            color: green;
            text-decoration: underline;
        }
        #p3{
            font-size: 30px;
            text-decoration: underline;
        }*/

        .lg{
            font-size: 30px;
        }
        .lv{
            color: green;
        }
        .un{
            text-decoration: underline;
        }

    </style>
</head>
<body>
    <!--
        张孕康1 30px green
        张孕康2 green text-decoration:underline;（下划线）
        张孕康3    30px 下划线
     -->
     <!-- 公共类 -->
     <p id="p1" class="lg lv">张孕康1</p>
     <p id="p2" class="lv un">张孕康2</p>
     <p id="p3" class="lg un">张孕康3</p>

</body>
</html>

class 的使用

2.css的继承性和层叠性

1. 继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。
　　盒模型的属性是不可以继承下来的
　　a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性

2. 层叠性： 覆盖
    （1）行内> id > class > 标签 ****

        1000 > 100 > 10 > 1

    （2）数数 数 id  class 标签
    （3）先选中标签，权重一样，以后设置为主
    （3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
    （4）如果都是继承来的属性，保证就近原则
    （5）都是继承来的属性，选择的标签一样近，再去数权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*.box p span{
            color: red;
        }*/
        .box{
            color: red;   （这种a标签无法继承）
        }
        .box a{
            color: yellow;   （a标签直接继承）
        }
        .box p{
            color: green;
            font-size: 30px;
            line-height: 30px;
            text-align: right;        （对齐方式）
            background-color: red;  （无法继承）

        }
        span{
            background-color: transparent; (默认属性是透明色)
        }
    </style>
</head>
<body>

    <div class="box">
        日天
        <a href="#">百度</a>     （a标签不能继承）
        <p>
            wusir
            <span>alex</span>
        </p>
    </div>

</body>
</html>

继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    /*css层叠性  权重 谁的权重大就会显示谁的样式*/

    /*如何看权重  数数选择器  id  class 标签*/

        /*1 0 0*/
        /*#box{
            color: yellow;
        }*/
        /*0 1 0*/
        .box{
            color: green;
        }
        /*0 0 1*/
        div{
            color: red;
        }

        /*  id > 类 > 标签*/

    </style>
</head>
<body>
    <div class="box" id="box">猜猜我是什么颜色</div>

</body>
</html>

层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>

    </title>
    <style>
    /*继承来的属性 权重为0*/

    /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/
        /*#father1 .box2{
            color: red;
        }

        .box1{
            color: green;
        }*/

        /*都是继承来的 ，都一样深*/

        #father1 #father2 .box3{
            color: red;
        }
        #father1 .box2 .box3{
            color: green;
        }

    </style>
</head>
<body>
    <div class="box1" id="father1">
        <ul class="box2" id="father2">
            <li class="box3" id="father3">
                <p class="box4" id="child">猜猜我的颜色</p>
            </li>
        </ul>
    </div>
</body>
</html>

层叠性深入理解

1