三 基本选择器
素材准备：
将其变为10个小球，具体的样式先不用管，后面讲解，我们先完成素材的准备：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.基本选择器</title>
<style>
/*元素选择器*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
display: block; /*并设置为块级显示*/
clear:both; /*清除二边的浮动*/
}
li {
list-style: none; /*去掉默认列表项样式*/
float: left; /*左浮动*/
width: 40px; /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="green">2</li>
<li class="green">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
执行：
素材准备完毕，开始学习css选择器
ID选择器：将第一个小球的颜色变为浅绿色
注意：ID类似身份证号，一个页面只能有一个id,如果有多个一样的id也不会报错，但是不规范
类选择器：选择同类元素
将类为green的小球颜色设置为绿色
父子选择器，层级选择器，后代选择器这三种说法是同一个意思
父子选择器：
将ul 下的li文本颜色变为白色
通配选择器：一般用于重置样式
将ul下的所有元素加黑线
ul下的元素只有li,所以就是给所有的li元素加黑线
子元素选择器：只选择当前元素的子元素
将ul下的子元素li背景色改为：
观察上图可以看到：并没有把所有的li代表的小球背景色都改为蓝色。这是为什么？
解释如下：
选择器只有三种：id选择器，类选择器，标签选择器
其中，标签选择器优先级最低，它包含：父子选择器，通配符选择器，子元素选择器，兄弟选择器等
因为前三个小球已经通过id和类选择器设置了背景色，且这两种选择器的优先级高于标签选择器，所以不会变色
相邻兄弟选择器
将第6个小球的相邻兄弟（第七个小球）背景色改为黑色：
将页面恢复原始状态：
选择全部兄弟：将第6个小球之后的所有兄弟背景全部变为黑色
本文作者为BUG之神，转载请注明。