基本选择器

通用选择器（*）

*就是下面的所有的 html 标签的效果统一都改变

标签选择器

根据标签的名字选择 eg： p{ background: }

id 选择器（#）

选择标签，给元素加 id 唯一标识 #p{

}

class 选择器（.）

选择单个或多个标签，给标签加 class 属性 。main{ background: }

组合选择器

后代选择器（空格）

选择某标签下的所有某标签，不管嵌套多少层这个标签都会被选中

子代选择器（>）

只可选择嵌套的第一层的标签，第二层开始不起作用

并列选择器（，）

同时渲染多个元素，用逗号隔开

毗邻选择器（+）

同级 Html 才使用，且只对后面紧邻的元素有用，对不相邻或前面的元素无效

兄弟选择器（~）

渲染某元素后面的所有元素

伪类选择器

• 1） a:link 常态下的超链接样式（颜色，背景色）
• 2） a:visited 单击访问后的超链接样式
• 3） a:hover 鼠标悬浮其上的超链接样式
• 4） a:active 鼠标单击未释放的超链接样式、

一起使用时,顺序不能改变

• 5） first-child 只要是第一个子元素就会被选中 可配合其他元素选择器使用 eg: li:first-child 中间隔了其他元素则无效

• 6） first-of-type 选中子元素中第一个指定类型的元素 eg: a:first-of-type 就算中间隔了其他元素也可以算中

• 7） last-child
  必须是最后一个元素，中间有其他元素相隔则失效

• 8） last-of-type 选中最后一个指定元素，中间有其他元素相隔也可选中

• 9） nth-child 选中指定位置的第几个元素，

• 10） nth-of-type 选中指定位置的第几个元素，中间有其他元素也不会受到干扰 (nth 可用来设置隔行变色)

伪元素选择器（双冒号：：）

• 1） first-letter 选中元素的第一个字母
• 2） first-line 选中元素中第一行文字
• 3） selection 选中页面被用户 框选 的文字（通常改颜色）