CSS——选择器

css选择器

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

　　标签选择器:

 //E{attr:value;attr:value;}
  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.