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

标签：font   one   开头   属性选择器   总结   parent   标签   pre   css   

自己学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的新特性选择器-------属性选择器

标签：font   one   开头   属性选择器   总结   parent   标签   pre   css   

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