基础选择器
相邻选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p+div{
color: #DC143C;
} (相邻选择去只对下一个标签起到作用) */
/* p+p{
color: darkmagenta;
} (选择标签时是从上到下) */
div+p{
color: blue;
}
/* (相邻的只对一个标签起到作用) */
</style>
</head>
<body>
<div>邻居一</div>
<p>假邻居</p>
<p>邻居二</p>
<p>邻居三</p>
</body>
</html>
兄弟选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p~p{
color: darkorange;
}
/* 兄弟选择器同样是从第一个标签查找,当查找到定义的兄弟标签后将查询它的兄弟并且查找到的第一个标签不改变,之后的标签将发生改变,
如果发现不是相同的标签将不改变*/
</style>
</head>
<body>
<p>一</p>
<p>二</