CSS之选择器

选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

通配符选择器
  通配符选择器顾名思义就是通用的，会对所有的标签生效，但其权重很低，会被之后书写的权重更高的代码所覆盖。（权重问题后面会额外的说明）
  通配符选择器的语法为：
    *{
      属性：属性值；
    }
eg：

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

标签选择器
  标签选择器通俗的理解就是使用标签名作为选择器名称，例如div、input、a等等，这样会为所有的该标签设置样式，所以一般很少用到
  标签选择器的语法为：
    标签名（例：div）{
      属性：属性值；
    }
eg：

<style>
    div{
        width: 200px;
        height: 200px;
        background:red;
    }
</style>

ID选择器
  id选择器中的id是不能重复的，id就像是每个人的身份证一样，是每个人独有的，在css中id是每个标签独有的。
  id选择器的语法为：
    #id名称{
      属性：属性值；
    }
eg：

<style>
    #dome{
        background-color:#00f;
    }
</style>
/* body里面 */
<div id="dome">测试</div>

类选择器
  类选择器是常用的选择器之一，之所以常用类选择器而不是id选择器的原因和id是唯一值有关，当我们需要为多个不同标签设置相同属性的时候，我们可以将他们的class名字取一样的，这样可以减少代码冗余
  类选择器的语法为：
    .类名（即class名称）{
      属性：属性值；
    }
eg：

<style>
    .a1{
        width: 200px;
        height: 50px;
        background: yellowgreen;
    }
</style>
/* body里面 */
<div class="a1">我是块元素</div>

包含选择器
  包含选择器又名后代选择器，是可以多个选择器叠加使用，并且后面的是前面所指标签的子元素。（看例子基本就可以明白了）
  包含选择器的语法为：
    父元素的选择器（可以是id选择器，也可以是类选择器）{
      属性：属性值；
    }
eg：

<style>
    .a1 img{	/*这里理解为class名为a1的父元素下的img标签*/
        width:100%;
    }
</style>
/* body里面 */
<div class="a1">
    <img src="../images/banner.jpg" alt="">
</div>

不常用的选择器：
层级选择器
  层级选择器是通过元素间的层次关系获取元素，主要层次关系有：后代（上一个已经说到了）、父子、相邻兄弟和通用兄弟
  层级选择器的语法为：
    ①父子：
      .父元素>子元素{
        属性：属性值；
      }
    ②相邻兄弟：
      .父元素+兄弟{
        属性：属性值；
      }
    ③通用兄弟：
      .父元素~兄弟{
        属性：属性值；
      }
eg：

<style>
    .a1>img{	/*这里理解为class名为a1的父元素下的img标签 子元素*/
        width:100%;
    }
    .a1+img{	/*这里理解为class名为a1后面唯一的兄弟	代码中是指p中的img标签*/
        width:100%;
    }
    .a1~img{	/*这里理解为class名为a1后面所有的兄弟	代码中是指p中的img标签和a中的img */
        width:100%;
    }
</style>
/* body里面 */
<div class="a1">
    <img src="../images/banner.jpg" alt="">
</div>
<p>
    你好啊！
    <span>张三</span>
    <img src="../images/banner.jpg" alt="">
</p>
<a href="">
    <img src="../images/banner.jpg" alt="">
</a>

伪类选择器
  伪类选择器并不是常用的选择器，所以在这里知识作为简单的介绍一下分类。后续可能会出详细的分析。
  伪类选择器我们可能常用一点的有四类：
    结构性伪类选择器:
      :nth-child()
      :nth-of-type()
    动态伪类选择器：
      :link
      :visited
      :hover
      :active
      :focus
    UI元素状态伪类选择器：
      :enable
      :disable
      :checked
      ::selection
    否定伪类选择器：
      not

属性选择器
  属性选择器也是不常用的选择器之一
  属性选择器的语法为：
    标签名（id/类）[属性=“属性值”]{
      属性：属性值；
    }
eg：

<style>
	input[type="submit]{
	}
	*[class="a"]{	/* 等同于	.a */
	}	
</style>
/* body里面 */
<div class="a">
    <input type="submit">
    <input type="text">
</div>