CSS ID選擇器與CLASS選擇器
在 CSS 中,選擇器是一種模式,用於選擇需要新增樣式的元素。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
三種基本的選擇器型別:標籤名選擇器、類選擇器、ID選擇器
具體語法如下:
1、標籤名選擇器,如:
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
即直接使用HTML標籤作為選擇器。2、類選擇器
類選擇器允許以一種獨立於文件元素的方式來指定樣式。
該選擇器可以單獨使用,也可以與其他元素結合使用。
提示:只有適當地標記文件後,才能使用這些選擇器,所以使用這兩種選擇器通常需要先做一些構想和計劃。
要應用樣式而不考慮具體設計的元素,最常用的方法就是使用類選擇器。
demo:
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
class 為 important 的所有元素都是粗體,而 class 為 warning 的所有元素為斜體,class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景。3、ID選擇器
小結:
那麼類選擇器與ID選擇器有啥區別呢?
ID 有高優先順序、唯一性的特點,特指「個體」。
相對於 ID,class 的優先順序比較適中,特指「特定群體」。
Class 的使用需要參考物件導向的抽象概念,把共有的屬性抽象出來。
ID是先找到結構/內容,再給它定義樣式;
Class是先定義好一種樣式,再套給多個結構/內容。
對於萬用字元:
由於不同瀏覽器對於同樣的頁面元素有不同的預設樣式,所以使用萬用字元星號(*)先將所有可能影響佈局的預設樣式統一一下是下十分必要的。而星號(*)匹配所有元素,省去了一個一個去寫元素名稱的麻煩。
不過,由於*會匹配所有的元素,這樣會影響網頁渲染的時間,因此很多人開始停止使用*萬用字元選擇器,取而代之的是,把所有需要統一設定的元素,放在一起,一塊設定。
測試程式碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
/*id選擇器*/
#rrrrr {
background-color: red;
}
/*類選擇器*/
*.important
{
color: aqua;
font-size:smaller;
}
/*類選擇器*/
*.important2222
{
font-size:larger;
background-color:black;
}
</style>
</head>
<body>
<!--可以同時使用多個類-->
<div class="important important2222">
1、人生最精彩的不是成功的那一瞬間,而是回頭看,那段漆黑看似沒有盡頭、苦苦摸索的過程。其實,我只是很在意,在意在我所在意的人的心裡,我,在哪個位置。
</div>
<h1>
1、人生最精彩的不是成功的那一瞬間,而是<span>3333333333</span>
</h1>
<p>
2、生活再不如人意,都要學會自我溫暖和慰藉,<br />
給自己多一點欣賞和鼓勵。生活就是童話,<br />
只要心存美好,結局就會是美好。<br />
</p>
<p id="rrrrr">
3、旁觀者的姓名永遠爬不到比賽的計分板上。
</p>
<p>
4、強烈的信仰會贏取堅強的人,然後又使他們更堅強。
</p>
<p>
5、只要我們能夢想的,我們就能實現。
</p>
<p>
6、每一個成功者都有一個開始。勇於開始,才能找到成功的路。
</p>
<p>
7、自棄者扶不起,自強者擊不倒。
</p>
<p>
8、莫找藉口失敗,只找理由成功。(不為失敗找理由,要為成功找方法)
</p>
<p>
9、昨晚多幾分鐘的準備,今天少幾小時的麻煩。
</p>
<p>
10、只要路是對的,就不怕路遠。
</p>
</body>
</html>
相關文章
- CSS class 類選擇器CSS
- CSS id選擇器CSS
- jQuery .class選擇器jQuery
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- CSS :valid 選擇器CSS
- CSS選擇器(5)——屬性選擇器CSS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- CSS 選擇器CSS
- CSS選擇器CSS
- CSS-選擇器6-兄弟選擇器CSS
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- CSS的引入與選擇器CSS
- css3 選擇器:屬性選擇器(五)CSSS3
- CSS-選擇器4-後代選擇器CSS
- 【CSS】【3】CSS選擇器CSS
- CSS系列:CSS選擇器CSS
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- css選擇器概述CSS
- CSS選擇器(一)CSS
- CSS 元素選擇器CSS
- CSS常用選擇器CSS
- CSS_選擇器CSS
- CSS的選擇器CSS
- CSS--選擇器CSS
- 【爬坑日記】.class.class選擇器的選擇問題
- CSS5-選擇器5-子元素選擇器CSS
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jQuery選擇器——基本選擇器jQuery
- CSS3選擇器02—CSS3部分選擇器CSSS3
- CSS 選擇器權值CSS
- css child選擇器妙用CSS
- [CSS]屬性選擇器CSS
- CSS 選擇器詳解CSS
- css 選擇器基礎CSS
- CSS E:enabled 選擇器CSS
- CSS E:focus 選擇器CSS
- CSS E,F 選擇器CSS