css選擇器分類總結

技術小胖子發表於2017-11-02
原文網址 : https://flycode.co/archives/129890
CSS

css 選擇器分為以下幾種：

1，html元素選擇器

以html元素標籤名字顯示

1
2
3
4
5
6
7
body{
bgcolor:green;
}
 
p{
color: red;
}

2,id 選擇器


id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 “#” 來定義。在html主題中，id屬性值始終是唯一的

1
2
3
4
5
6
7
8
9
10
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>
 
#red{
color:red;
}
 
#green {
color:green;
}

3 ，class類選擇器

class選擇器，以點（.）顯示

1
2
3
4
5
6
7
<p class="center">
This paragraph will also be center-aligned.
</p>
 
.center {
text-align: center;
}

4，派生選擇器，（html，id,class屬性，都有派生選擇器）

1
2
3
4
5
6
7
8
9
10
li strong {
    font-style: italic;
    font-weight: normal;
  }
  
.center strong
{
    font-style: italic;
    font-weight: normal;
  }


5，組合選擇器（同時控制多個元素）

1
2
3
4
5
6
7
8
9
10
<h1>第一天</h1>
<h1>第二天</h1>
<h1>第三天</h1>
<h1>第四天</h1>
 
 
 h1,h2,h3,h4{
 font-size: 20px;
 color: red;
 }


6，偽元素選擇器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<a href="http://www.baidu.com">百度連線</a> 
 
正常連線的樣式
a:link{
color: red;
}
滑鼠放上去的樣式
a:hover{
color: blue;
}
選擇連線時的樣式
a:active{
color: yellow;
}
已經訪問過的樣式
a:visited{
color: green;
}


7，元素選擇器的優先順序


id>class>html





      本文轉自crazy_charles 51CTO部落格，原文連結：http://blog.51cto.com/douya/1840833，如需轉載請自行聯絡原作者







相關文章