css選擇器概述

白繭發表於2019-02-19

css選擇器種類

id選擇器
類選擇器、屬性選擇器、偽類選擇器
元素選擇器、偽元素選擇器
萬用字元選擇器、子類選擇器、後代選擇器、相鄰兄弟選擇器、選擇器分組

一、id選擇器

            <p id="id"></p>

            #id{
                color:red;
            }

二、類選擇器、屬性選擇器、偽類選擇器

　　1、類選擇器

            <p class="class"></p>

            .class{
                color:black;
            }

　　2、屬性選擇器

            <p text="text"></p>

            [text]{
                color:white;
            }
            [text:text]{
                color:white;
            }
            p[text:text]{
                color:white;
            }

　　3、偽類選擇器

　　:link　　　　向未被訪問的超連結新增樣式

　　:visited　　向已被訪問的超連結新增樣式

　　:active　　　向被啟用的元素新增樣式　

　　:hover　　　當滑鼠懸停至元素上方是，向該元素新增樣式

　　:focus　　　當元素獲取焦點時，向該元素新增樣式　

            <p>345</p>

            p:foucs{
                color:blue;
            }

三、元素選擇器、偽類選擇器

　　1、元素選擇器

            <p>345</p>

            p{
                color:pink;
            }

　　2、偽元素選擇器

　　:first-letter　　向文字的第一個字母新增特殊樣式。

　　:first-line　　　向文字的首行新增特殊樣式。

　　:before　　　在元素之前新增內容。

　　:after　　　　　在元素之後新增內容。

<p>345</p>

//"first-line" 偽元素用於向文字的首行設定特殊樣式。
p:first-line
  {
  color:#ff0000;
  }

四、萬用字元選擇器、子類選擇器、後代選擇器、相鄰兄弟選擇器、分組選擇器

　　1、萬用字元選擇器

        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            *{
                /*選擇頁面上的所有元素*/
                color:pink;
            }

            #te*{
                /*選擇id為te元素下的所有元素*/
                color:pink;
            }

　　2、子類選擇器

        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            #te > p{
                /*選擇id為te元素下的所有的直接子類p元素*/                    
                color:pink;
            }

　　3、後代選擇器

        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            #te p{
                /*選擇id為te的元素下的所有p元素*/    
                color:pink;
            }

　　4、相鄰兄弟選擇器

        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p + input{
                /*選擇緊接在 p 元素後出現的<input>，p 和 input 元素擁有共同的父元素*/
                color:pink;
            }

　　5、選擇器分組

        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p,input{
                /*選擇所有的p和input元素*/
                color:pink;
            }

css選擇器概述

相關文章