CSS 學習之一 選擇符
選擇符就是一系列的模式,只要頁面上有完全匹配這個模式的元素存在,樣式就會自動應用到該元素上。比如P,h1等就是一個簡單的元素。
Css語法:
一個簡單的選擇符包含一個通用的選擇符或是一個類型選擇符,它的后面跟有0個或者多個id選擇符、屬性選擇符或者偽類,三者順序可以任意。
一個選擇符可以由一個或者多個簡單的選擇符構成,中間用連接符相隔。
連接符可以是(空白,大于號> 加號+)
基本的選擇符:
1 通用的選擇符
id(#) 和 class(.) 選擇符
1 id 選擇符
id 是唯一的,可以唯一的標識一個元素。

只改變特定的元素。
class 選擇符
class屬性不要求唯一而id屬性要求唯一,多個元素可以共享一個class的值,而且多個元素可以設置多個class的值.

多重class
id 屬性是唯一的,class屬性是多對多的關系,同一個class也可賦給多個元素,一個html可以有多個相同的class。
上面這種css會對所有屬于class1或者class2的a元素進行作用,而如果只對同時對class1 class2的a元素有作用只能是下面的方式
是選擇class還是選擇id?
如果是給任意數量、任意類型的元素指定class屬性,而一個id屬性值只能賦值給唯一的元素。
Css語法:
一個簡單的選擇符包含一個通用的選擇符或是一個類型選擇符,它的后面跟有0個或者多個id選擇符、屬性選擇符或者偽類,三者順序可以任意。
一個選擇符可以由一個或者多個簡單的選擇符構成,中間用連接符相隔。
連接符可以是(空白,大于號> 加號+)
基本的選擇符:
1 通用的選擇符
*{
background-color:red;
}
* .title{
border:1px solid;
}
.title{
border:1px solid;
}
類型選擇符:(一般為html元素的名稱)background-color:red;
}
* .title{
border:1px solid;
}
.title{
border:1px solid;
}
h1{
font-size:9em;
color:#999FFF;
}
p{
margin:0;
border:2px solid;
}
組選擇:font-size:9em;
color:#999FFF;
}
p{
margin:0;
border:2px solid;
}
h1{
font-size:10px;
color:#999;
}
h2{
font-size:10px;
color:#999;
}
p#title{
font-size:10px;
color:#999;
}
#hutitle{
font-size:10px;
color:#999;
}
上面的可以用以下組選擇符來代替(中間用(,)來區分)
h1,h2,p#title,#hutitle{
font-size:10px;
color:#999;
}
font-size:10px;
color:#999;
}
h2{
font-size:10px;
color:#999;
}
p#title{
font-size:10px;
color:#999;
}
#hutitle{
font-size:10px;
color:#999;
}
上面的可以用以下組選擇符來代替(中間用(,)來區分)
h1,h2,p#title,#hutitle{
font-size:10px;
color:#999;
}
id(#) 和 class(.) 選擇符
1 id 選擇符
id 是唯一的,可以唯一的標識一個元素。
<h1 id="h1Title">開學通知</h1>
<p id="pContent">請同學們先到教務處來報道</p>
<h1 id="h2Title">開課通知</h1>
<p id="p2Content">好好學習Css</h2>
<p id="pContent">請同學們先到教務處來報道</p>
<h1 id="h2Title">開課通知</h1>
<p id="p2Content">好好學習Css</h2>
h1#h1title{
color:white;
background-color:silver;
}
p#pContent{
color:yellor;
background-color:maroon;
}
color:white;
background-color:silver;
}
p#pContent{
color:yellor;
background-color:maroon;
}

只改變特定的元素。
class 選擇符
class屬性不要求唯一而id屬性要求唯一,多個元素可以共享一個class的值,而且多個元素可以設置多個class的值.
<h1 id="h1Title" class="h1Title">開學通知</h1>
<p id="pContent" class="pContent">請同學們先到教務處來報道</p>
<h1 id="h2Title" class="h2Title">開課通知</h1>
<p id="p2Content" class="pContent">好好學習Css</h2>
<p >每天學習一章節,早點把css學會</h2>
<p id="pContent" class="pContent">請同學們先到教務處來報道</p>
<h1 id="h2Title" class="h2Title">開課通知</h1>
<p id="p2Content" class="pContent">好好學習Css</h2>
<p >每天學習一章節,早點把css學會</h2>
h1.h1Title{
color:white;
background-color:silver;
}
p.pContent{
color:yellor;
background-color:maroon;
}
h1.h2Title{
color:red;
}
color:white;
background-color:silver;
}
p.pContent{
color:yellor;
background-color:maroon;
}
h1.h2Title{
color:red;
}

多重class
id 屬性是唯一的,class屬性是多對多的關系,同一個class也可賦給多個元素,一個html可以有多個相同的class。
<a href="class1 class2" href="/">鏈接</a>
a.class1{
font-size:12px;
}
a.class2{
color:red;
}
font-size:12px;
}
a.class2{
color:red;
}
上面這種css會對所有屬于class1或者class2的a元素進行作用,而如果只對同時對class1 class2的a元素有作用只能是下面的方式
a.class1.class2{
color:red;
}
或者
a.class2.class1{
color:red;
}
color:red;
}
或者
a.class2.class1{
color:red;
}
是選擇class還是選擇id?
如果是給任意數量、任意類型的元素指定class屬性,而一個id屬性值只能賦值給唯一的元素。
posted on 2010-03-10 17:23 草原上的駱駝 閱讀(244) 評論(0) 編輯 收藏 所屬分類: CSS