CSS选择器

选择器作用

找到特定HTML元素

基础选择器

• 标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

• id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

• 类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

• 通配符选择器

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

复合选择器 

• 后代选择器

父级 子级{属性:属性值;属性:属性值;}

• 子选择器：必须是儿子辈！！！

父级>子级{属性:属性值;属性:属性值;}

• 交集选择器

h3.class{color:red;font-size:25px}
其中第一个为标签选择器，第二个为class选择器，两个选择器之间**不能有空格**，
表示为：类名是class的h3标签

• 并集选择器

h3,.class{color:red;font-size:25px}
通常用于集体声明  ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

• 伪类选择器

a:link      /* 未访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */
a:visited   /* 已访问的链接 */

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

 

来源：oschina

链接：https://my.oschina.net/u/4427158/blog/4415010