CSS-選擇器

時間 2019-11-18

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

（一）選擇器的概念css

每一條css樣式聲明（定義）由兩部分組成，形式以下：html

選擇器{
    樣式;
}

在{}以前的部分就是「選擇器」，「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。css3

（二）選擇器的類型瀏覽器

1.標籤選擇器微信

標籤選擇器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例以下面代碼：dom

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的做用：爲p標籤設置12px字號，行間距設置1.6em的樣式。編輯器

2.類選擇器字體

類選擇器在css樣式編碼中是最經常使用到的，如右側代碼編輯器中的代碼:能夠實現爲「膽小如鼠」、「勇氣」字體設置爲紅色。網站

語法：編碼

.類選器名稱{css樣式代碼;}

注意：

一、英文圓點開頭

二、其中類選器名稱能夠任意起名（但不要起中文噢）

使用方法：

第一步：使用合適的標籤把要修飾的內容標記起來，以下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"爲標籤設置一個類，以下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，以下：

.stress{color:red;}/*類前面要加入一個英文圓點*/
例如：

類選擇器和標籤選擇器相比，類選擇器能夠在任何地方、任何一個標籤中使用，而標籤選擇器只能用於本標籤

  3.ID選擇器

在不少方面，ID選擇器都相似於類選擇符，但也有一些重要的區別：

一、爲標籤設置id="ID名稱"，而不是class="類名稱"。

二、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

4.子選擇器

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側代碼編輯器中的代碼：

.food>li{border:1px solid red;}:.food爲子類選擇器的名稱，li是指定做用於某個元素的第一代標籤中的<li>標籤。在body中具體應用爲：
<某個元素 class="food">...<span>...</span>...<li>....<span>...</span>...</li>   在這裏，li元素裏面的內容則改變樣式，其他的都不會改變。
例如：

.food>li{border:1px solid red;}/*添加邊框樣式（粗細爲1px，顏色爲紅色的實線）*/
.first>span{
border:1px
solid red;
}
</style>
</head>
<body>
<p class="first">三年級時，<span>我仍是一個<span>膽小如鼠</span>的小女孩</span>，上課歷來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>

包含(後代)選擇器

包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：

.first  span{color:red;}

請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你能夠理解爲做用於子元素的第一代後代。然後代選擇器是做用於全部子後代元素。後代選擇器經過空格來進行選擇，而子選擇器是經過「>」進行選擇。

總結：>做用於元素的第一代後代，空格做用於元素的全部後代。

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的做用是匹配html中全部標籤元素，以下使用下面代碼使用html中任意標籤元素字體顏色所有設置爲紅色：

* {color:red;}

在body中不須要書寫任何代碼

僞類和僞元素

僞類

因爲狀態的變化是非靜態的，因此元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它是基於文檔以外的抽象，因此叫僞類。在dom文檔中找不到。

語法

僞類的語法：

selector:pseudo-class {property:value;}

CSS類也可使用僞類：

selector.class:pseudo-class {property:value;}

anchor僞類

僞類和CSS類

:first - child僞類

定義和用法

:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器

例如：選擇屬於其父元素的首個子元素的每一個 <p> 元素

匹配第一個 <p> 元素

在這個例子中，p:first-child選取了一些p元素，這些p元素的特色是：其是其父類元素的第一個子元素。

匹配全部<p> 元素中的第一個 <i> 元素

匹配全部做爲第一個子元素的<p> 元素中的全部 <i> 元素

hover

關於僞類選擇符，到目前爲止，能夠兼容全部瀏鑑器的「僞類選擇符」就是 a 標籤上使用 :hover 了（其實僞類選擇符還有不少，尤爲是 css3 中，可是由於不能兼容全部瀏覽器，本教程只是講了這一種最經常使用的）。其實 :hover 能夠放在任意的標籤上，好比說 p:hover，可是它們的兼容性也是很很差的，因此如今比較經常使用的仍是 a:hover 的組合。

僞元素

CSS僞元素是用來添加一些選擇器的特殊效果。

CSS僞元素控制的內容和元素是沒有差異的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此稱爲僞元素。

語法

僞元素的語法：

selector:pseudo-element {property:value;}

CSS類也可使用僞元素：

selector.class:pseudo-element {property:value;}

:first-letter僞元素

"first-letter" 僞元素用於向文本的首行設置特殊樣式。

在下面的例子中，瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。

在下面的例子中，瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

注意："first-line" 僞元素只能用於塊級元素

:before 選擇器

定義和用法

:before 選擇器向選定的元素前插入內容。

:before是僞元素，而且它生成包含放置在元素中的內容以前的生成內容的僞元素。

使用content 屬性來指定要插入的內容。

默認狀況下，生成的僞元素是內聯的，但這可使用屬性顯示更改。

例二：

（http://www.mamicode.com/info-detail-1167116.html）

例如，咱們的元素p的內容爲

ello Worl

  <style type="text/css"></style>
    <title>Title</title>
</head>
<body>
<p>ello Worl</p>
</body>

即：

如今須要給 ello的前面加H Worl的後面加d

 <style type="text/css">
        p:before{
            content: 'H'; } p:after{ content: 'd'; } </style> <title>Title</title> </head> <body> <p>ello Worl</p>

結果爲：

咱們經過瀏覽器的審查元素看到的結果爲：

（這就是爲何我點擊小米或者別人網站的審查元素看到的那麼多的：：before ：：after。坑爹啊）

p標籤內部的內容的前面會被插入一個:before僞元素，該僞元素內包含的內容是"H"；而在p標籤內的內容後面會被插入一個:after僞元素，該元素包含的內容是"d"。做爲一隻合格的程序猴子，捍衛"Hello World"的完整存在是必要的。
既然筆記主要針對是:before和:after，那麼確定不會只是僅僅有以上的簡單介紹就完事。下面咱們看看日常該怎麼使用他們。

1.結合border寫個對話框的樣式。

本獸將上面這句話拆成2部分：結合border，寫個對話框的樣式。

<style type="text/css">
        .triangle{
            position: relative;
            width: 100px;
            height: 36px;
            border-radius: 5px; border: 1px solid black; background: rgba(245,245,245,1) } .triangle:before{ content: ""; display: block; width: 0px; height: 0px; position: absolute; top: 10px; left: -12px; border-top: 6px solid ; border-right:6px solid ; border-bottom: 6px solid; border-left: 6px solid; border-color: transparent black transparent transparent; } </style> <title>Title</title> </head> <body> <div class="triangle"></div>

經過以上代碼，咱們將會看見一個相似微信/QQ的對話框樣式,可是美中不足的是，在對話框的四周的邊框不是完整的，而是在對話框的突出三角形上是木有邊框的T_T瞬間冷場有木有，該怎麼辦呢？讓召喚:after穿着棉大衣來救場吧~

  <style>
    .test-div{
        position: relative;  /*平常相對定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必帶技能，重要性爲滿5顆星*/
        display: block;
        position: absolute;  /*平常絕對定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

好了，完整的一個對話框樣式呈如今眼前了，至於對話框的小三角形的方向，相信你們看了上上段對於border介紹的代碼也都知道該怎麼作了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位~ (本獸不喜歡貼圖片，體諒下額，須要的能夠拷貝代碼直接運行看效果，造輪子不只僅是造輪子，也能讓人加深印象，更好的理解)

僞類和僞元素的區別：
首先，閱讀 w3c 對二者的定義：
1.CSS 僞類用於向某些選擇器添加特殊的效果。向某些選擇器添加特殊效果
2.CSS 僞元素用於將特殊的效果添加到某些選擇器。將特殊的效果添加到某些選擇器
能夠明確兩點，第一二者都與選擇器相關，第二就是添加一些「特殊」的效果。這裏特殊指的是二者描述了其餘 css 沒法描述的東西。

區別

這裏用僞類 :first-child 和僞元素 :first-letter 來進行比較

二者的區別已經出來了。那就是：

僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。

總結
僞元素和僞類之因此這麼容易混淆，是由於他們的效果相似並且寫法相仿，但實際上 css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

CSS Code複製內容到剪貼板