CSS笔记二：选择器

学这么多选择器是为了在不同的状态下，你能快速选择你要的东西，为了提供方便。

基本选择器

类选择器(class选择器)（【类】有一堆的意思）

• 在css中使用(.)来查找，类选择器可以有多个属性值，使用空格分开即可。

唯一选择器(ID选择器)

• 在CSS中使用(#)来查找。

通配符选择器(*)

• 匹配所有标签。
• 说明：少用，页面中只使用1次，是在清空页面样式的时候使用。通常是用哪个标签就写哪个标签的样式。
• 遵循：功能越少，效率越高。

tagName标签选择器

• 根据HTML标签名来选择对应的标签，此时在页面中出现的所有该标签都会被选择。

层级选择器

组合选择器

• 选择器1,选择器2 多个选择器之间用逗号分隔。例：div,p

包含选择器

• 选择器1 选择器2 表示选择器2被选择器1包含即可。例：div p

子选择器

• 选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。例：div > p

相邻选择器（了解）

• 选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。例 div + p

兄弟选择器（了解）

• 选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。 例 div ~ p

属性选择器

• 属性选择器就是根据属性名或者属性值来查找到某个元素
• E element元素标签 ATT attribute 属性 VAL value 值
• 标签[属性]
  1. E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。
  2. E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。
  3. E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
  4. E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解3）。
  5. E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。
  6. E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。
  7. E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。

伪元素选择器(不是对真正的元素选择)

1.  E:first-line E元素的第一行。
2.  E:first-letter E元素的第一个字母。
3.  E:before E元素的内容之前。
4.  E:after E元素的内容之后。
		 ​ 在使用before 和 after 时 必须配合 content 内容来使用

结构性伪类选择器

• 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

• 

• 四个最基本的结构性伪类选择器
  1. :root 将样式绑定到页面的根元素（document）。
  2. E:not() 对某个结构元素使用样式，但是想排除这个元素下的子结构元素。
  例如：
  

  • 
    
  • item1
  • 
    
  • item2
  • 
    
  • item3
  • 
    
  • item4
  • 
    
  
  最后结果：item1没有标背景色
  3. E:empty 匹配所有为空的E元素。
  4. :target 代表链接到目标时你要做什么。

其他的结构伪类选择器

1.  E:first-child 选中父元素中的第一个子元素E设置样式。
2.  E:last-child 选中父元素中的最后一个子元素E设置样式。
3.  E:nth-child() 选择父元素中的第n个子元素E设置样式。
4.  E:nth-last-child() 选中父元素中倒数第n个子元素E设置样式。
5.  E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
6.  E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签
7.  E:nth-child(an+b)
          -   a 表示每次循环中间隔几个改变样式。
          -   b 表示指定在循环中开始的位置。
          <style>
		        ul>li:nth-child(odd){/*奇数*/
		            background-color: #1db34f;
		        }
		        ul>li:nth-child(even){/*偶数*/
		            background-color: #931db3;
		        }
	    </style>
	      <ul>
		        <li>item1</li>
		        <li>item2</li>
		        <li>item3</li>
		        <li>item4</li>
		  </ul>
8.  E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。
9.  E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。
10. E:enabled 匹配表单中激活的元素。
11. E:disabled 匹配表单中未激活的元素。
12. E:checked 匹配表单中被选择的radio或者checkbox元素。
	   <style>
	      input[type="radio"]:checked+label{
	          font-size: 10px;
	      }
	   </style>
	   <form>
       		 <input type="radio" name="sex" value="nv" id="nv"/><label for="nv">女</label><br>
       		 <input type="radio" name="sex" value="nan" id="nan"/><label for="nan">男</label><br>
       </form>
13. :focus 设置元素在其获取鼠标焦点的样式。
14. ::selection 匹配用户当前选中的元素(了解)。

状态伪类选择器

1.  :link  设置超链接a在未被访问前的样式。
2.  :visited 设置超链接a在其链接地址已经被访问的样式。
3.  :hover 设置元素在鼠标悬停时的样式。(最常用，很多属性会用，任何标签都能用)
4.  :active 设置元素在被用户激活时的样式。
    <style>
	      a:link{
	          font-size: 10px;
	          background-color: yellow;
	      }
	      a:visited{
	          font-size: 60px;
	          background-color: #1db34f;
	      }
	      a:hover{
	          font-size: 30px;
	      }
	      a:active{
	          font-size: 50px;
	      }
	   </style>
	   <a href="https://www.baidu.com" target="_blank">点击</a>
	  <style>
	        ul>li:hover{
	            background-color: #1db34f;
	        }
	 </style>
	 <ul>
	        <li>item1</li>
	        <li>item2</li>
	        <li>item3</li>
	        <li>item4</li>
    </ul>

选择器优先级

• 内联样式，优先级1000

• id选择器，优先级100

• 类和伪类，优先级10

• 元素选择器，优先级1

• 通配符选择器，优先级0

  当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。

  并集(组合)选择器的优先级是单独计算。

  可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级，将会超过所有样式甚至内联样式，所以在开发中尽量避免使用。