CSS基础-3.3选择器

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器

2. 元素选择器

3. 类选择器

4. 通配符选择器：选中所有元素

   /* 选中所有元素*/
   * {
       color: red;
   }
   

5. 属性选择器：根据属性名选中元素

   /* 根据属性名选中元素 */
   [href]{
       color: red;
   }
   
   /* 精确匹配，根据属性值选中元素，如选中href属性='https://www.sina.com'的元素 */
   [href="https://www.sina.com"]{
       color: red;
   }
   

   全部的地址不易于后期的维护和更改，一般href后跟$，表示只要以sina.com结尾的地址都可以成功跳转:

   [href$="sina.com"]{
   		 color:#008c8c;
   }
   

   还有其他几种选择器：

   <a class='a b c d' href="https://baidu.com">baidu</a>
   <a class='efg' href="https://sougou.com">sougou</a>
   

   /* 匹配带有一个名为class的属性的元素，其值包含b，如果有多个值，需要以空格隔开 */
   [class~='b']{
   	   color:#0f0;
   }
   	
   /* 匹配带有一个名为class的属性的元素，其值包含e，如果有多个值，不需要以空格隔开*/
   [class*='e']{
   	  color:rgb(255, 0, 221);
   }
   

6. 伪类选择器：选中某些元素的某种状态

   所学的以下四个选择器要按规定的顺序写,冒号别写成了中文冒号！

   1）link: 超链接未访问时的状态

   2）visited: 超链接访问过后的状态

   3）hover: 鼠标悬停状态

   4）active：激活状态，鼠标按下状态

   爱恨法则：love（link，visited）；hate（hover，active）

7. 伪元素选择器

   before：帮助生成一个子元素，并且该子元素一定是第一个元素，里面可以写上特殊的属性content，表示这个子元素的内容。如在span元素后面加上《

   after：同理，该子元素一定是最后一个元素。如在span元素结束前加上》

   <p>
       <span>教资</span>一定过过过！加油！
   </p>
   

   span::before{
       content: "《";
       color:pink
   }
   
   span::after{
       content: "》";
       color:pink
   }
   

选择器的组合

1. 并且，两个元素连着写，不加任何东西

   p.red{
       color: red;
   }
   

2. 后代元素 —— 空格

   .red li {
       color: rgb(34, 204, 91);
   }
   

3. 子元素 —— >

   .abc>.bcd {
       color: rgb(34, 204, 91);
   }
   

4. 相邻兄弟元素 —— +

   div .special+li{
       color:pink;
   }
   

5. 后面出现的所有弟弟元素 —— ~

   div .special~li{
       color:pink;
   }
   

选择器的并列

多个选择器, 用逗号分隔，方便书写：

	p,div{
	    text-indent: 2em;
	    line-height: 2;
	}