CSS札記（一）：CSS選擇器

孫淑建發布于2019-08-02 10:05 / 2272人閱讀

一、語法規則

選擇器{
    屬性1:屬性值1;
    屬性2:屬性值2;
    ......
}
/*注釋*/

二、如何在html中應用CSS 1. 外部引用css文件

   css文件：css/layout.css（css文件夾和HTML位于同一個目錄下）

2. 內部嵌入css

3. 元素內部使用

三、選擇器 1. 基本選擇器 1）元素選擇器

a div body ul

2）類選擇器

.ClassName     例如: .current

3）ID選擇器

#IdName         例如: #top_nav

4）普遍選擇器

*{
   /*css代碼*/
}

5）并且選擇器

選擇器1選擇器2 p.one#first

6）并列選擇器

p,.one,#first

2. 層次選擇器 1）后代選擇器

使用空格分割兩個選擇器， 例如 【parant son】

2）子代選擇器

使用大于號分割兩個選擇器，例如 【parent > son】

3）下一個兄弟選擇器

使用+分割兩個選擇器，例如 【li:first-child + *】

4）之后所有兄弟選擇器

使用波浪線~分割兩個選擇器，例如【li:first-child ~ *】

3. 屬性選擇器(過濾器)

配合基本選擇器進行篩選


selector[name]        選擇具有name屬性的元素、無論該屬性的值為什么
selector[name=val]    選擇具有name屬性的、并且name的值為val元素
selector[name*=val]   選擇具有name屬性的、并且name的值之一為val的元素    
selector[name^=val]   選擇具有name屬性的、并且name的值以val開頭的元素
selector[name$=val]   選擇具有name屬性的、并且name的值以val結尾的元素
selector[name~=val]   選擇具有name屬性的、并且name的值包含val的元素

4. 偽類選擇器

配合基本選擇器進行篩選

1) 子元素

:first-child
:last-child
:nth-child(n)、: nth-last-child(n) 
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)

注：n可以為元素的序號，也可以為特殊的字符，比如“odd”，“even

2) 狀態

:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

5. 偽元素選擇器

偽元素以"::"開頭，用在選擇器后，用于選擇指定的元素。

::after
    常用于清除浮動，讓浮動的子元素將父撐起來。
    例：
        
            
            
        

        #nav::after{
            content = "";
            display = block;
            clear = both;
        }

::before        
::first-letter        
::first-line        
::selection

未完待續... ...

GPU云服務器云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52117.html

CSS札記（一）：CSS選擇器

一、語法規則選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...

yzzz 2019-08-30 14:20 評論0 收藏0
CSS札記（二）：級聯與繼承

摘要：一級聯概念級聯是的簡寫，說明級聯是非常重要的。二繼承中有些規則將會默認被子元素繼承，有些則不會。應用瀏覽器的默認樣式不設定，表現該規則本來特性，即如果該規則具有繼承屬性則繼承，否則不繼承。一、級聯概念:級聯（The cascade）,CSS是Cascading Style Sheet的簡寫，說明級聯是非常重要的。從表層來看，級聯表明CSS規則的順序問題，但是級聯遠比這個復雜，在所有...

Caizhenhao 2019-08-30 14:20 評論0 收藏0
CSS札記（二）：級聯與繼承

摘要：一級聯概念級聯是的簡寫，說明級聯是非常重要的。二繼承中有些規則將會默認被子元素繼承，有些則不會。應用瀏覽器的默認樣式不設定，表現該規則本來特性，即如果該規則具有繼承屬性則繼承，否則不繼承。一、級聯概念:級聯（The cascade）,CSS是Cascading Style Sheet的簡寫，說明級聯是非常重要的。從表層來看，級聯表明CSS規則的順序問題，但是級聯遠比這個復雜，在所有...

stonezhu 2019-08-02 10:04 評論0 收藏0