css之選擇器

tinysun1234 發布于2019-08-29 17:10 / 1939人閱讀

摘要：同時匹配元素和元素后代選擇器，用空格分割。選擇元素所有的直接子元素中滿足條件的元素直接相鄰選擇器，用分割。選擇元素之后相鄰的下一個兄弟元素，但要處于同一個父元素內普通相鄰選擇器弟弟選擇器。

CSS（Cascading層疊 Style樣式 sheets表），是用來為網頁添加樣式的代碼。
css選擇器的作用是用于選中元素，以便為其添加樣式
1.基礎選擇器

通用元素選擇器（*），通常用于取消瀏覽器自帶的樣式，不常用

id選擇器（#id）

class類選擇器（.class）

標簽選擇器（p）

2.組合選擇器
組合選擇器，E,F表示基礎選擇器
E,F 多元素選擇器，用逗號分割。同時匹配元素E和元素F
E F 后代選擇器，用空格分割。選擇E元素所有的后代中滿足F選擇器條件的元素（不只是子元素，子元素所有的后代）
E>F "子元素選擇器，用>分割。
選擇E元素所有的直接子元素中滿足F條件的元素"
E+F "直接相鄰選擇器，用+分割。
選擇E元素之后相鄰的下一個兄弟元素F，但要處于同一個父元素內"

E~F "普通相鄰選擇器（弟弟選擇器）。
選擇E元素之后的元素F（無論直接相鄰與否），但要處于同一個父元素內"

3.屬性選擇器
html由元素組成，元素由標簽（p/div等標簽），內容和屬性（例如class屬性，class="haha"表示class屬性的值為haha）組成。

可以通過標簽的屬性來選擇元素


input[type=password]{
width:30px;}

[href^="http://"] {
  background-color: #f0ad4e;
}

[src$="gif"] {
  border: 1px solid #ccc;
}

4.偽類選擇器
常用的

E:link 匹配E所有未被點擊的鏈接

E:visited 匹配E所有已經被點擊的鏈接

E:active 匹配鼠標已經其上按下，還沒有釋放的E元素

E:hover 匹配鼠標懸停其上的E元素

 //a標簽設置偽類時的順序比較重要，會產生樣式覆蓋。
//如果a：visited的樣式，放在最后，a鏈接被點擊之后，再hover或者active都不會生效。
            a{
                color:red;
            }
            a:visited{
                color:blue;
            }
            a:hover{
                color:green;
            }
            a:active{
                color:yellow;
            }

E：focus 匹配處于焦點的元素

點擊輸入框等元素當光標閃爍可以輸入內容時，就說明輸入框處于焦點狀態

E:enabled 匹配表單中可用的元素

E:disabled 匹配表單中禁用的E元素

E:checked 匹配表單中，被選中的radio或者checkbox元素

E::selection 匹配用戶鼠標當前選中的元素，注意這里是由兩個冒號的

::selection{
color:red;
} //被鼠標選中的文字會變紅

E:first-child 匹配其父元素E的第一個子元素

E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)

E:nth-child(n) 匹配其父元素的第N個子元素，第一個標號為1，相當于E:first-child

E:nth-last-child(n) 匹配其父元素的倒數第N個子元素，第一個編號為1

小tip：先找到E的父元素，再選擇它父元素下面第n個元素

E:nth-of-type(n) 選擇滿足E選擇器的元素的父元素內，滿足E選擇器條件的子元素中不同種類型（類型是指標簽，如p標簽和div標簽是不同種類型）第N個子元素

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再選擇這些元素同種類型的第N個

E:nth-last-of-type(n) 與nth-of-type(n) 作用類似，但是倒著匹配的

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再倒著選擇這些元素同種類型的第N個

E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)

5.偽元素選擇器
偽元素選擇器前面有兩個冒號（::），可以添加到選擇器的末尾以選擇元素的某個部分。

E::first-line 匹配E元素內容的第一行

E::first-letter 匹配E元素內容的第一個字母

E::before 在E元素內部首位生成一個偽元素，插入生成的內容

可用于清除浮動，主要是簡化標簽

div::before{
content:"aa";
width:0px;
}

E::after 在E元素內部最后生成一個偽元素，插入生成的內容

6.選擇器優先級

普通場景

1、在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式

.child{
color:red !important;
}

2、作為style屬性寫在元素標簽上的內聯樣式

3、id選擇器

4、類選擇器

5、偽類選擇器

6、屬性選擇器

7、標簽選擇器

8、通配符選擇器

9、瀏覽器自定義

復雜場景下：

標記為ABCD

           1.  行內樣式:     ==>a
           2.  id選擇器:                            ==>b
           3.  類，屬性選擇器和偽類選擇器              ==>c
           4. 標簽選擇器和偽元素選擇器                ==>d

然后根據選擇器去分類計算，最后先比較a的值，a相同就比較b，以此類推。數值更高，優先級更高！例如：

            *       {}  /a=0 b=0 c=0 d=1/-> /0,0,0,1/
            p       {}  /a=0,b=0,c=0,d=1/-> /0,0,0,1/
            a:hover {}  /a=0,b=0,c=1,d=1/-> /0,0,1,1/
            ul li   {}  /a=0,b=0,c=0,d=2/-> /0,0,0,2/
            h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/
            ul ol li.active  {}  /a=0,b=0,c=1,d=3/->/0,0,1,3/
            #ct .box p {}  /a=0,b=1,c=1,d=1/-> /0,1,1,1/
            div#header:after {}  /a=0,b=1,c=0,d=2/-> /0,1,0,2/
            style=""    /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

 
         
           div.box
           p.box
           div.box
           
             div.item
             p.item

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

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

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

CSS入門之引用、選擇器、屬性（六分之三）

摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準備說定位的時候，他們就喊停，不住了。。。選擇器表達式如下相關效果見表達式關鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇沒辦法，我直播教小伙伴CSS入門，屬性講完，準備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點解釋引用如...

baishancloud 2019-08-30 15:54 評論0 收藏0
HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...

fai1017 2019-08-29 12:50 評論0 收藏0
HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...

crossoverJie 2019-08-01 17:02 評論0 收藏0
前端筆記之CSS（上）

摘要：宋體注意使用某種特定的字體系列宋體完全取決于用戶機器上該字體系列是否可用這個屬性沒有指示任何字體下載。但是記住，最終選擇上的是最后的那個后代元素。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
前端（二）之 CSS

摘要：前端之前端之前言前言昨天學習了標記式語言，也就是無邏輯語言。今天學習，被稱之為網頁的化妝師。為前端頁面的樣式，由選擇器作用域與樣式塊組成。年初，組織負責的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了年月出版的規范第二版。前端之 CSS 前言昨天學習了標記式語言，也就是無邏輯語言。了解了網頁的骨架是什么構成的，了解了常用標簽，兩個指令以及轉義字符；其中標簽可以分為兩大類：一類...

張率功 2019-04-23 13:08 評論0 收藏0
CSS之選擇器的運用

摘要：相鄰同胞選擇器使用隔開兩個選擇器。例如表示選擇為元素的所有兄弟元素。選擇器的分類選擇器元素屬性簡介以上就是我關于選擇器的理解與運用，后續有任何補充或修改均會在此基礎上添加，有任何問題歡迎指出，謝謝 CSS選擇器和規則：在css聲明塊前添加一個選擇器，用來指明將css聲明應用在哪些元素上。如圖所示：showImg(https://segmentfault.com/img/bV6NYt?w...

BlackMass 2019-08-30 14:15 評論0 收藏0