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


一、通配符選擇器

作用:給當前頁面上所有的標簽設置屬性

(2)格式:

 

*{屬性:值;}

 

 

(3)注意點:由於通配符選擇器是給界面上所有的標簽設置屬性,因此在設置之前會遍歷所有的標簽,如果當前界面上的標簽比較多,那么性能就會比較差,所以一般在企業開發過程中一般不會使用通配符選擇器。

(4)例子:

 

        *{

            color: red;

        }

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

<h1>我是標題</h1>

<p>我是段落</p>

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

 

二、選擇器綜合練習

下面的這些方法都可以對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>

 

三、源碼:

d81_wildcard_selector.htm

d82_selector_comprehensive_exercise.html

地址:

https://github.com/ruigege66/HTML_learning

2.CSDN:https://blog.csdn.net/weixin_44630050(心悅君兮君不知-睿)

3.博客園:https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公眾號:傅里葉變換,后台回復“禮包”獲取Java大數據學習視頻禮包

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM