国内精品视频一区二区三区_欧美人与牲口杂交在线播放_亚洲精品国男人在线视频_成人夜色视频网站在线观看_国产内射一区亚洲

知識(shí)分享

精選網(wǎng)站建設(shè)CSS選擇器

發(fā)表日期：2015/7/31 14:23:35 文章編輯： 瀏覽次數(shù)：2472

在網(wǎng)站程序設(shè)計(jì)過程中，了解基本的id選擇器，類選擇器和子選擇器，如果就此收手，那你會(huì)錯(cuò)失很多靈活方法。雖然本文提及的部分選擇器屬于CSS3范圍內(nèi)，只在一些時(shí)新的瀏覽器有效，不過還是有必要記得這些選擇器。

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先進(jìn)的選擇器之前，為初學(xué)者之便，先把常見的選擇器解決掉。
星號(hào)符會(huì)選擇頁面每個(gè)元素。很多開發(fā)者用它把所有margin和padding歸零。這當(dāng)然是快捷測試方法。不過我建議你不使用它，它給瀏覽器帶來太多的負(fù)擔(dān)，這不必要。
通配選擇器也可以用到子選擇器上。

#container * {
 border: 1px solid black;
}

它會(huì)選擇#container層中的子元素。不過，也不需要經(jīng)常用這個(gè)技巧。
View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

把哈希符號(hào)前綴于選擇器就成了ID選擇器。這是很普通的方法。不過使用之也需要謹(jǐn)慎。先問自己：為了定位元素就絕對需要賦予id？僵硬刻板的id選 擇器不能重復(fù)使用。如果可能，先試使用標(biāo)簽方法，如html5元素，或者偽類。（不過id選擇器的渲染速度是最快的，有得有失，譯者注）。
View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

3. .X

.error {
  color: red;
}

這是類選擇器。ID選擇器與類選擇器的差別是，后者可以用于多個(gè)元素。使用類選擇器可以把同樣的樣式賦予一群元素，相反，id選擇器只能作用于特定的單一元素。
View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

4. X Y

li a {
  text-decoration: none;
}

后代選擇器是使用很多的選擇器。它作用處于X元素內(nèi)的所有的y元素。不過如果你的選擇器像X Y Z A B.error，那你的方法就錯(cuò)了。這開銷太大了。（后代選擇器的渲染速率不快，特別是在有很長的前綴元素時(shí)，譯者注）
View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

5. X

a { color: red; }
ul { margin-left: 0; }

類型選擇器會(huì)選擇頁面中同一類型的標(biāo)簽。比如說ul{…}會(huì)選擇頁面中所有的ul。
View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

6. X:visited And X:link

a:link { color: red; }
a:visted { color: purple; }

:link作用于沒有訪問過的鏈接，:visited作用于訪問過的鏈接。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

7. X + Y

ul + p {
   color: red;
}

相信選擇器只作用于同一父級(jí)元素下的第一個(gè)元素。例子中的只有緊鄰ul中的第一個(gè)p的字體會(huì)是紅色的。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

8. X > Y

div#container > ul {
  border: 1px solid black;
}

X Y和X>Y不同的地方后者只選擇X的第一級(jí)子元素。例如下面

                   List Item
                          Child                               List Item           List Item           List Item

選擇器#container>ul只選擇直接位于#container層下的ul,不會(huì)作用于li中的ul。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

9. X ~ Y

ul ~ p {
   color: red;
}

這個(gè)相鄰選擇器與X+Y相似，不同的是，ul+p只選擇與ul相鄰的第一個(gè)p,而x~Y選擇所有與ul相鄰的P。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

10. X[Title]

a[title] {
   color: green;
}

一種屬性選擇器。上例中，只選擇帶有title屬性的鏈接標(biāo)簽。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

11. X[Href="Foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

T上例中樣式只會(huì)作用于鏈接到http://net.tutsplus.com的a標(biāo)簽。其他沒有鏈到這個(gè)網(wǎng)址的a標(biāo)簽不會(huì)變成綠色。

這個(gè)很有用，不過有點(diǎn)死板，也許我想把所有的nettuts.com鏈接都變成綠色。在這種情況下，可以使用一些表達(dá)式。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

12. X[Href*="Nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

對了，就是這個(gè)。href后面加上星號(hào)(通配符)使網(wǎng)址出現(xiàn)nettuts的所有鏈接都變成綠色。比如說nettuts.com,tutsplus.com。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

13. X[Href^="Http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

有些網(wǎng)站用這個(gè)方法在某些鏈接上加一些圖標(biāo)說明這些鏈接到其他網(wǎng)站。它經(jīng)常用于表達(dá)式中顯示字符串的開始。如果我們想選擇那樣帶有http的a標(biāo)簽鏈接，我們可以使用類似上面的CSS。(這不是搜索http://,這不必要，對https://沒起作用)。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

14. X[Href$=".Jpg"]

a[href$=".jpg"] {
   color: red;
}

又一次，我們使用了一個(gè)表達(dá)式的符號(hào)，$,查找字符串的尾部。這個(gè)例子中，我們查找所有鏈接到圖片的鏈接，或許說以.jpg結(jié)尾的鏈接。這當(dāng)然不對gif和png格式的起作用。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

15. X[Data-*="Foo"]

a[data-filetype="image"] {
   color: red;
}

回到第8個(gè)（？感覺第8個(gè)和這個(gè)有點(diǎn)風(fēng)馬牛不相及）；我們怎么補(bǔ)償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

回到第8個(gè)（？感覺第8個(gè)和這個(gè)有點(diǎn)風(fēng)馬牛不相及）；我們怎么補(bǔ)償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

 Image Link

在適當(dāng)?shù)牡胤郊由香^后，我們就可以使用一個(gè)標(biāo)準(zhǔn)的屬性選擇器選擇這些標(biāo)簽。

a[data-filetype="image"] {
   color: red;
}

View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

16. X[Foo~="Bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

這是一個(gè)讓人印象深刻的選擇器。了解這個(gè)技巧的人不多。~符號(hào)允許我們選擇帶有有空白間隔屬性的標(biāo)簽。

就像第15個(gè)選擇器一樣，這里，我們可以使用能用間隔符列出需要瓢東東的data-info屬性。舉例來說，我們給外鏈些記號(hào)吧。

" Click Me, Fool

在適當(dāng)?shù)胤绞褂脴?biāo)記，然后就可以選擇任何帶有這些屬性的標(biāo)簽。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

這個(gè)偽類選擇器只會(huì)作用于被選中的用戶界面元素(user interface element)，比如說單選按鈕，或者復(fù)選框。
View Demo

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

18. X:after

這個(gè)偽類和:before一樣，主要是用來清除浮動(dòng)的。不過現(xiàn)在人們都能在它們身上找到新的用法。

 

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

  • IE8+

  • Firefox

  • Chrome

  • Safari

  • Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

這是一個(gè)動(dòng)態(tài)偽類。當(dāng)元素有鼠標(biāo)移在其上面時(shí)樣式就會(huì)起作用。一般用于鏈接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

a:hover {
 border-bottom: 1px solid black;
}

兼容性

  • IE6+ (In IE6, :hover must be applied to an anchor element)

  • Firefox

  • Chrome

  • Safari

  • Opera

20. X:not(Selector)

div:not(#container) {
   color: blue;
}

這個(gè)否定偽類非常有用。比如要選擇除#container層外的所有層。上面的代碼就非常有效。
又比如我要選擇除了段落標(biāo)簽外的所有元素(不建議這樣做)，可以這樣做：

*:not(p) {
  color: green;
}

View Demo

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

21. X::PseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

使用這類偽類(用::指定)可以設(shè)計(jì)一個(gè)元素的一片斷，比如說第一行，或者第一個(gè)字。需要記住的事，這偽類只能作用于塊元素。

選擇段落的第一個(gè)字符
p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

這代碼片斷先提取頁面中的所有段落，然后再查找段落中的第一個(gè)字。
這方法經(jīng)常用于制作報(bào)紙風(fēng)格的頁面。

選擇段落的第一行
p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

View Demo

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

22. X:nth-Child(N)

li:nth-child(3) {
   color: red;
}

過去我們無法從一堆元素中選擇具體的幾個(gè)。nth-child偽類可以解決這種問題。
nth-child接受整數(shù)參數(shù)，不過它不是基于零開始，如果你要選擇列表中的第二個(gè)，就使用li:nth-child(2)。
我們還可以使用這個(gè)偽類選擇幾個(gè)子類。比如，用li:nth-child(4n)來選擇4倍數(shù)的列表。
View Demo

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

23. X:nth-Last-Child(N)

li:nth-last-child(2) {
   color: red;
}

如果列表項(xiàng)非常多，但只是需要選擇倒數(shù)第三個(gè)。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一樣，nth-last-child是從后面倒著數(shù)。
View Demo

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

24. X:nth-Of-Type(N)

ul:nth-of-type(3) {
   border: 1px solid black;
}

選擇子類也許不如根據(jù)類型選擇元素更方便。比如說現(xiàn)在有5個(gè)無序列表，但只需選擇第三個(gè)，這時(shí)可以使用ul:nth-of-type(3)。
View Demo

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

25. X:nth-Last-Of-Type(N)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

對了，我們也可以使用nth-last-of-type選擇倒數(shù)第幾個(gè)元素。

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

26. X:first-Child

ul li:first-child {
   border-top: none;
}

這個(gè)結(jié)構(gòu)性偽類選擇父級(jí)元素的第一個(gè)子對象。這個(gè)經(jīng)常用于移除列表的第一個(gè)和最后一個(gè)元素的邊框。
View Demo

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

27. X:last-Child

ul > li:last-child {
   color: green;
}

這個(gè)偽類選擇父級(jí)元素的最后一個(gè)對象。

例子

用一個(gè)簡單的例子來說明這樣選擇器，首先，我們制作一個(gè)列表。

標(biāo)簽
        List Item       List Item       List Item

很簡單的列表

CSS
ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

設(shè)置好背景，去掉ul默認(rèn)的內(nèi)邊距，再給每個(gè)li加上邊。

就像圖片中顯示的一樣，我們需要去掉第一個(gè)和最后一個(gè)的邊。這時(shí)就可以使用:first-child和:last-child。

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

View Demo

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-Child

div p:only-child {
   color: red;
}

確實(shí)，這個(gè)你可能很少用。不過這個(gè)真的很有用。
在下面的例子，只有第一層中的p標(biāo)簽會(huì)變色。父級(jí)元素下的子類多于一個(gè)時(shí)這個(gè)偽類效果就停止了。

 My paragraph here.     Two paragraphs total.     Two paragraphs total.

View Demo

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

29. X:only-Of-Type

li:only-of-type {
   font-weight: bold;
}

和28個(gè)結(jié)構(gòu)性偽類相似，這個(gè)偽類只會(huì)在父級(jí)元素下只有一個(gè)子級(jí)元素X的情況下起作用。這種情況，你也可以使用ul li，不過這樣就會(huì)選擇所有列表項(xiàng)了。

ul > li:only-of-type {
   font-weight: bold;
}

View Demo

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

30. X:first-Of-Type

first-of-type允許我們選擇同級(jí)元素的第一個(gè)。

一個(gè)測試

為便于理解，做個(gè)測試。復(fù)制下面的標(biāo)簽

    My paragraph here.           List Item 1        List Item 2              List Item 3        List Item 4

現(xiàn)在，嘗試去選擇list Item 2,當(dāng)你找到方法或者放棄時(shí)，請接著看一下。

辦法1

有幾種的不同的方法。我們評審其中幾個(gè)。首先用first-of-type

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

這個(gè)代碼的意思是，在頁面中找到第一個(gè)無序列表，然后再找到其直接的子級(jí)元素(也就是li)，最后找到第二個(gè)li。

方法2
p + ul li:last-child {
   font-weight: bold;
}

在這個(gè)例子，先查找與p標(biāo)簽直接相鄰的ul標(biāo)簽，然后再找倒數(shù)第一個(gè)li(也就是第二個(gè)li)。

方法3
ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

View Demo

兼容性


將文章分享到..
相關(guān)新聞
全新新聞
隨機(jī)新聞
最新網(wǎng)站設(shè)計(jì)案例
Hi，我來幫您！