Css中常用的四種選擇器

1、類選擇器（class選擇器）

      基本使用：

      .類選擇器{

            屬性名: 屬性值;

            ...

      }

      案例：

/*類選擇器*/
.s1{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}

2、id選擇器

      基本使用：

      #id選擇器{

             屬性名: 屬性值;

             ...

      }

      案例：

/*id選擇器的使用*/
#id1{
	background-color: silver;
	font-size: 40px;
}
 

3、html元素選擇器

      某個html元素{

             屬性名: 屬性值;

             ...

      }

      案例：

a:link{
	color: black;
	text-decoration: none;
	font-size: 24px;
}
a:visited{
	color: red;
}
a:hover{
	color: green;
	text-decoration: underline;
	font-size: 40px;
}

/*對同一種html元素分類*/
p.cls1{
	color:blue;
	font-size:30px;
}
p.cls2{
	color:red;
	font-size:20px;
}
 

（1）預設樣式是黑色，24px，沒有下劃線；

（2）當滑鼠移動到超連結時，自動出現下劃線；

（3）點選後，超連結變成紅色。

<p class="cls1">hello,world!hello,world!hello,world!</p>
<p class="cls2">hello,html!hello,html!hello,html!</p>

4、萬用字元選擇器

該選擇器可以用到所有的html元素，但是其優先權最低

      *{

            屬性名: 

            ...

      }

      案例：

/*萬用字元選擇器*/
*{
	/*margin-top:0px;
	margin-left:0px;*/
	/*margin: 10px 30px 40px 1px;*/
	/*margin 可以寫一個值，（上右下左（順時針））如果是兩個值（上下，左右）
	如果是是三個值（上，左右，下）*/
	margin:0px;
	padding:0px;
}

四個選擇器的優先權如下：

Id選擇器 > class選擇器 > html選擇器 > 萬用字元選擇器

選擇器的細節問題！！！

1、父子選擇器的使用

/*父子選擇器*/
/*對id選擇器為#id1下的span元素定義樣式*/
#id1 span{
	color: red;
	font-style:italic;
}
/*對id選擇器為#id1下的span元素下的span元素定義樣式*/
#id1 span span{
	color:green;
}
#id1 span span a{
	color:blue;
}

通過上面總結：

（1）父子選擇器可以有多級（但是在實際開發中，建議不要超過三層）；

（2）父子選擇器有嚴格的層級關係；

（3）父子選擇器不侷限於什麼型別選擇器，比如

#id span span

s1 #id span

div #id s2

2、一個元素可以同時有id選擇器和類選擇器（但是id選擇器不可以有多個）

案例：

<span class="s1" id="tid">TestId</span>

使用方法如下：

<元素 class=”類選擇器1 類選擇器2”>內容</元素>

案例：

/*類選擇器1*/
.s1{
	background-color: pink;
	font-weight: bold;
	font-size: 16px;
	color: black;
}
/*再配置一個類選擇器2*/
.cls1{
	font-style:italic;
	text-decoration:underline;
}

（注：這裡需要注意的是，當同時使用多個類選擇器且類選擇器中的樣式發生衝突時，以CSS檔案中最尾的類選擇器的樣式為準，不依賴於html檔案中的類選擇器的放置順序。）

4、我們可以把某個CSS檔案中的選擇器共有的部分，獨立出來寫成一份。比如：

/*招生廣告*/
.ad_stu{
	width:136px;
	height:196px;
	background-color:#FC7E8C;
	margin:5px 0 0 6px;
	float:left;
}

/*廣告2*/
.ad_2{
	background:#7CF574;
	height:196px;
	width:457px;
	float:left;
	margin:5px 0 0 6px;
}

/*房地產廣告*/
.ad_house{
	background:#7CF574;
	height:196px;
	width:152px;
	float:left;
	margin:5px 0 0 6px;
}

//上面的CSS可以寫成

/*招生廣告*/
.ad_stu{
	width:136px;
	background-color:#FC7E8C;
}

/*廣告2*/
.ad_2{
	background:#7CF574;
	height:196px;
	width:457px;
}

/*房地產廣告*/
.ad_house{
	background:#7CF574;
	height:196px;
	width:152px;
}

.ad_stu, .ad_2, .ad_house{
	height:196px;
	margin:5px 0 0 6px;
	float:left;
}

5、CSS檔案本身也會被瀏覽器從伺服器下載到本地，才能顯示效果。