HTML連載25-通配符選擇器&選擇器綜合練習

時間 2019-12-11

原文原文鏈接

1、通配符選擇器html

做用：給當前頁面上全部的標籤設置屬性git

（2）格式：github

*{屬性：值；}

（3）注意點：因爲通配符選擇器是給界面上全部的標籤設置屬性，所以在設置以前會遍歷全部的標籤，若是當前界面上的標籤比較多，那麼性能就會比較差，因此通常在企業開發過程當中通常不會使用通配符選擇器。微信

（4）例子：ide

        *{

            color: red;

        }

........省略代碼.......

<h1>我是標題</h1>

<p>我是段落</p>

<a href="#">我是一個連接</a>

2、選擇器綜合練習性能

下面的這些方法均可以對p標籤進行屬性的設置學習

沒有最好的方法，只有更合適的作法，對以前學習的選擇器都練習了一遍大數據

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d82_selector_comprehensive_exercise</title>

    <style>\

        /*標籤選擇器*/

        p{

            color: red;

        }

        /*id選擇器*/

        #identity1{

            color: green;

        }

        #identity2{

            color: green;

        }

        /*class選擇器*/

        .para{

            color: blue;

         }

        /*後代選擇器*/

        div p{

            color: yellow;

        }

        /*子元素選擇器*/

        div>p{

            color: red;

        }

        /*交集選擇器*/

        p.para{

            color: green;

        }

        /*並集選擇器*/

        #identity1,#identity2{

            color:wheat;

        }

        /*通用兄弟選擇器*/

        h1~p{

            color: #37fa1e;

        }

        /*序選擇器*/

        p:nth-of-type(n+1){

            color:green;

        }

        /*屬性選擇器*/

        p[id]{

            color: #ff4b54;

        }

</style>

</head>

<body>

<h1>我是標籤</h1>

<div>

<p id="identity1" class="para">我是段落1</p>

<p id="identity2" class="para">我是段落2</p>

</div>

</body>

</html>