web前端学习笔记——选择器

选择器：选择要添加样式的 HTML 标签的一种方法、模式

基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。

高级选择器：后代选择器、交集选择器、并集选择器。

• 基础选择器

  1. 标签选择器

     通过标签名去选择标签元素。

     书写方式：标签名。

     选择范围：选中的是HTML文件中所有的同名标签。

     注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中

     缺点：只能全局全中，不能对局部的设置样式

     p {}
     

  2. id选择器

     通过标签上的 id 属性去选择标签。

     书写方式：#id 属性值

     选择范围：只能选中一个标签。

     id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。

     注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置

     缺点：只能实现单选，不能多选

     #box{}
     <div id="box"></box>
     

  3. 类选择器

     通过标签的 class 属性去选择标签。

     书写方式：.class属性值

     选择范围：是页面中所有 class 属性值相同的标签。

     class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格 区分大小写。class 属性值可以与其他的class相同。

     优点：

     1. 可以给多个不同的标签设置相同的样式

     2. 一个标签也可以设置多个class值，用空格隔开，就可以将公共样式和单独样式分开

        .demo{}
        .ps{}
        <div class="demo ps"></div>
        

     原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这 些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添 加给需要的标签即可。

  4. 通配符选择器

     通过一个特殊符号选择页面内所有的标签。

     书写方式：*

     选择范围：包含html标签在内的所有标签。

     优点：可以实现全选，简化书写

     缺点：效率低，不是所有标签都需要添加，导致做很多无用功，并且上下的网站，是不允许用*去清除默认内外边距的

     *{}
     

总结：对于id和class，一般我们都是类上样式（CSS），id上行为（JavaScript）

• 高级选择器

  1. 后代选择器

     通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器

     书写方式：选择器之间用空格隔开，前面的选择器选择的标签必须是后面选择器的祖先级

     选择范围：通过后代选择器中的前面一系列基础选择器缩小范围，由最后的一个选择器确定选中的标签（必须满足所有的后代关系才能有被选中）

     优点：减少class属性的定义使用，选择效率更高

     div p a {}
     <div>
             <p><a href=""></a></p>
     </div>
     

  2. 交集选择器

     通过一个标签之上满足所有的基础选择器的需求去选择标签

     书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头

     选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中（一般都是标签与类的交集）

     p.demo{}
     <div class="yang1">
             <ul>
                 <li><p></p></li>
                 <li><p class="demo">选中</p></li>
                 <li><p></p></li>
                 <li><p></p></li>   
             </ul>
             <p></p>
     </div>
     

  3. 并集选择器

     书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。

     选择范围：是所有的单独选择器选中的标签的并集集合。

     .txt,.txt2 {}
     <div>
             <ul>
                 <li class="txt"></li>
             </ul>   
     </div>
     <div>
     	<p clsaa="txt2"></P>
     </div>
     

     注：可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

     ​ 如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。