css3的新特性選擇器-------屬性選擇器
阿新 • • 發佈:2017-09-05
屬性選擇器 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的新特性選擇器-------屬性選擇器