选择器（上）

选择器（上）

1 通配符(*)、元素 、类class(.)、id(#) 选择器

1.1 通配符选择器

  可以选中所有HTML元素
  一般用于清除样式

 *{
     color:blue
  }
  <div>怎么能让一滴水永不干涸，就是让他流入大海</div>

1.2 元素选择器

  为页面中某种元素统一设置样式，元素选择器无法实现差异化设置，如下述所有div元素的样式都相同

  div {
        color:blue
  }
  <div>怎么能让一滴水永不干涸，就是让他流入大海</div>

1.3 类选择器

   选中所有特定类名（class值）的元素，使用频率很高
  注意：class是自定义的，按照标准，不要使用纯数字，不要使用中文，尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，命名要有意义，做到见名知意

  .box {
        color:blue
   }
   <div class="box">怎么能让一滴水永不干涸，就是让他流入大海</div>

1.4 id选择器

  选中特定id值的那个元素（唯一的）
  注意：id属性值，尽量由字母，数字，下划线（_）,短杠（-）组成，尽量不要使用中文，不要使用纯数字，最好以字母开头，不要包含空格，区分大小写，
     id属性值在整个页面中必须唯一，不能重复，若重复，则后面的id属性值会覆盖前面的id属性值,一个元素只能拥有一个id属性，一个元素可以同时拥有id和class属性

   #box {
        color:blue
   }
   <div id="box">怎么能让一滴水永不干涸，就是让他流入大海</div>

以上效果如下图：

2 交集与并集选择器

2.1 交集选择器（且）

  选中同时符合多个条件的元素
  交集选择器中不可能出现两个元素选择器，因为一个元素，不可能既是p元素，又是span元素
  交集选择器，选择器与选择器间没有空格,后代选择器有空格

    p.sentence {
    	color: blue;
	}
 	<p class="sentence">若怨懑浪的冲击，便谛听风的絮语</p>

效果如下图：

2.2 并集选择器 （或）

  选中多个选择器对应的元素，又称分组选择器
  通常用于集体声明，可以缩小样式表体积

   .sentence, 
       #box,
	     h3 {
	         color: blue;
	 }    
    <p class="sentence">无需按图索骥，蹊径亦有烟火绚丽</p>
	<div id="box"> 藩篱遮不尽艳阳，囹圄关不住向往</div>
	<h3>空调吹多了得病，闲事管多了要命</h3>   

效果如下图：

3 后代、子代、兄弟、属性 选择器

3.1 后代选择器

  选中指定元素中,符合要求的后代元素 先写祖先,再写后代

 div span {
     background-color:aquamarine;
 }
  <div>
     <p><span>最好的沟通，是你需要，而我懂你</span></p>
  </div>

效果如下图：

3.2 子代选择器

 div > span {
     background-color: aquamarine;
 }
 <div>
    <span>家和房子之间是大于号，不是等于号</span>
    <p><span>一砖一瓦是房子，一点一滴才是家</span></p>
 </div>

效果如下图：

3.3 兄弟选择器

3.3.1 相邻兄弟选择器

  选中p后紧紧相邻的兄弟span元素,紧挨着他的下一个

  p + span {
       color:cornflowerblue;
  }
  <div>
     <span>绿蚁新醅酒，</span>
     <p>红泥小火炉。</p>
     <span>晚来天欲雪，</span><br/>
     <span>能饮一杯无？</span>
  </div>

效果如下图：

3.3.2 通用兄弟选择器

  选中p后所有的兄弟span元素

 p ~ span {
     color:cornflowerblue;
 }
 <div>
    <span>绿蚁新醅酒，</span>
    <p>红泥小火炉。</p>
    <span>晚来天欲雪，</span><br/>
    <span>能饮一杯无？</span>
 </div>

效果如下图：

  注意：两种兄弟选择器,选择的都是下面的兄弟

3.4 属性选择器

3.4.1 属性名选择器

  选中具有title属性名的元素

 [title] {
     color: blue;
 }
 <div title="attribute1">每个人生都无法复制的</div>
 <div title="attribute2"> 更没有办法替代</div>

效果如下图：

3.4.2 属性值选择器

  选中具有title属性,且属性值为attribute1的元素

  [title="attribute1"] {
     color: blue;
  }
  <div title="attribute1">每个人生都无法复制的</div>
  <div title="attribute2"> 更没有办法替代</div>

效果如下图：

3.4.3 属性值开始选择器

  [title^="at"] {
     color: blue;
  }
  <div title="attribute1">每个人生都无法复制的</div>
  <div title="attribute2"> 更没有办法替代</div>

效果如下图：

3.4.4 属性值结束选择器

    [title$="e2"] {
     color: blue;
  }
  <div title="attribute1">每个人生都无法复制的</div>
  <div title="attribute2"> 更没有办法替代</div>

效果如下图：

3.4.5 属性值包含选择器

     [title*="u"]  {
     color: blue;
  }
  <div title="attribute1">每个人生都无法复制的</div>
  <div title="attribute2"> 更没有办法替代</div>

效果如下图：