css選取器有哪些類型?css常用選取器的簡單介紹

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於如何使用css選取器有哪些類型?css常用選取器的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

css標籤選取器

作用:選中頁面中的所有指定元素

文法:標籤名:{}

id選取器

作用:通過元素的id屬性值鑽中唯一一個元素

文法:#id{}

css類別選取器

作用:通過元素的class屬性值選中一組元素

文法:.class屬性值{}

可以同時為一個元素設定多個class屬性值,多個值之間用空格隔開

選取器分組(並集選取器)

作用: 通過選取器分組可以同時選中多個選取器對應的元素

文法:選取器1,選取器2,選取器N{}

例:選中id為p3、class屬性值包含p2、h1標籤

                 #p3,.p2,h1{                                  background-color: yellow;                            }

css通配選取器

作用:選中頁面中所有的元素

文法:*{}

css交集選取器(複合選取器)

作用:可以選擇同時滿足多個選取器的元素

文法:選取器1選取器2選取器N{}

注意:因為id可以唯一確定一個元素,因此不要對id使用交集選取器

例:選中class屬性值包含p4的span

span.p4{                                    background-color:#4169E1;                           }

元素之間的關係:

父元素:直接包含子項目的元素。

子項目:直接被父元素包含的元素。

祖先元素:直接或簡介包含後代元素的元素,父元素也是祖先元素。

後代元素:直接或間接被祖先元素包含的元素,子項目也是後代元素。

兄弟元素:擁有相同父元素的元素。

css後代元素選取器

作用:選中指定元素的後代元素

文法:祖先元素 後代元素{}

例:選中div中的span

  div span {                                        color: chartreuse;                                }

css子項目選取器(IE6及以下的瀏覽器不支援)

作用:選中指定父元素的指定子項目

文法:父元素>子項目

例:選中div中的span

                 div>span{                              background-color: yellow;                     }

偽類別選取器用來表示元素的一種特殊的狀態。

如:瀏覽過的超連結,普通超連結,擷取焦點的文字框

當我們需要為處在這些特殊狀態的元素設定樣式時,就可以使用偽類給串連定義的樣式

正常連結:a:link

訪問過的連結:a:visited(只能定義顏色)

滑鼠滑過的串連:a:hover

正在點擊的連結:a:active

a:link和a:visited之間的順序沒規定,但他們必須在a:hover和a:active前面,a:hover又必須在a:active前面

hover和active也可以為其他元素設定 如 p:hover p:active 不過ie6及以下不支援

其他偽類:

:focus 擷取焦點

:before 指定元素前

:after 指定元素後

::selection 選中的元素(Firefox中應該這樣用::-moz-selection)

使用虛擬元素來表示元素中的一些特殊位置

:first-letter : 第一個字元

:fist-line : 第一行字元

:before : 表示元素最前邊的部分

一般before都需要結合content這個樣式一起使用,

通過content可以向before或after的位置添加一些內容

:after : 表示元素的最後邊

將p標籤中的第一個字元設定為黃色25px

   p:first-letter{                        color:yellow;                        font-size: 25px;                    }                   p:first-line{                       background: #FF0000;                   }                  將content的內容添加到p元素的最前面                   p:before{                       content: "ABC";                   }                   將content的內容添加到p元素的最後面                   p:after{                       content: "DEF";                   }

css屬性選取器

作用:可以根據元素中的屬性或屬性值來選取指定的元素

文法:[屬性名稱]選取具有指定屬性的元素

[屬性名稱=屬性值 ]選取含有指定屬性值的元素

[屬性名稱^=屬性值]選取屬性值以指定內容開頭的元素

[屬性名稱$=屬性值]選取屬性值以指定內容結尾的元素

[屬性值*=屬性值]選取屬性值包含指定內容的元素

    /*為具有title屬性的p元素設定背景顏色*/                p[title]{                     color: darkorchid;                }                /*為title屬性值為hello的元素設定一個背景顏色*/                p[title=hello]{                     background-color: cornflowerblue;                }                /*為title屬性是ab開頭的元素設定一個背景顏色*/                p[title^="ab"]{                     background-color: chartreuse;                }                p[title$="d"]{                     font-size: 28px;                }

偽類子項目選取器

:first-child : 可以選中第一個子項目

:last-child : 可以選中最後一個元素

:nth-child : 可以選中任意位置的子項目

該選取器後邊可以指定一個參數,指定要選擇第幾個元素

even:偶數

odd: 奇數

first-of-type

last-of-type

nth-of-type

和xxx-chlid類似,不過xxx-child是在所有元素中選擇,xxx-of-type是在指定類型中選擇

例:選中第一個p標籤

p:first-child{                           color:coral;                      }                     選中第3個p標籤                     p:nth-child(3){                           color:chartreuse;                     }                     設定表格奇偶行背景顏色不同                     tr:nth(even){                                background-color:pink;                      }                                         tr:nth(odd){                                background-color:skyblue;                      }

後一個兄弟元素選取器

作用:可以選中一個元素後緊挨著的指定兄弟元素

文法:前一個+後一個

例:選中p標籤後的相鄰的兄弟span(p和span不一定相鄰)

  p+span{                                     color:red;                            }

選中後邊的所有兄弟元素

文法:前一個~後邊所有

否定偽類:

作用:從選種的元素中剔除某些元素

文法: :not(選取器)

例:為所有的p元素設定一個背景顏色,出了class為hello或hello2的元素

              p:not(.hello):not(.hello2){                                  background-color: antiquewhite;                          }
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.