今天想到css相关的知识严重不足,整理一下之前模糊的知识点,留个备份吧。

  1. 一、相邻选择符+

  2. <style>

  3. p+p{color:#f00;}

  4. </style>

  5. -----------HTML----------------

  6. <div class="test">

  7. <h3>这是一个标题</h3>

  8. <p>我是相邻的</p>

  9. <p>我是相邻的</p>

  10. <h3>这是一个标题</h3>

  11. <p>我不相邻</p>

  12. <h3>这是一个标题</h3>

  13. <p>我是相邻的</p>

  14. <p>我是相邻的</p>

  15. </div>

  16. css整理(1)_选择符

  17. 二、兄弟选择符~

  18. <style>

  19. p~p{color:#f00;}

  20. </style>

  21. css整理(1)_选择符_02

  22. 三、属性选择符

  23. <style>

  24. a[class="haha"]{color:#f00;}

  25. </style>

  26. a[class~="haha"]{color:#f00;}

  27. 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

  28. li[class^="a"]{color:#f00;} 以haha开头的

  29. E[att$="val"]{ sRules }

  30. 选择具有att属性且属性值为以val结尾的字符串的E元素。

  31. E[att*="val"]{ sRules }

  32. 选择具有att属性且属性值为包含val的字符串的E元素。

  33. E[att|="val"]{ sRules }

  34. 选择具有att属性且属性值为一用连接符分隔的字符串,并以val开头的E元素。

    css整理(1)_选择符_03