css3的新特性选择器-------属性选择器

自己学css的时候比较乱，这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结

<div id="parent"> ???????<p>I‘m a example</p> ???????<p id="one">I‘m a example</p> ???????<p>I‘m a example</p> ???????<p>I‘m a example</p> ???????<p>I‘m a example</p> ???????<p>I‘m a example</p> ???????<p>I‘m a example</p> ???????<p name="shuai">I‘m a example</p> ???????<p>I‘m a example</p> ???????<div id="child"> ???????????<p>I‘m a example</p> ???????????????<p>I‘m a example</p> ???????????????<p>I‘m a example</p> ???????????????<p>I‘m a example</p> ???????<div> ???</div>

1.选择id为parent的div下所有的p元素

#parent p{
color:red;
font-size:24px;
}

2.选择id为parent的div下子元素p标签

#parent>p{
color:red;
font-size:24px;
}

3.选择id为one的p标签后相邻的p标签

#one+p{
color:red;
font-size:24px;
}

4.选择id为onep的p后面所有同级的p标签

#one~p{
color:red;
font-size:24px;
}

5.选择parent中有id的p标签

#parent p[id]{
color:red;
font-size:24px;
}

6.选择parent中name属性值是shuai的p标签

#parent p[name=shuai]{
color:red;
font-size:24px;
}

7.选择parent中id以o开头的p标签

#parent p[id^=o]{
color:red;
font-size:24px;
}

8.选择parent中id以o结尾的p标签

#parent p[id$=o]{
color:red;
font-size:24px;
}

9.选择parent中id包含o的p标签

#parent p[id*=o]{
color:red;
font-size:24px;
}

css3的新特性选择器-------属性选择器

原文地址：http://www.cnblogs.com/czy960731/p/7479822.html