草青久在线视频,日韩黄色视频在线播放,色五月天激情偷拍

CSS選擇器的作用

CSS 選擇器用于定位我們想要給予樣式的 HTML 元素。

CSS選擇器的類型

CSS選擇器大致可以分為五類，分別是基礎選擇器、組合選擇器、屬性選擇器、偽類選擇器、偽元素選擇器。

基礎選擇器

選擇器	含義
*	通用元素選擇器，匹配頁面任何元素（很少使用）
#id	id選擇器，匹配特定id的元素
.class	類選擇器，匹配class包含（不等于）特定類的元素
element	標簽選擇器

以下是具體使用事例：

通用選擇器

*{
border:1px soild red;
}

這一段代碼的意思是給頁面上所有元素添加一個顏色為紅色，粗細為1像素的實線邊框。

id選擇器

#ct{
 font-size :30px;
}

這一段代碼的意思是將id為ct的元素的字體大小設置為30像素。

id選擇器定位到頁面上某一元素，如果這個元素在頁面上獨一無二的，我們會給予這個元素一個id.

類選擇器

<ul>                                                                                                                   html
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗臉</li>
</ul>
.first {
  font-weight: bold;
}

                                                                                                                        css
.done {
  text-decoration: line-through;
}

這一段代碼的含義是給含有done這一類標簽的元素添加下劃線。

class選擇器定位到頁面上某一類元素，頁面上的元素只要有同樣的特征，我們都能夠給它加同樣的class。

標簽選擇器

p {
  color: red;
}

div {
  color: blue;
}

這一段代碼的意思是將含有p和div標簽的元素的字體顏色分別設置為紅色和藍色。

組合選擇器

選擇器	含義
E,F	多元素選擇器，用,分隔，同時匹配元素E或元素F
E F	后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F	子元素選擇器，用>分隔，匹配E元素的所有直接子元素
E+F	直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
E~F	普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2	id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
element#id	id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素

以上表格中E和F分別表示不同的選擇器
以下是具體使用事例：

多元素選擇器選擇器

.p1,.p2{
     color: red;
}

這段代碼的意思是p1和p2這兩個類的元素的字體顏色同時設置為紅色。

后代選擇器

后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>
  </div>
  <p class="p2">p2</p>
</body>
</html>

#ct .p2{
  color:red;
}

此種情況下類為p2的元素的不止一個，這時為了避免對第二個p2類元素造成影響，我們可以選擇后代選擇器，選擇ct這一id下所有類標簽為p2的元素(不管被嵌套多少層）并設置這一類元素的字體顏色為紅色，同時也不會影響同一頁面下另外一個p2元素的字體顏色。

子元素選擇器

子元素選擇器，用>分隔，匹配E元素的所有直接子元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>
  </div>
  <p class="p2">p2</p>
</body>
</html>

#ct >.p2{
  color:red;
}

此時將設置id為ct這一div下所有的類標簽為p2的子元素字體顏色為紅色。
后代選擇器與子元素選擇器的區(qū)別：
我們將上述子元素選擇器的使用例子稍微做一下改變。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>
  </div>
  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
</body>
</html>

#ct >.p2{
  color:red;
}

此時將設置id為ct這一div下所有的類標簽為p2的子元素字體顏色為紅色，但除去第一個類標簽為p2的元素字體顏色改變外，另外一個嵌套在p3下的類標簽同樣為p2的span元素的字體顏色并不會變?yōu)榧t色，而如果使用后代選擇器，后代選擇器將會無視嵌套情況，并將id為ct這一div下所有的類標簽為p2的元素字體顏色都設置為紅色。

直接相臨選擇器和普通相鄰選擇器

直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
兩者的區(qū)別在于，直接相鄰選擇器只會選擇該元素之后的一個統(tǒng)計元素，而普通相鄰選擇器將會選擇該元素之后所有同級元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>
  </div>
  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
  <p>p4</p>
</body>
</html>

.p1+p{
  color:red;
}

此時類標簽p的元素直接相鄰的一個同級元素p的字體顏色會設置為紅色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>
  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
  <p>p4</p>
  </div>
</body>
</html>

.p1~p{
  color:red;
}

此時類標簽p的元素所有相鄰的一個同級p標簽元素的字體顏色會設置為紅色，包括p3和p4。

.class1.class2

這種選擇器下兩種元素之間沒有空格，選擇既有.class1又有.class2的元素、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>

  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
  <p>p4</p>
  </div>
<h2 class="p2">p2</h2>
</body>
</html>

h2.p2{
  color:red;
}

此時選擇的是既有h2又有p2標簽的元素，并將其顏色設置為紅色。

element#id

這種選擇器一般直接找對應id的元素，因而我們一般不使用

屬性選擇器

選擇器	含義
E[attr]	匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr = value]	匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr ~= value]	匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
E[attr ^= value]	匹配屬性attr的值以value開頭的元素
E[attr $= value]	匹配屬性attr的值以value結尾的元素
E[attr *= value]	匹配屬性attr的值包含value的元素

這類選擇器比較容易理解，我們以E[attr = value]這種選擇器為例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>

  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
  <p>p4</p>
  </div>
<h2 class="p2">p2</h2>
<input type="text">
<input type="password">
</body>
</html>

h2.p2{
  color:red;
}
input[type=password]{
width:100px
}

此時屬性為password的input元素的寬度設置為100像素。

偽類選擇器

選擇器	含義
E:first-child	匹配作為長子（第一個子女）的元素E
E:link	匹配所有未被點擊的鏈接
E:visited	匹配所有已被點擊的鏈接
E:active	匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover	匹配鼠標懸停其上的E元素
E:focus	匹配獲得當前焦點的E元素
E:lang(c)	匹配lang屬性等于c的E元素
E:enabled	匹配表單中可用的元素
E:disabled	匹配表單中禁用的元素
E:checked	匹配表單中被選中的radio或checkbox元素
E::selection	匹配用戶當前選中的元素
E:root	匹配文檔的根元素，對于HTML文檔，就是HTML元素

偽類選擇器可以直觀地理解為代表一個元素的另外一種狀態(tài)。
例如：
頁面中有一個a鏈接，我們將其顏色設置為紅色，如果此時我們需要設置將鼠標放置在該a鏈接時，a鏈接的顏色要設置為藍色，但放置鼠標是一種狀態(tài)而不是元素，這時我們就需要使用偽類選擇器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>標題</h1>
  <div id = "ct">
    <p class="p1">ct -p1</p>
    <p class="p2">ct-p2</p>

  <p class="p3">p3
    <span class="p2">span-p2</span>
</p>
  <p>p4</p>
  </div>
<h2 class="p2">p2</h2>
<input type="text">
<input type="password">
<a href="#">饑人谷</a>
</body>
</html>

h2.p2{
  color:red;
}
input[type=password]{
width:100px
}
a{
 color:red;
}
a:hover{
 color:blue;
}/*此時選中a鏈接并設置為藍色，另外由于選擇器的權重問題，此時該樣式覆蓋了原a鏈接樣式*/

/*使用css一般不直接使用標簽選擇器*/

a鏈接上常見的偽類選擇器

a鏈接上常見的偽類選擇器包括E:link、E:visited、E:active、E:hover，我們在使用的時候需要主要它們的先后順序。
例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<a href="#">饑人谷</a>
</body>
</html>

a{
  color:red;
}
a:hover{
  color:blue;
}
a:active{
  color:yellow;
}
a:visited{
  color:purple;
}

頁面上有一個a鏈接，我們將其默認顏色設置為紅色，當鼠標放置在其上時顏色變?yōu)樗{色，點擊后變?yōu)辄S色，點擊完后變?yōu)樽仙５斘覀凕c擊過一次后，無論我們是不點擊還是將鼠標放置在其上面時，其顏色依然為紫色，此時如果我們使用審查元素功能就能發(fā)現(xiàn)該元素的的樣式為a:visited{color:purple;}，無論我們如何刷新頁面都沒有再變回紅色，可見此時發(fā)生了樣式覆蓋，a:visited{color:purple;}這一樣式覆蓋了其他幾個樣式。

image.png

這與我們設想的場景不一樣，我們想要的場景是該a鏈接默認顏色為紅色，當鼠標放置在其上時顏色變?yōu)樗{色，點擊后變?yōu)辄S色，點擊完后變?yōu)樽仙?，點擊完該鏈接之后依然能夠重復上述操作，那我們可以通過改變該樣式放置的位置來避免這種問題的產生。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<a href="#">饑人谷</a>
</body>
</html>

a{
  color:red;
}
a:visited{
  color:purple;
}
a:hover{
  color:blue;
}
a:active{
  color:yellow;
}

只要將樣式改成這種形式就不會出現(xiàn)上述的問題了，此時不進行任何操作，a鏈接的顏色為紅色（其他三個樣式不生效），鼠標放置在其上時a鏈接顏色變?yōu)樗{色（默認樣式和其本身生效），點擊時變?yōu)辄S色（放置樣式和點擊樣式同時生效），點擊后變?yōu)樽仙ǔJ樣式外其他三個樣式生效）。
以上就是a鏈接偽類選擇器的優(yōu)先級順序。

其他偽類選擇器

我們以E:focus這一選擇器為例，如果頁面上有兩個輸入框，當我們點擊其中一個輸入框，輸入框光標閃爍進入輸入狀態(tài)，此時即為進入focus狀態(tài)，這時E:focus選擇器就能選中input輸入框。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS選擇器

CSS選擇器

CSS選擇器的作用

CSS選擇器的類型

基礎選擇器

通用選擇器

id選擇器

類選擇器

標簽選擇器

組合選擇器

多元素選擇器選擇器

后代選擇器

子元素選擇器

直接相臨選擇器和普通相鄰選擇器

.class1.class2

element#id

屬性選擇器

偽類選擇器

a鏈接上常見的偽類選擇器

其他偽類選擇器

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS選擇器

CSS選擇器的作用

CSS選擇器的類型

基礎選擇器

通用選擇器

id選擇器

類選擇器

標簽選擇器

組合選擇器

多元素選擇器選擇器

后代選擇器

子元素選擇器

直接相臨選擇器和普通相鄰選擇器

.class1.class2

element#id

屬性選擇器

偽類選擇器

a鏈接上常見的偽類選擇器

其他偽類選擇器

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av