重拾css(6)——選擇器

vincent_xyb 發布于2019-08-29 12:45 / 1954人閱讀

摘要：選擇器的擴展選擇器本來是的一種規則，用于為選擇節點的。但是聰明的人類還是通過選擇器創造出了其他領域非常偉大的作品。被推廣流行的根本原因就是它的基于選擇器的。

前文示圖中展示了瀏覽器的渲染過程，那么css與html是如何結合的呢？
答案是——選擇器！

1.選擇器

可分為兩大類：

標簽選擇器（*是特殊的標簽），可單標簽，也可上下文多標簽；

屬性選擇器（id和class本質上也是屬性）。

1.1 標簽選擇器 1.1.1 通用選擇器 *

通用選擇器大家應該都比較熟悉了，最常用的就是重置瀏覽器默認樣式。

1.1.2 單標簽

文檔的標簽就是最基本的選擇器，例如：

html {color:black;}
p {color:gray;}
h2 {color:silver;}

單標簽選擇器可以并列使用，即單標簽分組，例如：

html, p, h2 {color:black;}    //同時選中了html、p、h2三個標簽

1.1.3 多標簽

多標簽選擇器一般和html上下文有關，它有以下幾種分類：

后代選擇器，選擇一個祖先的所有子孫節點，例如 div p{…}

子元素選擇器，選擇一個父元素的所有直屬節點，只包含子代，不包含孫代及更后代，例如 div > p{…}

相鄰兄弟選擇器，選擇某一個元素緊挨著的兄弟節點，例如 li + li{…}

同代選擇器，選擇某一個元素的所有同胞節點，即有相同祖先節點的同代兄弟（不需要相鄰），例如 span ~ a{…}

以上各種情況的組合應用（不要組合過于復雜，編碼講求可讀性第一）
典型應用：

樣式實現代碼：

ul li+li {
    border-top: 1px solid #ccc;
}

1.2 屬性選擇器 1.2.1 特殊1：id選擇器

css選擇器是根據html節點的特性來設置的，id也是一個屬性，只是它是一個比較特殊的屬性，每個html節點的id不能重復。

　　由于特殊，而且比較常用，所以就多帶帶給id選擇器一個“#”，本質上就是一個屬性選擇器。下面兩行代碼的執行效果完全相同：

#div1 {border:1px solid #ccc;}
div[id="div1"]{border:1px solid #ccc;}

1.2.2 特殊2：class選擇器

class也是一個特殊的屬性，之所以把它放在屬性選擇器下，和上文將的id一樣。

1.2.3 屬性選擇器

屬性選擇器有兩種情況：

只通過屬性名選擇：img[title]{…} //選中具體title屬性的img

通過屬性名和屬性值選擇：input[type=’text’]{…} //選中type屬性值為text的input

2.偽類和偽元素

上文提到了若干種選擇器類型，偽類和偽元素可針對任何一種選擇器使用。

2.1 偽類

偽類分為UI偽類和結構化偽類。

2.1.1 UI偽類

常用的UI偽類實例：

a:link {color: #FF0000}        // 未訪問的鏈接
a:visited {color: #00FF00}    // 已訪問的鏈接 
a:hover {color: #FF00FF}    // 鼠標移動到鏈接上 
a:active {color: #0000FF}    // 選定的鏈接 

input[type="text"]:focus {}    //獲得鼠標焦點的輸入框
#title1:target {}    //突出顯示活動的 HTML 錨

2.1.2 結構化偽類（低版本IE不支持）

常用的結構化偽類實例：

table tr:nth-child(even) {}    //even偶數，odd奇數
table tr:nth-child(odd) {}
table tr:nth-child(n) {}    //選中第n個
table tr:first-child {}
table tr:last-child {}

2.2 偽元素

偽元素是非常重要的概念，其中較常用的是:before和:after
基本用法：

            span:before {
                content: "Hello ";    /*或者unicode編碼的形式*/
                color: red;    /*還可以定義添加內容的樣式*/
            }
            span:after {
                content: " Zhang";
            }

            Jerry

顯示結果：

可見:before和:after可以用于為元素前后添加內容。

應用場景：

第一，添加icon小圖標。例如添加fontAwesome圖標庫中的圖標

第二，清除浮動。

3.選擇器的擴展

選擇器本來是css的一種規則，用于為css選擇html節點的。但是聰明的人類還是通過選擇器創造出了其他領域非常偉大的作品。

jQuery
jQuery被推廣流行的根本原因就是它的“Query”——基于css選擇器的“Query”?，F在的瀏覽器都支持querySelectAll()方法了，其實這就是W3C“抄襲”的jQuery的設計。

zen-Coding
jquery可以通過一段css選擇器表達式從既有的html結構中選擇符合表達式的dom組，但是zen-coding反其道而行之——可以根據css選擇器表達式創造出html節點。不得不佩服這幫人的創造力。

zen-Coding可以大大提高編碼效率，不妨一試。

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

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

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

重拾css(1)——寫在前邊的話

摘要：本系列文章重拾主要參考王福朋知多少，結合自己的理解和學習需要，修改或添加了一些內容，難免有失偏頗，僅供自我學習參考之用。工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統學習有關，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統學習css的想法。本系列文章（重拾css）...

li21 2019-08-29 12:45 評論0 收藏0
重拾css(7)——選擇器的優先級

上一節我們知道，選擇器種類較多，同一個元素，可以采用不同的選擇器方式選中，此時哪個選擇器的樣式會被最終顯示呢？特指度特指度表示一個css選擇器表達式的重要程度，每個選擇器表達式都可以通過一個公式計算出一個數值，數越大，越重要。這個公式叫I - C - E計算公式： I —— Id; 100 C —— Class; 10 E —— Element; 1 即，針對一個css選...

Shihira 2019-08-29 12:45 評論0 收藏0
重拾css(3)——學習css的思路

摘要：如果我們以為重點看，從上圖中我們可以總結出學習的三個突破點。這次我們向瀏覽器這位機器人學習一下，看看它寫出來的能給我們什么幫助。對選擇器來說，有一個很重要的話題級別。布局布局是的重頭戲，每個系統的布局都有其各自的特點。眾所周知，css的運行環境是瀏覽器，那么我們有必要先來認識下瀏覽器。 1.瀏覽器是怎樣工作的有篇文章叫《瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘》，文中言簡意賅的介紹...

Kaede 2019-08-29 12:45 評論0 收藏0
重拾css(8)——盒子模型

摘要：盒子的寬度設置固定寬度的情況在盒子模型中，我們設置的寬度都是內容寬度，不是整個盒子的寬度。這樣我們改四個中的其中一個，都會導致盒子寬度的改變。包裹內容的情況這種情況下比較簡單，盒子的寬度將隨著內容寬度的增加而增加。 1.引言從這一節開始，我們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種布局和呈現的特性。包括兩類：文字、塊。第一類——文字。這部分相對比較簡單一些...

SnaiLiu 2019-08-29 12:45 評論0 收藏0
重拾css(5)——瀏覽器默認樣式

摘要：而依然有效的原因是瀏覽器默認樣式的優先級低于外聯內部樣式。例如第二，瀏覽器默認樣式還為設置了，這個值是對英文比較友好，中文狀態下就顯得有點擁擠。上一節介紹了樣式的五種來源，咱們再通過一張圖回顧一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般...

guqiu 2019-08-29 12:45 評論0 收藏0