选择器：可以帮我们精准的选中想要的元素
选择器有很多种方式，根据页面需求，选择使用合适的选择器 developer.mozilla.org/zh-CN/docs/…
1，id选择器：#idName 唯一标示 一个元素只能有一个id值 id在一个页面中的唯一性导致了如果以id为选择器来写CSS，样式就无法重用
<div id="only">我是id选择器</div>
#only{ font-size:20px; }
2，class选择器：.calssName 一个元素可以有多个类名 ，一个class可以对应多个class
<div class="dome1 dome2 dome3">我是类选择器</div>
<p class="dome1 dome2">我也可以使用相同的class样式</p >
.dome1{ font-size:20px; } .dome2{ backgroud:red; } .dome3{ text-align:conter; }
3，元素（标签）选择器
选中所有的相同元素,不管嵌套多少层，都可以选择上
div{ font-size:20px; } p{ backgroud:red; }
4，通配符选择器： * 表示所有元素 包括html，body等所有的元素都会被选中
*{ margin:0; padding:0; backgroud:red; }
5，属性选择器：根据属性名和属性值选中元素
/*表示：所有带有href属性的元素被选中*/ [href]{ color:red; } /*表示：当href属性值是 http://baidu.com 的元素才能被选中 */ [href="http://baidu.com"]{ color:red; } /*表示: 当type属性值是text的属性 被选中*/ [type="text"]{ border:1px solid red; } [id="dome"]{ color:green; }
6，伪类选择器：用于向某些选择器添加特殊的效果
a标签独有的伪类： :link 超链接未访问过的样式，只有a标签有作用 :visited 超链接访问过后的样式，只有a标签有作用 其他标签都可以使用的伪类： :hover 当鼠标悬停到元素上的样式 :action 当鼠标按下(激活)的时候的样式,鼠标抬起样式就消失
备注：a如果使用:link、:visited、:hover、:active四个伪类， 顺序必须是:link、:visited、:hover、:active 原因：同一条css规则，后出现会覆盖前面的同样规则,后出现的伪类会覆盖先出现的伪类 把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类， hover在后面覆盖了active的颜色，所以始终无法看到active的颜色 hover在active前面，先触发hover，这个时候还没有触发激活active，hover的样式就能生效 等触发激活active的时候，看到active的颜色，再抬起鼠标就又触发hover，颜色又是hover的颜色 但是如果是只是用到 link visited 这两个伪类，并不需要顺序关系
:focus可以用在标签上 向拥有键盘输入焦点的元素添加样式 :first-child 所有相邻元素中的第一个 :last-child 所有相邻元素中的最后一个 :nth-child(3) 具体选择第几个元素 2n+1 / odd 所有相邻元素中的基数个数 2n/ 2n+2 / even 所有相邻元素中的偶数个数
7，伪元素选择器 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中 伪元素只能用于块级元素
伪元素选择器写法： 伪元素选择器使用 “:” || “::”都可以，使用两个冒号::是为了区别伪类和伪元素 CSS2中伪元素可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号:: IE8及以下的一些浏览器不兼容双冒号（::）表示得方法，所以除了少部分伪元素，其余伪元素既可以使用单冒号(:)，也可以使用双冒号(::)
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。 ::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。 常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素
a::after { content: "→"; }
::selection 文档中被选择的那部分 使用鼠标或其他选择设备选中的部分
p::selection{ background: green; }
伪元素可以与 CSS 类配合使用： p.article::before { color: #FF0000; }
选择器的组合
1，后代元素 (派生选择器)：父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开
.father .child{
color:#0000CC;
}
div p span{}
#box p span em.num{}
ul.box li span{}
2 ，直接子元素 父 > 子 只是一级子元素
div > span{
color:red;
}
3,相邻兄弟 + ：拥有同一个父元素的相邻元素 h1 + p :代表 h1后面的第一个p元素的样式
h1 + p{ color:red; }
4，所有兄弟元素~ ：同一个父元素中，某元素后面的所有兄弟元素 h1 ~ p:代表 h1后面的所有p元素的样式
h1 ~ p{ color:red; }
选择器的并列
div.dome{
}
/* dome类和dome2类都生效*/
.dome,.dome2{
}
/* 所有的div,em,span都生效*/
div,em,span{
}
js
