在我们的网页中，html是超文本标记语言，负责网页结构的展示，每个标签都有自己的语义，告诉浏览器该处被标记的文本是什么意思，比如h1,h2,h3为标题，ul为列表,可以用作导航栏。即使没有添加样式，从结构中也可以看出它的作用，而CSS可以改变网页结构的样式，做出精美的效果，在W3C标准中属于表现层。CSS 指层叠样式表 (Cascading Style Sheets)，主要通过CSS选择器去选择指定的结构，添加不同的属性来改变结构的表现。它的主要写法如下，selector是选择器，property为属性，value为属性值。
selector {property: value}
CSS选择器对于学习CSS来说至关重要，它决定了我们能否找到想要改变样式的结构，因为我们想要改变结构的样式，首先要选到它，再为其添加样式。这就好比我们去菜场买菜，首先要知道去菜场的路怎么走，会有好多种走法，反正最终可以走到菜场，而CSS选择器也有好多种选择器，最终都可以完成效果，但是使用合适的选择器会加快我们网页设计效率。等走到菜场之后，至于买什么菜，看自己的需要，萝卜青菜的都可以买，同理我们使用选择器选到正确的结构之后，至于添加什么样式，看你的设计要求，只需要在括号中写清楚属性和值就可以。了解了这一概念之后再来看一下CSS选择器如何使用。
CSS选择器分为基本选择器和高级选择器，基本选择器包括标签选择器、类选择器、ID选择器，他们的优先级为ID选择器>类选择器>标签选择器
一、 标签选择器
标签选择器又叫元素选择器，是最常见的选择器，通过标签名称获得，可以选到多个元素。
<style>
h1 {color: red;}
p,span{color: blue;}
</style>
<body>
<div id="show">
<h1>这是标题</h1>
<p>这是段落1</p>
<p id="nav">
<ul class="first">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</p>
<span>这是段落2</span>
</div>
</body>
二、类选择器
通过“.类名”获取，一个元素也可以设置多个类名用空格分隔开来，多个元素可以设置相同的类名。当结合标签选择器一起使用时，表示class属性值为该类的标签。
<style>
.first{color: red;}
span.first{color: green;}
.sec{background-color: orange;}
</style>
<body>
<div id="show">
<h1>这是标题</h1>
<p>这是段落1</p>
<p id="nav">
<ul class="first">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</p>
<span class="first">这是段落2</span>
<span class="first sec">这是段落3</span>
</div>
</body>
三、 ID选择器
通过“#ID”获得，在整个文档中，即每个元素只有唯一的ID，不可以重复，它与类选择器不同，同一个元素不允许设置多个ID值，一般用在特定的地方，比如导航栏等。
<style>
#show{color: blue;}
#nav{color: red;}
</style>
<body>
<div id="show">
<h1>这是标题</h1>
<p>这是段落1</p>
<div id="nav" >
<ul class="first">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
<span class="first">这是段落2</span>
<span class="first sec">这是段落3</span>
</div>
</body>
四、层次选择器
根据元素所处上下文的位置来获取的，包括后代选择器，子选择器，相邻兄弟选择器，通用兄弟选择器四种，上述四种选择器都可以结合使用，他们结构如下：
<style>
div strong{color: blue;}
div > em{background-color: #0000FF;}
span+span{color: orange;}
h1~p{color: deeppink}
div.company ul > p{color: orange;}
#show>.company strong~li{background-color: yellow;}
</style>
<body>
<div id="show">
<h1>这是标题</h1>
<p>这是段落1</p>
<ul>
<p>这里1</p>
</ul>
<div class="company" >
<ul class="first">
<li>菜单1</li>
<p>这里2</p>
<strong>这里3</strong>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<em>这里4</em>
</div>
<span class="first">这是段落2</span>
<span class="first sec">这是段落3</span>
</div>
</body>
五、结构伪类选择器
伪类的结构如下，根据元素在某父级下的位置来获取。
selector : pseudo-class {property: value}
注意：E：first-child不是代表父级E下的第一个元素，而是某父级下的第一个子元素E，不管父元素是什么。
first-child与first-of-type的区别：first-child不论元素类型，直接从第一个寻找，first-of-type先看元素类型，再从相同类型中寻找。nth-child(n)和nth-of-type(n)一样的道理，n可以为1,2,3...代表第几个，nth-child(1)和first-child作用一样。
<head>
<meta charset="UTF-8">
<title></title>
<style>
p:nth-child(2){
background-color: orange;
}
div p:nth-of-type(1){
border: 1px solid red;
}
div.nav p:nth-of-type(1){
color: red;
}
</style>
</head>
<body>
<div class="nav">
<span>1</span>
<p>2</p>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</body>
与CSS结构伪类相似的还有<a>标签的锚链接，包括已访问，未访问，鼠标悬停和鼠标选中4种状态，在CSS中可以分别为其设置样式。在使用时顺序不要错，不然会有部分伪类无法实现。hover放在link和visited之后，active放在hover之后，在设置visited属性时，会有部分属性不起作用，尽量只增加字体大小和颜色属性，还有一种情况就是超链接无效导致浏览器无历史记录，可以检查一下自己的浏览器是否有记录。
<style>
a:link{ //链接样式
color: red;
}
a:visited{//已访问过的链接
color: green;
font-size: 30px;
}
a:hover{//鼠标悬停
color: orange;
}
a:active{//鼠标选中
color: blue;
}
</style>
六、 属性选择器
一个标签元素拥有许多属性，属性选择器为拥有指定属性的标签添加样式，不限于class和id，比如a标签拥有href属性等标签。它的结构如下
<head>
<meta charset="UTF-8">
<title></title>
<style>
a[target]{
color: red;
}
a[target="_blank"]{
text-decoration: none;
}
a[href^=http]{
font-weight: bold;
}
a[href$=com]{
background-color: blue ;
}
a[href*=www]{
border: 5px solid palegreen;
}
</style>
</head>
<body>
<p></p>
<a href="http://www.baidu.com" target="_blank">这是一个超链接1</a>
<a href="#" target="_self">这是一个超链接2</a>
</body>
以上就是CSS的常见选择器。
