CSS中的那些選擇器

CSS中的那些選擇器

在CSS中，選擇器是一種模式，用於選擇需要添加樣式的元素

1.類選擇器 .class

 .mydiv{
	background-color:yellow;
  }
  <div class="mydiv">星夜最帥啦</div>

2.id選擇器 #id

#myid{
	font-size:150%;
	color:red;  //設置字體的顏色
  }
  <div id="myid">星夜最帥啦</div>

3.element選擇器 p

  p{     //選取所有的p標籤
    font-size:150%;
  } 
  <p>星夜最帥啦</p>

4.*選擇器

  *{    //選擇所有的元素
	background-color:yellow;
  }	
  div *{   //選取<div>元素內部的所有元素
	background-color:red;
  }

5.組合選擇器

div,p {}  //選擇所有<div>元素和所有<p>元素

div p{}  //選擇<div>元素內部的所有<p>元素

div>p{}  //選擇父元素爲<div>元素的所有<p>元素

div+p{}  //選擇緊接在<div>元素之後的所有<p>元素

6.屬性選擇器

  [attribute] 用於選取帶有指定屬性的元素

 eg:

 
  [target]{ background-color:yellow;}
	  <=>  a[target]{background-color:yellow;}  //a與[target]之間不能加空格
	  <a href="http://www.baidu.com" target="_blank">百度</a>
 
  [attribute=value] 用於選取帶有指定屬性和值的元素

eg:

 
  a[target=_blank] { background-color:yellow;}
	//爲target="_blank"的<a>元素設置樣式
 
  [attribute~=value] 用於選取屬性值中包含指定詞彙的元素

eg:


  [title~=flower]{ background-color:yellow;}
	//選擇title屬性包含單詞"flower"的元素，value值必須是整個單詞
 
  [attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素

eg:

 
[class|=top]{ background-color:yellow;}
	<div class="top">星夜最帥啦</div>    
	<div class="top-text">星夜最帥啦!!</div>  
	<div class="toptext">星夜最帥啦!!!</div>
	<!-- 前兩個樣式會改變，第三個樣式不會改變 -->

注：value值必須是整個單詞，如class=“top”，或者後面跟着連字符，如class=“top-text”

7.鏈接動態選擇器

  :link 用於選取未被訪問的鏈接

  :visited  用於選取已訪問的鏈接

  :active 用於選擇活動鏈接

  :hover 用於選擇鼠標指針浮動在上面的元素，可用於所有元素，不只是鏈接

eg:

 
a:link    {color:blue;}
a:visited {color:blue;}
a:active  {color:yellow;}
a:hover   {color:red;}

8.:focus 選擇器 用於選取獲得焦點的元素

eg:


input:focus{ background-color:yellow;} //選擇獲得焦點的input元素

9.:first-letter選擇器 用於選取指定選擇器的首字母

  eg:

 <style> 
	#fd:first-letter{     //id選擇器與:first-letter之間沒有空格
		color:red;
		font-size:200%;
	}
  </style>
  <div id="fd">星夜最帥啦</div>   
  <!-- 首字母(中文是第一個漢字)會變紅並且字體會變大，其餘字母樣式不變 -->

10.：first-line 用於選取指定選擇器的首行

 eg:


 <style>
	.p:first-line{
		background-color:red;
		font-size:150%;
	}
  </style>
  <div class="p">
	星夜最帥啦
  </div>
  <!-- 只選擇在顯示時出現的一行字符，縮放瀏覽器會使選擇的字符不一樣 -->

11.:first-child 用於選取屬於其父元素的首個子元素的指定選擇器

eg:


p:first-child i{background:yellow;}
//選擇每個<p>中的每個<i>元素並設置其樣式，其中<p>元素是其父元素的第一個子元素

12.插入選擇器

  :before  選擇器在被選元素的內容**前面**插入內容，可以使用content屬性來指定要插入的內容
  :after   選擇器在被選元素的內容**後面**插入內容，可以使用content屬性來指定要插入的內容

eg:


p:before{ content:"星夜：-";color:red;}
p:after{content:"星夜最帥啦!!!";font-size:80%;}

13.:lang選擇器 用於選取帶有以指定值開頭的lang屬性的元素

p:lang(en){background:yellow;}

注：該值必須是整個單詞，即可是單獨的，比如 lang=“en”，也可後跟連接符，比如 lang=“en-us”

14.element1~element2選擇器 選擇element1之後出現的所有element2

element1和element2必須擁有同一個父元素

eg:


p~ul{background:#ff0000;}
	
	<h4>星夜最帥啦<h4>
	<ul>
		<li>敲帥</li>
		<li>敲甜</li>
	</ul>
	<div>
		<ul>
			<li>敲可愛</li>
			<li>還耐操</li>
		</ul>
	</div>
	<!-- 第一段ul的背景是紅色, 第二段ul沒有樣式-->

注：兩個元素必須擁有相同的父元素，但是element2不必直接緊隨element1

注意：

選擇器之間什麼時候加空格，什麼時候不加?

當多個選擇器表示在同一個元素時，之間不需要加空格；當表示不同的元素時之間需要加空格。

 eg:
 
 
 #div .dd{font-size:150%;}   //“#div”代表的是<div>元素，“.dd”代表的是<p>元素，之間需要加空格 	p#pp.dd{color:red;}  //"p","#pp",".dd"都表示<p>元素，之間不需要加空格

	<div id="div" class="mydiv">
		<p id="pp" class="dd">星夜最帥啦/p>
	</div>