首頁 > 文章 > web前端 > CSS的選擇器有哪些常見問題

CSS的選擇器有哪些常見問題

php中世界最好的语言原創: 2018-03-08 15:51:312801瀏覽

這次帶給大家CSS的選擇器有哪些常見問題，處理CSS的選擇器常見問題的注意事項有哪些，以下就是實戰案例，一起來看一下。

選擇器常見的有哪幾種？
1.標籤選擇器
p{ }/選擇標籤名為p的元素/
2.類別選擇器
.box{ }/選擇class名為box的元素/
3.ID選擇器
#header{ }/選擇id名為header的元素/
1.4通配符選擇器
{ }/選擇頁面中所有的元素/
1.5選擇器前綴
div.bd{}/選取class名為bd且標籤為div的元素/
1.6屬性選擇器
[disabled] {}/選擇所有帶有屬性disabled的元素*/

選擇器的優先權是怎樣的?
！ important>內嵌樣式>ID 選擇器>偽類>屬性選擇器>類別選擇器>元素(類型)選擇器>通用選擇器（*）>瀏覽器自訂

class 和id 的使用場景?
id根據提供的唯一id號，快速取得標籤物件。 class把一些特定樣式放到一個class類別中，需要這個樣式的標籤，可以在新增這類。

使用CSS選擇器時為什麼要劃定適當的命名空間？
為了防止樣式污染。

以下選擇器分別是什麼意思?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

列出你知道的偽類選擇器
:active 將樣式啟動為被啟動的元素。
:focus 為擁有鍵盤輸入焦點的元素新增樣式。
:hover 當滑鼠懸浮在元素上方時，向元素新增樣式。
:link 為未被存取的連結新增樣式。
:visited 在已被造訪的連結中新增樣式。
:first-child 為元素的第一個子元素新增樣式。
:lang 為具有指定 lang 屬性的元素新增樣式。

執行以下程式碼，解析下輸出樣式的原因。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

:first-child和:first-of-type的作用和區別?
:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
:first-of-type 符合的是某父元素下相同型別子元素中的第一個。

如果遇到一個屬性想知道相容性，在哪裡查看?
在caniuse.com中查看。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！