第五章 选择器

选择器

标签选择器(之前学习的选择符的运用)\通配符选择器(*)

一.元素选择器(选中的是html标签)

1.当元素选择器遇上级联用法

什么叫做级联用法??比如 div.icon 选中div且是icon类的元素，注意中间没有空格(后代选择器)

注意事项：

(1).元素选择器不能重复使用；那就不能直接通过重复使用，提高选择器优先级，那就只能借用html\body，
这种普遍存在的元素，通过后代选择器提高优先级；或者用:not(其他不可能存在的标签提高优先级)

(2).级联使用的时候，元素选择器必须写在前面；通配符选择器也必须写在前面

2.当通配符选择器遇上级联用法

<style>
  *,*::before,*::after{
    margin:0;
    padding:0
  }
</style>

在上面的例子中，展示了一种清除浏览器默认边距的方案。
但是我想强调的是，在通配符级联的时候，通配符可以省略。在省略后上面的例子写作

<style>
  *,::before,::after{
    margin:0;
    padding:0;
  }
</style>

二.属性选择器

包括类选择器、id选择器、和属性选择器

可以认为类选择器和id选择器是一种特殊的属性选择器，毕竟可以写成[class=xxx]这种写法。但是id选择器的优先级很高、类选择器和属性选择器的优先级一样

2.1 id选择器选中的必须是一整个字符串

<div id="red box"></div>
<style>
  #red\0020box{
    ...code...
  }
</style>

2.2属性值直接匹配选择器

写法	注意事项
[attr]	不要用这种方式去匹配表单的checked属性，它不会动态更新，但是disabeled会
[attr=‘val’]	引号可以是双引号、单引号、甚至可以省略；不要匹配表单的value，它也不会在dom中更新
[attr~=“val”]	单词匹配，以空格为分隔符
[attr|=“val”]	可以认为是一种为 cs-box这种有前缀的属性设计的选择器，因为会选中以"val-"开头的元素

2.3属性值正则匹配选择器

写法

[attr^=“val”]
[attr$=“val”]
[attr*=“val”]
注意：在选择器内加上i\I,可以忽略大小写匹配