成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重拾css(6)——選擇器

vincent_xyb / 1965人閱讀

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

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

1.選擇器

可分為兩大類：

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

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

1.1 標(biāo)簽選擇器 1.1.1 通用選擇器 *

通用選擇器大家應(yīng)該都比較熟悉了，最常用的就是重置瀏覽器默認(rèn)樣式。

1.1.2 單標(biāo)簽

文檔的標(biāo)簽就是最基本的選擇器，例如：

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

單標(biāo)簽選擇器可以并列使用，即單標(biāo)簽分組，例如：

html, p, h2 {color:black;}    //同時選中了html、p、h2三個標(biāo)簽
1.1.3 多標(biāo)簽

多標(biāo)簽選擇器一般和html上下文有關(guān)，它有以下幾種分類：

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

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

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

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

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


樣式實現(xiàn)代碼：

ul li+li {
    border-top: 1px solid #ccc;
}
1.2 屬性選擇器 1.2.1 特殊1：id選擇器

css選擇器是根據(jù)html節(jié)點的特性來設(shè)置的，id也是一個屬性，只是它是一個比較特殊的屬性，每個html節(jié)點的id不能重復(fù)。

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

#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偽類和結(jié)構(gòu)化偽類。

2.1.1 UI偽類

常用的UI偽類實例：

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

input[type="text"]:focus {}    //獲得鼠標(biāo)焦點的輸入框
#title1:target {}    //突出顯示活動的 HTML 錨
2.1.2 結(jié)構(gòu)化偽類（低版本IE不支持）

常用的結(jié)構(gòu)化偽類實例：

table tr:nth-child(even) {}    //even偶數(shù)，odd奇數(shù)
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;    /*還可以定義添加內(nèi)容的樣式*/
            }
            span:after {
                content: " Zhang";
            }

            Jerry

顯示結(jié)果：

可見:before和:after可以用于為元素前后添加內(nèi)容。

應(yīng)用場景：

第一，添加icon小圖標(biāo)。例如添加fontAwesome圖標(biāo)庫中的圖標(biāo)

第二，清除浮動。

3.選擇器的擴展

選擇器本來是css的一種規(guī)則，用于為css選擇html節(jié)點的。但是聰明的人類還是通過選擇器創(chuàng)造出了其他領(lǐng)域非常偉大的作品。

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112115.html

相關(guān)文章

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

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

    li21 評論0 收藏0

  • 重拾css(7)——選擇器的優(yōu)先級

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

    Shihira 評論0 收藏0

  • 重拾css(3)——學(xué)習(xí)css的思路

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

    Kaede 評論0 收藏0

  • 重拾css(8)——盒子模型

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

    SnaiLiu 評論0 收藏0

  • 重拾css(5)——瀏覽器默認(rèn)樣式

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

    guqiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<