css选择器
css中最重要是选择器的使用，选择作用于页面上的某一个或某一类元素，对于字体、页面等的样式优化一般都是运用选择器，这样会方便简单一些。
选择器也有分类，分为以下几类。
- 基本选择器
- 标签是一种全局选择器，例如你想使整个页面的某一类标签全是一种样式，可以使用*号，也可以使用标签选择器。
body{
background: bisque;
}
*{
margin: 0;
padding: 0;
}
ul{
list-style-type:none ;
}
a{
text-decoration: none;
}
这些都是标签选择器，使用之后，所有该标签下的元素的样式会根据你设置的属性而改变。
- id选择器
id选择器全局唯一，意思是在整个页面中只被使用一次。它允许以一种独立于文档元素的方式来指定样式。
#c1{
margin: 0 auto;
width: 1000px;
height: 78px;
background: aliceblue;
}
……
<h1 id="c1">我是标题1</h1>
以#号为标识，在使用的时候，在行内用id引用。
- 类选择器
作用于所有选择class属性一致的标签，类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用。
.header{
margin: 0 auto;
width: 1000px;
height: 78px;
background: aliceblue;
}
.header-left{
position: relative;
height: 78px;
float: left;
}
<div class="header">
<div class="header-left">
<img src="https://staticssl.kugou.com/public/root/images/logo.png" alt="">
<input name=" " type="text" id=" ">
<div class="search-btn">
<!-- 标签显示斜体文本效果。-->
<i> </i>
</div>
</div>
<div class=" header-right">
<ul>
<li><a href="##">客服中心</a></li>
<li><a href="##">招贤纳士</a></li>
<li><a href="##">会员中心</a></li>
</ul>
<a href="#" class="loginBtn"> 登录</a>
</div>
</div>
只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
- 优选原则
在基本的这些选择器中，有优先级的区别， id选择器要大于类选择器，也要大于标签选择器，而类选择器大于标签选择器。
- 层次选择器
- 层次选择器有点类似于套娃，一层套一层的，但是实际上运用的还是基本的选择器。
层次选择器的结构可以用上图来解释，假如你想改变body里面所有的样式，那么在body这一层可以停下来。但你要是想继续往下，就一直寻找下一层，直到寻找到你需要的，你想要改变的那层。
.menu .menu-left .sub-menu li a{
height: 37px;
line-height: 37px;
font-size: 15px;
color: #bbb;
}
例如在这里，先是一个class选择器，在这个下面是.menu-left，然后是.sub-menu，在这个下面的所有li标签中的a标签都会被选择器设置的属性所改变，一层一层的套下去。
层次选择器也可以分为几个大类，像后代选择器、子代选择器、相邻兄弟选择器、通用选择器等。
3.结构伪类选择器
这一类选择器使用起来也很方便，而且还可以精准定位到元素，可以按照使用的方法分为四类。通用子元素过滤器，像nth-child(n)和nth-last-child(n)；通用子类型元素过滤器，nth-of-type(n)和nth-last-of-type(n)；特定位置的子元素，first-child，last-child，first-of-type，last-of-type；特定状态的元素root（根节点）、only-child（独子元素）、only-of-type（独子类型元素）和empty（孤节点）。
.menu-right li:last-child a{
background: url(https://webimg.kgimg.com/7366e06d43da71239d4f2ebd24b4e02e.png) no-repeat left center;
}
- 属性选择器
- 具有特定属性的HTML元素样式不仅仅是class和id。但是注意IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
还有一些正则表达式，也可以使用。