CSS3核心

复杂选择器

兄弟选择器

• 兄弟元素：具备相同父元素的平级元素之间称为兄弟元素
• 兄弟选择器只能找弟弟，不能找哥哥。只能往后找不能往前找

<div id="div1"></div>
<p class="p2"></p>
<div id="div3"></div>
<b></b>

<style>
/***********************1. 相邻兄弟选择器**********************/
/**选择器+选择器：获取紧紧挨在某元素后的兄弟元素（可以用来排除掉第一个元素）**/
div+p{
      }

/***********************2. 通用兄弟选择器**********************/
/**选择器~选择器：获取元素后面所有符合条件的元素**/
div~p{
      }
</style>

属性选择器

<style>
/***********************3. 属性选择器**********************/
/**[属性=""]：允许通过元素所附带的属性及其值来匹配元素，很精准**/
</style>

• attr 表示任意属性
• [attr]{ }：匹配有attr这个属性的元素
• [attr1][attr2]{ }：匹配同时拥有attr1和attr2属性的元素
• [attr=value]{ }：匹配拥有attr并且值为value的元素
• elem[attr=value]{ }：匹配拥有attr并且值为value的elem元素
• elem[attr1][attr2]{ }
• 模糊属性值查询：
  1. attr ^= value：匹配attr值以value开头的元素
  2. attr $= value：匹配attr值以value结尾的元素
  3. attr *= value：匹配attr值中含有value的元素
  4. attr ~=