8.选择器

复杂选择器
    1、兄弟选择器
        作用：获取某元素平级的后面的兄弟元素
        <div>
            <p id="p1"></p>
            <p id="p2"></p>
            <p id="p3"></p>
        </div>
        注意：兄弟选择器，只能向后找，不能向前找
        1、相邻兄弟选择器
            作用：获取紧紧挨在某元素后的兄弟元素
            语法：选择器1+选择器2{ ... }
            #p1+#p2{color:green;font-weight:bold;}

　　    　　
            #p1+p{color:blue;}

          
        2、通用兄弟选择器
            作用：获取某元素后的兄弟元素
            语法：选择器1~选择器2{ ... }
            #p1~p{ ... }
    2、属性选择器
        <input id="uname" type="text" name="uname" placeholder="Plear input ...">

        (如何设置placeholder元素style  input::placeholder{....})
        1、作用
            通过元素所附带的属性及其值来匹配页面的元素
        2、语法
            1、基本语法：[attr]
                作用：匹配附带 attr 属性的元素
                ex:
                    1、[id] : 匹配页面中所有附带id属性的元素
                    2、[class]:匹配页面中所有附带class属性的元素
            2、elem[attr]
                elem : 表示任意元素
                attr : 表示任意属性
                作用：匹配页面中附带 attr 属性的 elem 元素
                ex:
                    1、匹配页面中所有附带了id属性的div元素
                        div[id]
                    2、匹配页面中所有附带type属性的input元素
                        input[type]
                    3、.important[id]
            3、[attr1][attr2]...
                作用：匹配同时附带多个 属性的 元素
                ex:
                    1、匹配页面中即有id又有class的div元素
                        div[id][class] { ... }
            4、[attr=value]
                作用：匹配 attr 属性的值为 value 的元素
                ex:
                    1、匹配页面中所有的文本框
                        input[type=text]{ ... }
                        input[type='text']{ ... }
                        input[type="text"]{ ... }
    3、伪类选择器
        1、目标伪类
            作用：突出显示活动的HTML锚点元素，匹配到被激活的锚点
            语法：    
                :target{ ... }
        2、结构伪类
            1、:first-child
                匹配的元素是属于其父元素中的首个子元素
            2、:last-child
                匹配的元素是属于其父元素中的最后一个子元素

                <style>
                    div:first-child{
                      ...
                    }

                    div:last-child{
                        
                    }
                </style>

                <header>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </header>
            3、:nth-child(n)
                匹配的元素是属于其父元素中的第n个子元素

        :nth-child(2)选取第几个标签，“2可以是你想要的数字”

        .demo01 li:nth-child(2){background:#090}

        :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同

        实例  .demo01 li:nth-child(n+4){background:#090}

        :nth-child(-n+4)选取小于等于4标签

        实例  .demo01 li:nth-child(-n+4){background:#090}

        :nth-child(2n)选取偶数标签，2n也可以是even

        实例  .demo01 li:nth-child(2n){background:#090}

        :nth-child(2n-1)选取奇数标签，2n-1可以是odd

        实例  .demo01 li:nth-child(2n-1){background:#090}

        :nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

        实例  .demo01 li:nth-child(3n+1){background:#090}

        :last-child选取最后一个标签

        实例 .demo01 li:last-child{background:#090}

        :nth-last-child(3)选取倒数第几个标签,3表示选取第3个

        例子： .demo01 li:nth-last-child(3){background:#090}

 

           

　　　　

     <ul class="nav-1">

        <li>

            <a href="#">

                <img src="images/niu_sy.png" alt="">

                <span>同济首页</span>

            </a>

        </li>

        <li>

            <a href="#">

                <img src="images/niu_sy.png" alt="">

                <span>同济首页</span>

            </a>

        </li>

        <li>

            <a href="#">

                <img src="images/niu_sy.png" alt="">

                <span>同济首页</span>

            </a>

        </li>

        <li>

            <a href="#">

                <img src="images/niu_sy.png" alt="">

                <span>同济首页</span>

            </a>

        </li>

    </ul>

 

   

    .nav-1{

        width:6.4rem;

        height:0.7rem;

        background:#c93527;

    }

    .nav-1 li {

        box-sizing:border-box;

        float:left;

 　　   font-size:0.24rem;

 　　   width:1.59rem;

 　　   height:0.5rem;

 　　   line-height:0.5rem;

  　　  border-right:0.01rem solid #fff;

  　　  margin:0.1rem auto;

　　}

　　.nav-1 li a{

 　　   color:#fff; 

　　}

　　.nav-1 li img{

 　　   width:0.4rem;

 　　   height:0.3rem;

  　　  position:relative;

   　　 top:0.05rem;

　　}

 

　　找到了第四个li并且去掉了li的border

 

　　.nav-1 li:nth-child(4){

　　    border:none;

　　}

 

　　因为a 没法继承所以找到第四个a下span改变文字样式

 

　　.nav-1 li:nth-child(4)  a span{

　　    color:#22a39c;

　　}

 

            4、:empty
                匹配没有子元素的元素
            5、:only-child
                匹配的元素是属于其父元素中的唯一子元素
        3、否定伪类
            将满足指定选择器的元素给排除出去
            :not(selector)

            #tbl tr:not(:first-child){}
    4、伪元素选择器
        1、:first-letter 或 ::first-letter
            作用：匹配某元素中的首字符
            ex :
                p:first-letter{
                    color:red;
                    font-weight:bold;
                }
        2、:first-line 或 ::first-line
            作用：匹配某元素中的首行
            ex:
                p:first-line{
                    color:blue;
                }
        3、::selection
            作用：匹配被用户选取的部分内容
            注意：只能修改文本颜色 和 背景颜色