css选择器
1.基本选择器
id选择器
<style>
#con{
color:red;
}
</style>
<p id="con">I Love You</p>
类选择器
<style>
.con{
color:red;
}
</style>
标签选择器
<style>
p{
color:red;
}
</style>
优先级为id选择器>类选择器>标签选择器
<p id="con">I Love You</p>
<p class="con">I Love You</p>
<p>I Love You</p>
这里若给字体颜色,只有id的颜色才是字体显示在浏览器上的颜色
2.高级选择器
（1）层次选择器
实例如下:
<style>
body p,ul{
border:1px solid red;
}
</style>
<body>
<p class="con">1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</body>
把body>p{ background: pink; } 加入样式中 //子选择器
这里是选择子代是p,也就是body的子代有三个p变成pink的背景
.con~p{ background: yellow; } //通用选择器选择在它后面所有的p标签
（2）结构伪类选择器
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p>
<ul>
<li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>
加入以下样式:
ul li:first-child{ background: red;} //首先找到ul的父级body，然后找ul下第一个元素,发现是li,则样式有效,若第一个标签不是li，则样式不起作用，其实结构伪类选择器第一步先找父级标签,然后找其下的标签,观察这个标签是不是你选择的,若是则样式有效，否则无效
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
效果如下: