码迷,mamicode.com
首页 > Web开发 > 详细

CSS——选择器

时间:2016-04-26 15:38:50      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

css选择器

  css选择器可分为:标签(元素)选择器,ID选择器,类选择器,属性选择器,后代选择器,子代选择器,相邻兄弟选择器和兄弟选择器....

  标签选择器:

1 //E{attr:value;attr:value;}
2  p{display:inline;color:#eee;

  ID选择器:

//E#ID{attr:value;attr:value;}
//html
<p id="pro">hello css</p>
//css
p#pro{
   color:#eee;   
}

  ID选择器不能使用空格符,也不能多ID使用

  类选择器:

//E.CLASS{attr:value;attr:value;}
//html
<p class="pro">hello css</p>
//css
p.pro{
   color:#eee;   
}

  类选择器之间可以使用空格符,如

<p class="pro la">hello css</p>

 此时p元素会同时应用.pro与.la的样式,若两者的样式存在重叠,则后者覆盖掉前者。

 属性选择器:

//html
<input type="text" />
//css
input[type="text"]{
 text-align:center;   
}
p[foo="bar"] 对p元素属性foo值为bar的p应用样式
p[foo^="bar"] 对p元素属性foo值以bar开头的应用样式
p[foo$="bar"] 以bar结尾
p[foo*="bar"] 包含bar的

 

  后代选择器:

  

p span{
 color:red;   
}

  选择p元素中后代为span的应用样式 ,既然是后代,则存在隔代关系,而不需要是直系子代。

 子元素选择器: 

  其与后代选择器的区别是:只能选择直系子代应用样式。

  

 相邻兄弟选择器:

p+div{
}

  只能选择紧邻p元素的div

 兄弟选择器:

p~div{}

  选择与p元素具有相同父元素的在p元素之后的div.

 

 

 

 

 

 

 

 

  

CSS——选择器

标签:

原文地址:http://www.cnblogs.com/yuzheCyril/p/5435104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!