首頁 >web前端 >css教學 >css選擇器有哪些類型？ css常用選擇器的簡單介紹

css選擇器有哪些類型？ css常用選擇器的簡單介紹

不言原創: 2018-08-09 15:59:484048瀏覽

這篇文章帶給大家的內容是關於如何使用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 選取的元素(火狐中應該這樣用::-moz-selection)

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

:first-letter : 第一個字符

:fist-line : 第一行字元

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

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

透過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"類似，不過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;
                          }

css選擇器有哪些類型？ css常用選擇器的簡單介紹

相關文章