30個(gè)你必須記住的網(wǎng)頁(yè)CSS選擇符

學(xué)會(huì)了基礎(chǔ)的id，類和后代選擇符，然后你就一直用它們了嗎？如果是這樣，你丟失了（css的）巨大的靈活性。在本文中提到的很多選擇器屬于CSS3規(guī)范的一部分，因此，只有在現(xiàn)代瀏覽器中才可使用。

1.*

* { margin: 0; padding: 0; }

對(duì)于初學(xué)者，在學(xué)習(xí)更多高級(jí)選擇器之前，最先了解的選擇器。

星號(hào)選擇器將匹配頁(yè)面里的每一個(gè)元素。很多開(kāi)發(fā)者使用這個(gè)技巧將外邊距和內(nèi)邊距重置為零。雖然在快速測(cè)試時(shí)這確實(shí)很好用，但我建議你永遠(yuǎn)不要再生產(chǎn)代碼中使用它。它給瀏覽器帶來(lái)大量不必要的負(fù)擔(dān)。

* 也能作為子選擇符使用。

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

這將匹配#container div的每一個(gè)后代元素。再次強(qiáng)調(diào)，盡量不要使用這種技術(shù)。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

2.#X

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

井號(hào)前綴允許我們選擇id。這是最常見(jiàn)的用法，不過(guò)應(yīng)該慎重使用ID選擇器。

反復(fù)問(wèn)自己：我一定需要id來(lái)匹配要選擇的元素嗎？

id選擇符是唯一的，不允許重復(fù)使用。如果可能的話，先嘗試使用一個(gè)標(biāo)簽名稱，一個(gè)新的HTML5元素，甚至是一個(gè)偽類。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

3. .X

.error { color: red; }

現(xiàn)在介紹的是類選擇符。id和類的不同之處在于后者可以多次使用。當(dāng)你想給一組元素應(yīng)用樣式的時(shí)候可以使用類選擇符。另外，當(dāng)你想給特殊元素應(yīng)用樣式的時(shí)候才使用id。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

li a { text-decoration: none; }

下一個(gè)最常用的選擇符是后代選擇符。當(dāng)你需要給你的選擇符增加特殊性的時(shí)候你可以使用。例如，如果你只想匹配無(wú)序列表下的錨元素？此時(shí)后代選擇符派上用場(chǎng)。

小貼士——如果你的選擇符看起來(lái)像這樣X(jué) Y Z A B.error，那你就錯(cuò)了。時(shí)刻問(wèn)自己使用這么高的權(quán)重是否有必要。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

5. X

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

如果你想匹配頁(yè)面上的所有的元素，根據(jù)他們的類型，而不是id或類名？顯而易見(jiàn)，使用類型選擇符。如果你需要選擇所有的無(wú)序列表，請(qǐng)使用ul {}。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

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

我們使用:link偽類選擇符選擇所有已經(jīng)被點(diǎn)擊過(guò)的錨標(biāo)簽。

此外，我們也有:visited偽類選擇符，正如你期望的，允許我們僅給頁(yè)面上被點(diǎn)擊過(guò)的或被訪問(wèn)過(guò)的錨標(biāo)簽應(yīng)用樣式。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

ul + p { color: red; }

這被稱作相鄰選擇符。它將只選擇緊貼在X元素之后Y元素。上面的例子，僅每一個(gè)ul之后的第一個(gè)段落元素的文本為紅色。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

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

X Y和X > Y之間的不同點(diǎn)是后者只選擇直接子代。例如，考慮如下的標(biāo)記。

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

選擇符#container > ul將只選擇id為container的div的直接子代ul。它不匹配更深層的li的子代的ul。

因此，使用子代選擇符有性能上的優(yōu)勢(shì)。事實(shí)上，這同樣適用于基于css選擇器的javascript引擎。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

ul ~ p { color: red; }

這是兄弟選擇符和X + Y一樣，然而，它沒(méi)有約束。與相鄰選擇符（ul + li）僅選擇前一個(gè)選擇符后面的第一個(gè)元素比起來(lái)，兄弟選擇符更寬泛。它會(huì)選擇，我們上面例子中更在ul后面的任何p元素。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

a[title] { color: green; }

被稱為屬性選擇器，在我們上面的例子里，這只會(huì)選擇有title屬性的錨標(biāo)簽。沒(méi)有此屬性的錨標(biāo)簽將不受影響。但如果你需要更多的特性怎么辦呢？呵呵……

兼容性

IE7+
Firefox
Chrome
Safari
Opera

11. X[href=”foo”]

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

上面的代碼段將給所有href屬性為http://net.tutsplus.com的錨標(biāo)簽添加樣式；他們將會(huì)顯示為我們的品牌綠色。所有其他的錨標(biāo)簽將不受影響。

注意我們將href值用引號(hào)包裹。記住，當(dāng)使用javascript的css選擇符引擎時(shí)也這么做。如果可能的話，盡可能使用css3選擇符代替非官方的方法。

這工作的很好，但有點(diǎn)不夠靈活。如果鏈接確實(shí)直接連接到Nettus+還好，但是，也許路徑是到nettust的相對(duì)路徑呢？在這種情況下，我們可以使用一點(diǎn)正則表達(dá)式語(yǔ)法。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*=”nettuts”]

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

來(lái)了不是~這就是我們需要的代碼。*號(hào)指定了包含該屬性的值必須包含定義的值。就是說(shuō)，這句代碼包含了href值為 nettuts.com，net.tutsplus.com或者tutsplus.com。

記住這個(gè)描述過(guò)于寬泛，如果是某個(gè)錨點(diǎn)標(biāo)簽鏈接到某個(gè)連接中帶有tuts非Envato的網(wǎng)站（tutsplus屬于Envato旗下網(wǎng)站）呢？因此你需要更多特性來(lái)限制，分別使用^和&來(lái)限定字符串的開(kāi)始和結(jié)束。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^=”http”]

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

有沒(méi)有想過(guò)某些網(wǎng)站是如何定義一個(gè)圖標(biāo)的鏈接的？我確定你肯定看到過(guò)。這些鏈接很容易讓你跳轉(zhuǎn)到另一個(gè)網(wǎng)站。

使用^(carat)符灰常簡(jiǎn)單啦。這個(gè)符號(hào)常常在正則表達(dá)式中表示字符串的開(kāi)始。如果我們想指向所有以”http”開(kāi)頭的”href”屬性的錨點(diǎn)的話，我們就可以使用類似于上面的那段代碼啦。

注意啦，我們不需要搜索”http://”,完全沒(méi)必要，因?yàn)槲覀冞€要包含以https://開(kāi)頭的鏈接呢。

如果我們想為所有鏈接到圖片的鏈接定義樣式咋辦？這種情況下，我們得搜索字符串的結(jié)束了不是。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=”.jpg”]

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

又來(lái)了，我們還是使用正則表達(dá)式符號(hào)，$(dolor)，來(lái)作為字符串的結(jié)束標(biāo)記。這種情況下，我們就會(huì)搜索所有url以.jpg為結(jié)尾的錨點(diǎn)啦。記住記住這種情況下gif和png格式的圖片不會(huì)被選擇哦。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*=”foo”]

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

回顧最近一條，我們?nèi)绾文馨鞣N圖片類型:png,jpeg,jpg,gif?很容易想到，我們能通過(guò)多個(gè)選擇器來(lái)不是，像這樣：

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

不過(guò)，這樣很蛋疼，效率極低。另一個(gè)解決辦法是使用自定義屬性。如果我們加了一種自己的data-filetype屬性給每一個(gè)鏈接到圖片的錨點(diǎn)的話呢？

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

這樣關(guān)聯(lián)后，我們就能使用標(biāo)準(zhǔn)的屬性選擇器來(lái)指定這些鏈接啦。看下面：

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

兼容性

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~=”bar”]

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

這兒有個(gè)鮮為人知的特殊技巧，絕對(duì)讓你印象時(shí)刻。~(tilda)符，它可以幫助我們指向那些以空格隔開(kāi)多個(gè)值的屬性的元素（真拗口，這翻譯我自己都看不懂，水平問(wèn)題）

以我們第15條的自定義屬性為例，上面的代碼中我們創(chuàng)建了data-info屬性，這個(gè)屬性可以定義以空格分隔的多個(gè)值。這樣，這個(gè)鏈接本身就是個(gè)icon，并且指向的也是一個(gè)圖片鏈接，像下面這樣。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

有了這樣適當(dāng)?shù)臉?biāo)記，通過(guò)使用~屬性選擇器的技巧，我們就可以指向任何具有這兩種屬性的任何一種啦。

/* 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;
}

很棒，不是嗎？

兼容性

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

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

這種偽類只會(huì)匹配已經(jīng)被選中的單選元素。就是這么簡(jiǎn)單。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

before和after偽元素也很蛋疼。貌似人們每天都能找到或者發(fā)明一些新辦法來(lái)有效地使用它們。它們很容易控制選擇器周圍的內(nèi)容。

很多第一次使用是因?yàn)樗麄冃枰獙?duì)clearfix進(jìn)行改進(jìn)。

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

這個(gè)改進(jìn)使用了:after偽類元素來(lái)在元素后增加一個(gè)空間，然后清除它。這個(gè)牛X的技巧你應(yīng)該收藏到工具包里，特別是當(dāng)overflow:hidden方法無(wú)能為力的時(shí)候。

通過(guò)Css3選擇器的標(biāo)準(zhǔn)說(shuō)明書，你應(yīng)該有技巧地使用這些偽類語(yǔ)法——雙冒號(hào)::。不過(guò)為了兼容，瀏覽器會(huì)接受一個(gè)雙引號(hào)。

兼容性

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

div:hover { background: #e3e3e3; }

這個(gè)你必須懂。典型的官方形式的用戶觸發(fā)偽類。聽(tīng)起來(lái)會(huì)有點(diǎn)迷惑，不過(guò)實(shí)際上并非如此。想在用戶在某個(gè)元素上面懸停時(shí)定義個(gè)特別的樣式？這個(gè)屬性就是做這個(gè)的。

記住啦，較old版本的IE，只能在錨點(diǎn)標(biāo)簽后使用這個(gè)hover。

這個(gè)選擇器你用得最多的情況，估計(jì)可能就是在錨點(diǎn)的懸停時(shí)加個(gè)border-bottom啦。

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

小貼士：border-bottom:1px solid black;比text-decoration:underline;好看一點(diǎn)哦。（真的？）

兼容性

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

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

not偽類灰常有用。例如我要選擇所有的div，除了有id為container的。上面那個(gè)代碼片段就能完美的實(shí)現(xiàn)。

如果我想選擇除了p以外的所有元素，我可以這么做：

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

兼容性

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement

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

我們可以使用偽元素（以::為表示）來(lái)定義元素的樣式。例如第一行，第一個(gè)字符，記住啦，這種方法只能應(yīng)用于同級(jí)元素才有效。

偽元素由兩個(gè)冒號(hào)組成：::

指定p的第一個(gè)字符的樣式

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

這段代碼會(huì)找到所有段落，然后再?gòu)闹卸x這些段落的第一個(gè)字符。

這常常使用在仿報(bào)紙的文章首字母樣式。

**指定p的首行樣式 **

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

同樣，這個(gè)::first-line偽元素會(huì)像我們期望的那樣，只定義段落的第一行的樣式。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

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

想想那些沒(méi)法從元素堆中選擇元素的日子。nth-child偽類解決了這個(gè)問(wèn)題。

請(qǐng)注意nth-child接收整數(shù)和變量，不過(guò)不是從0開(kāi)始的，如果你想選定第二個(gè)li，使用li:nth-child(2).

我們甚至使用這個(gè)辦法來(lái)選擇任意的子元素。例如，我們可以用li:nth-child(4n)來(lái)完成4為倍數(shù)的所有元素的選擇。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

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

如果我有灰常多的li在ul里面，我只想要最后3個(gè)li怎么辦？不必使用li:nth-child(397),你可以使用nth-last-child偽類。

這種技巧和第六條幾乎一樣有效，不過(guò)兩者的不同之處在于它從結(jié)束開(kāi)始收集，用回溯的方式進(jìn)行。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

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

你應(yīng)該有很多時(shí)候想要元素類型來(lái)選擇元素而不是通過(guò)孩子。

想象一下標(biāo)記5個(gè)無(wú)序列表（UL）。如果你想定義第三個(gè)ul，并且沒(méi)有一個(gè)唯一的id來(lái)找到它，你就可以使用nth-of-type(3)偽類了。在上面這個(gè)代碼段中，只有第三個(gè)ul才會(huì)有黑色的邊框。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

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

沒(méi)錯(cuò)，我們一樣可以使用nth-last-of-type來(lái)從結(jié)束開(kāi)始回溯這個(gè)選擇器，來(lái)找到我們想要的元素

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

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

這個(gè)結(jié)構(gòu)的偽類讓我們可以選擇某個(gè)元素的第一個(gè)子孩子。你通常可以使用這個(gè)辦法來(lái)刪除第一個(gè)或者最后一個(gè)元素的邊框。

例如，你有一系列的rows，每一個(gè)都有border-top和border-bottom。這種情況下，第一行和最后一行看起來(lái)會(huì)灰常怪。

很多設(shè)計(jì)師會(huì)使用first和last類來(lái)彌補(bǔ)這個(gè)缺陷。相反，你可以使用這些偽類來(lái)解決這些問(wèn)題。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

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

與first-child相反，last-child會(huì)選擇父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。

例子：

我們建立一些例子來(lái)示范這些類的可能的用法。我們會(huì)建立一種風(fēng)格來(lái)展示。

標(biāo)記

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

沒(méi)啥特別的，就是一個(gè)簡(jiǎn)單的序列。

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;
}

這個(gè)樣式會(huì)設(shè)置一個(gè)背景，刪除瀏覽器默認(rèn)的ul的padding值，并定義邊框給每一個(gè)li來(lái)提供一點(diǎn)深度。

如上圖所示，唯一的問(wèn)題是最上面的邊框和最下面的邊框看起來(lái)有點(diǎn)兒怪。讓我們來(lái)使用:first-child和:last-child來(lái)解決這個(gè)問(wèn)題。

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

看上圖，解決了不是。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

是滴，IE8支持 first-child 不過(guò)不支持last-child。 ## 28. X:only-child ##

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

實(shí)話說(shuō)，你很可能會(huì)發(fā)現(xiàn)你不會(huì)經(jīng)常使用only-child偽類。盡管如此，它確實(shí)有用，你應(yīng)該需要它。

它可以幫助你選擇是父節(jié)點(diǎn)的獨(dú)生子（沒(méi)別的孩子啦）的元素。例如，使用上面的代碼，只有是div的唯一子孩子的p段落才會(huì)定義其顏色為red。

讓我們來(lái)假定下面的標(biāo)記。

<div>
   <p> My paragraph here. </p>
</div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

這樣，第二個(gè)div的p標(biāo)簽的內(nèi)容不會(huì)被選中。只有第一個(gè)div的p才會(huì)被選中。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

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

這種結(jié)構(gòu)的偽類有幾種灰常聰明的用法。它可以選定在其父節(jié)點(diǎn)內(nèi)沒(méi)有兄弟節(jié)點(diǎn)的元素。例如，我們可以選擇只有一個(gè)li作為其子孩子的ul。

首先，取決于你想怎樣完成這一目標(biāo)。你可以使用ul li，不過(guò)，這回選擇所有l(wèi)i元素。唯一的辦法是使用only-of-type。

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

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

first-of-type偽類可以讓你選擇該類型的第一個(gè)兄弟節(jié)點(diǎn)。

一個(gè)測(cè)試

為了更好地理解它，讓我們來(lái)測(cè)試一下啊。拷貝下面的標(biāo)記到你的編輯器。

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>
</div>

現(xiàn)在，別急著往下讀，試試看如何能只選擇’LIST ITEM 2’?如果你搞定了（或者放棄了），繼續(xù)讀。

解決辦法1

有很多辦法能搞定這個(gè)測(cè)試。我們回顧其中一小部分。以使用first-of-type開(kāi)始。

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

這個(gè)代碼段本質(zhì)上表示，“找到第一個(gè)無(wú)序列表，然后找到這里面的li，然后，繼續(xù)使用過(guò)濾器直到找到第二個(gè)li。

解決辦法2

另一個(gè)可行的辦法是毗鄰選擇器。

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

在這個(gè)方案中，我們找到p的臨近節(jié)點(diǎn)ul，然后找到ul的li的最后一個(gè)孩子。

解決辦法3

我們可以隨心所欲滴選擇這些選擇器。

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

這次，我們?nèi)〉降谝粋€(gè)ul，然后找到第一個(gè)元素，不過(guò)是從最后一個(gè)開(kāi)始數(shù)。哈哈。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

結(jié)論

如果你仍在為解決old瀏覽器的缺陷而糾結(jié)，如IE6。在使用這些新的選擇器方面，你仍然需要非常小心。不過(guò)，別因?yàn)檫@個(gè)阻礙了你對(duì)這些新玩意兒的學(xué)習(xí)，別虐待自己，確保關(guān)注這里的兼容性列表。

另一方面，你可以使用 Dean Edward’s excellent IE9.js script 來(lái)為舊瀏覽器提供新的選擇器支持。（COOL！）

其次，當(dāng)使用javascript庫(kù)時(shí)，如流行的jQuery，最好盡可能使用這些css3本身的選擇器而不是使用庫(kù)的自定義方法/選擇器，這能讓你的代碼更快哦，因?yàn)檫@些選擇器引擎本身就能被瀏覽器解析，而不是用這些庫(kù)的選擇器。

TML 中有用的字符實(shí)體

注釋：實(shí)體名稱對(duì)大小寫敏感！

顯示結(jié)果	描述	實(shí)體名稱	實(shí)體編號(hào)
 	空格	 	 
<	小于號(hào)	<	<
>	大于號(hào)	>	>
&	和號(hào)	&	&
"	引號(hào)	"	"
'	撇號(hào) 	' (IE不支持)	'
￠	分（cent）	￠	￠
￡	鎊（pound）	￡	￡
￥	元（yen）	￥	￥
	歐元（euro）		
§	小節(jié)	§	§
?	版權(quán)（copyright）	?	?
?	注冊(cè)商標(biāo)	?	?
?	商標(biāo)	?	?
×	乘號(hào)	×	×
÷	除號(hào)	÷	÷

ISO-8859-1 的較低部分（從 1 到 127 之間的代碼）是最初的 7 比特 ASCII。

ISO-8859-1 的較高部分（從 160 到 255 之間的代碼）全都有實(shí)體名稱。

這些符號(hào)中的大多數(shù)都可以在不進(jìn)行實(shí)體引用的情況下使用，但是實(shí)體名稱或?qū)嶓w編號(hào)為那些不容易通過(guò)鍵盤鍵入的符號(hào)提供了表達(dá)的方法。

注釋：實(shí)體名稱對(duì)大小寫敏感。

帶有實(shí)體名稱的 ASCII 實(shí)體

結(jié)果	描述	實(shí)體名稱	實(shí)體編號(hào)
"	quotation mark	"	"
'	apostrophe 	'	'
&	ampersand	&	&
<	less-than	<	<
>	greater-than	>	>

ISO 8859-1 符號(hào)實(shí)體

結(jié)果	描述	實(shí)體名稱	實(shí)體編號(hào)
 	non-breaking space	 	 
?	inverted exclamation mark	?	?
￠	cent	￠	￠
￡	pound	￡	￡
¤	currency	¤	¤
￥	yen	￥	￥
|	broken vertical bar	|	|
§	section	§	§
¨	spacing diaeresis	¨	¨
?	copyright	?	?
a	feminine ordinal indicator	a	a
?	angle quotation mark (left)	?	?
?	negation	?	?
-	soft hyphen	-	-
?	registered trademark	?	?
ˉ	spacing macron	ˉ	ˉ
°	degree	°	°
±	plus-or-minus 	±	±
2	superscript 2	2	2
3	superscript 3	3	3
′	spacing acute	′	′
μ	micro	μ	μ
?	paragraph	?	?
·	middle dot	·	·
?	spacing cedilla	?	?
1	superscript 1	1	1
o	masculine ordinal indicator	o	o
?	angle quotation mark (right)	?	?
?	fraction 1/4	?	?
?	fraction 1/2	?	?
?	fraction 3/4	?	?
?	inverted question mark	?	?
×	multiplication	×	×
÷	division	÷	÷

ISO 8859-1 字符實(shí)體

let str="jiajia2023_&^%^&";
console.log(str.match(/.+/));//匹配除換行符以外的任何單個(gè)字符

let url='http://www.baidu.com'
console.log(url.match(/https?:\/\/w+\.\w+\.\w+/));//['http://www.baidu.com', index: 0, input: 'http://www.baidu.com', groups: undefined]

// 不能匹配換行符
let aStr=`
sfjsjalsjkajjnjn
dgudjg
`;
console.log(aStr.match(/.+/));//['sfjsjalsjkajjnjn', index: 1, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
console.log(aStr.match(/.+/s));//s視為單行  ['\nsfjsjalsjkajjnjn\ndgudjg\n', index: 0, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]

let tel='010 - 4561237'
console.log(tel.match(/\d+ - \d{7}/));//['010 - 4561237', index: 0, input: '010 - 4561237', groups: undefined]
console.log(tel.match(/\d+\s-\s\d{7}/));//結(jié)果同上，可以用空格，也可以用\s

在線咨詢

上一篇：JavaWeb17-案例之a(chǎn)jax（Java真正的全
下一篇：最不“走心”小工具都在這里了，你到底看中了哪個(gè)？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

30個(gè)你必須記住的網(wǎng)頁(yè)CSS選擇符

1.*

2.#X

3. .X

4. X Y

5. X

6. X:visited and X:link

7. X + Y

8. X > Y

9. X ~ Y

10. X[title]

11. X[href=”foo”]

12. X[href*=”nettuts”]

13. X[href^=”http”]

14. X[href$=”.jpg”]

15. X[data-*=”foo”]

16. X[foo~=”bar”]

17. X:checked

18. X:after

19. X:hover

20. X:not(selector)

21. X::pseudoElement

22. X:nth-child(n)

23. X:nth-last-child(n)

24. X:nth-of-type(n)

25. X:nth-last-of-type(n)

26. X:first-child

27. X:last-child

29. X:only-of-type

30. X:first-of-type

結(jié)論

您的項(xiàng)目需求