选择器的作用和关系选择符

选择器的作用

1. 以前的动画效果非得通过JavaScript实现，现在只要用CSS就可以轻松实现
2. 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
3. 你可以轻松地控制页面的布局 。
4. 你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
5. 在JavaScript中还有一个 document.querySelector和document.querySelectorAll它们可以完美配合

元素选择符

• 通配选择符（*）：全部元素对象(一般用于重置页面)
• 类型选择符（div、span…）：文档上面的元素
• id选择符（#id属性值）：识别页面唯一性的id属性（可以写多个id但是没有用，JavaScript只识别页面的第一个）
• class选择符（.class属性值）：识别页面class属性

关系选择符

• 包含选择符（E F）：选择所有被E元素包含的F元素
• 子选择符（E>F）：选择所有E的叫F的儿子
• 相邻选择符（E+F）：平级，但是只能向后找一个
• 兄弟选择符（E~F）：选择符合条件的所有兄弟元素向下匹配
• 为什么都是都是向后匹配：很简单的一句话，编译器向下编译（中国象棋的兵和卒后退不）

<style>
   /* 包含选择符 */
   div h1{
     font-weight: 100;
   }

   /* 子选择符 */
   div>.p1{
     background-color: red;
   }

   /* 相邻选择符 */
   .p3+p{
     background-color: blueviolet;
   }

   /* 兄弟选择符 */
   .p3~p{
     border: 1px solid red;
   }
 </style>

<div class="div">
    <h1>h1</h1>
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>
    <p class="p1">5</p>
  </div>
  <h1>h1</h1>
  <p class="p1">1</p>

属性选择器

就是更具HTML标签上的属性进行匹配

• E[att]{}：匹配属性为stt所有的E标签
• E[att=“val”] ：选择具有att属性且属性值等于val的E元素
• E[att~=“val”] ：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
• E[att^=“val”]：选择具有att属性且属性值为以val开头的字符串的E元素
• E[att$=“val”]：选择具有att属性且属性值为以val结尾的字符串的E元素
• E[att*=“val”]：选择具有att属性且属性值为包含val的字符串的E元素
• E[att|=“val”]：选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择
• 侧面说出HTML页面取名多个单词的连接符用"-"分隔比较好

选择器优先级