今天想到css相关的知识严重不足,整理一下之前模糊的知识点,留个备份吧。
一、相邻选择符+
<style>
p+p{color:#f00;}
</style>
-----------HTML----------------
<div class="test">
<h3>这是一个标题</h3>
<p>我是相邻的</p>
<p>我是相邻的</p>
<h3>这是一个标题</h3>
<p>我不相邻</p>
<h3>这是一个标题</h3>
<p>我是相邻的</p>
<p>我是相邻的</p>
</div>
二、兄弟选择符~
<style>
p~p{color:#f00;}
</style>
三、属性选择符
<style>
a[class="haha"]{color:#f00;}
</style>
a[class~="haha"]{color:#f00;}
选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
li[class^="a"]{color:#f00;} 以haha开头的
E[att$="val"]{ sRules }
选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]{ sRules }
选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"]{ sRules }
选择具有att属性且属性值为一用连接符分隔的字符串,并以val开头的E元素。