H5学习之筛选器、空标签选择器、属性选择器

*                                         所有标签标签名称所有同名的标签

#id                              指定此id的标签

.className                      含有此className的元素

A B 后代选择器

A>B 子代选择器

:nth-child(n)                   第n个标签支持 2n+1 3n+2 等公式支持负值?

:nth-of-type(n)               第n个同类标签冒号前需加上标签名

:nth-last-child(n)

:nth-last-of-type(n)

:first-letter             首字选择器

:last-child                        最后一个子标签

:only-child                       只有一个子标签

:only-of-type                    类型只有一个

~                                      后面所有的同级标签

+                                      相邻选择器后面一个

,                                         同时定义多个样式

选择某个标签前面的技巧

:not(selector)                  选择器匹配非指定元素/选择器的每个元素

:nth-of-type(-n+4)

:nth-child(-n+3)

筛选器：

html：

<body>
    <header>
        <section>1</section> 
        <section>2</section> 
        <section>3</section> 
        <section>4</section> 
        <section>5</section> 
        <section>6</section> 
        <section>7</section> 
        <section>8</section> 
        <section>9</section>         
        页头
        <!--<h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>-->
    </header>
    <p>ppp</p>
    <p>cccc</p>
    <section>section</section>
</body>

css：

body{
            background-color: #333;
            color: white;
        }
        /* *页面上的所有元素*/
        /*header>*:nth-child(2n+1){
            color: yellow;
        }*/
        /*section:nth-child(2n+1){
            color: red;
        }
        section:last-child{
            color: yellow;
        }*/
        header~p{
            color: blue;
        }
        /*header>section:nth-child(-n+2){
            color: salmon;
        }*/
        section:not(:nth-last-of-type(3)){
            color: rebeccapurple;
        }

空标签选择器：

html：

<body>
    <span>古人云</span>
    <span></span>
    <span>gurenyun</span>
    <div></div>
    <div>古人云</div>
</body>

css：

:empty:before{
            content: '可以放上任意文字' ',在加一些文字';
        }
        span>:empty:before{
            content: '完了'；
        }
        span>:empty:after{
            content: '继续文字'url(Refresh.png);
        }
        /*使用 :empty 可以选择空标签*/

属性选择器：

html：

<body>
    <a href="https://www.baidu.com" target="_blank" title="社交，新闻">百度</a>
    <a href="https://www.qq.com" title="社交，即时聊天，新闻">QQ</a>
    <a href="https://www.sina.com.cn" zhiyou100=“996699”>新浪</a>
    <a href="https://www.taobao.com" title="购物，分享">淘宝</a>
</body>

css：

a{
            text-decoration: none;
        }

        /*属性指定值*/
        /*a[title='购物，分享']{
            text-decoration: underline;
        }*/

        /*属性以指定的值开头*/
        a[title^=购]{
            text-decoration: underline;
        }

        /*属性以指定的值结尾*/
        /*a[title$=闻]{
            text-decoration: line-through;
        }*/

        /*属性包含指定的值*/
        a[zhiyou100*='6']{
            font-weight: bold;
            font-style: italic;
        }

        /*a[title~='新闻']{
            font-weight: bold;
            font-style: italic;
        }*/

        a[target]:visited,a[target]:link{
            color: red;
        }

演示：

筛选器

空标签选择器

属性选择器