CSS-选择器的使用

• * 默认选择器，这个符号能匹配所有样式，所以如果没有额外定义就默认为这个样式，一般用于消除页面与浏览器的内外边距

      <style>
          *{
              padding:0;  // 所有标签默认消除内边距
              margin:0;  // 所有标签默认消除外边距
          }
      </style>
  

• 标签选择器，示例为匹配所有span标签，并且设置其css样式

      <style>
          span{
              font-size:26px;  // 设置所有span里字体大小
              color:snow;  // 设置span里的字体颜色
          }
      </style>
  

• 类选择器，示例为匹配所有class='bgcolor'的标签，设置样式，得注意样式前面有个英文状态下的点

      <style>
          .bgcolor{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
              background:pink; // 设置背景颜色
          }
      </style>
  

• id选择器，示例为匹配id='yun'的标签，并且设置其css样式，需要注意的是id的值在整个html页面必须是唯一的，即不同的标签里面不可以出现重复的id值

      <span id='yun'>i want you</span>
      <p id='yun'>i miss you</p>  // 此标签为错误示例，因为id和上面的重复了！
  
      <style>
          #yun{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
          } 
          // 另外不要纠结这个样式，#yun 能不能重复写，能重复写，但是你都能重复写了，为什么不把样式写在一起？
      </style>
  

• 多元素选择器，用逗号隔开，比如选择，id=yun 和 class='abc' 的标签，应用样式

      <style>
          #yun,.abc{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
          }
  
          // 或者
          span,#yun,.abc,.cde{
              color:green; 
          } 
      </style>
  

• 后代选择器，用空格隔开

      <div id='yun'>
          <p>会被应用样式</p>
          <div>
              <p>这个也会被应用</p>
          </div>
      </div>
      <style>
          // 该样式会应用于，id为yun标签下面的p标签，注意这里指的是下面所有，包括子元素，子元素的子元素，子子子元素... 只要是p标签
          #yun p{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
          } 
      </style>
  

• 子元素选择器，使用>符号

      <div id='yun'>
          <p>仅这样的子元素会被应用样式</p>
      </div>
      <style>
          // 该样式会应用于id为yun这个标签下面的p标签子元素，
          #yun>p{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
          } 
      </style>
  

• 邻元素选择器,使用+符号

      <style>
          .yun + p{
              font-size:26px;  // 设置字体大小
              color:snow;  // 设置字体颜色
          } 
      </style>
      <div>
          <p class='op'></p>
          <p class='yun'></p>
          <p>这个标签会被应用</p>
          <p></p>
      </div>
  

• 同级元素选择，用~符号，div后面所有p

      <style>
          div~p{
              color:snow;
          }
      </style>