1. 程式人生 > >css3的新特性選擇器-------屬性選擇器

css3的新特性選擇器-------屬性選擇器

屬性選擇器 cnblogs pan 一個 ont log color spa 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的新特性選擇器-------屬性選擇器