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>