CSS选择器

声明：最近在补前端CSS的知识，稍微总结一下。

一、元素选择器

通过标签选择器可以控制网页所有标签显示的样式。

body{
  font-family: Tahoma, Verdana, Arial;
  color: #06C;
  font-size: 12px;
}

二、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

.div1{
  position: absolute;
  top: 150px;
  width: 180px;
  height: 250px;
  left: 460px;
  }

三、ID选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

区别 1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

#txtstyle{
  background-color: #CCCCFF;
  border:#6666FF 1px solid;
  color:#0066FF;
}

四、属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
}

五、后代选择器

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

.to_top_inner a {
    color: inherit;
    display: block;
    float: left;
    font-size: 14px;
    text-align: center;
    width: 40px;
    text-decoration: none;
}

六、子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

.to_top_inner > span {
    text-align: center;
    display: block;
    width: 40px;
    float: left;
    font-size: 30px;
    margin-top: 5px;
    color: inherit;
}

七、相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

h1 + p {margin-top:50px;}

八、伪类选择器

常用伪类：

active	向被激活的元素添加样式。
focus	向拥有键盘输入焦点的元素添加样式。
hover	当鼠标悬浮在元素上方时，向元素添加样式。
link	向未访问的链接添加样式。
visited	向已访问的链接添加样式。
first-child	向元素的第一个子元素添加样式。
lang	向带有指定lang属性的元素添加样式。

a:hover{background:orange;}