实例
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0321作业</title>
<style type="text/css">
.demo{
width: 865px;
height: 100px ;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
margin: 100px auto;
}
ul{
width: 845px;
height: 80px;
}
li{
list-style: none;
float: left;
height:80px;
line-height: 80px;
width: 80px;
border-radius: 20px;
text-align: center;
/*background: #ff3366;*/
color: forestgreen;
margin-left: 5px;
}
.first{
margin-left: 0px;
}
.last{
margin-right:0px;
}
/*通配符选择器*/
*{
margin: 0px;
padding: 0px;
}
/*clearfix元素下的所有元素都选中添加边框*/
.clearfix *{
border: 1px solid #000;
/*添加边框不增加元素的宽高*/
box-sizing: border-box;
}
/*元素选择器*/
/*选中所有li标签添加样式*/
li {
background-color: grey;
color: orange;
}
/*类选择器
类选择器就是给标签添加一个class属性 起一个名字，class属性名可以有多个
类选择器还可以结合元素选择器来使用，比如：文档中有好多个元素使用了类名important，但你只想在p元素这个类名上修改样式，那么你可以这样
进行选择并加上相应的样式
p.items {color: red;}
*/
/*选中有 .important 类名的元素 使其文字加粗 成黄绿色*/
.important{
font-weight: bold;
color: yellowgreen;
}
/*id选择器*/
/*id选择器是一个页面中唯一的值，*/
/*一个元素只能命名一个id名，可以在不同的文档中使用相同的id名*/
#first{
background: lime;
color:#c93652;
}
#last{
background: #000;
color: lime;
}
/*后代选择器*/
/*可以选择某元素的后代元素，
打个比方：e f 前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，注意他们之间需要一个空格隔开。
这里不管是E元素的子元素或者是孙子元素或者是更深层次的关系，都将被选中。
*/
.demo li{
color: #0000FF;
}
/*子元素选择器*/
/*
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。这和后代
选择器不一样，在后代选择器中F是E的后代元素，而子元素选择器E>F，其中F仅仅是E的子元素而已。
*/
ul>li{
background: gold;
color: white;
}
/*相邻兄弟选择器*/
/*
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且
F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。
*/
.items+li{ /*选中 4和6*/
background: darkgreen;
color: rebeccapurple;
}
/*通用兄弟选择器*/
/*
这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于
同一个父元素之内，并且F元素在E元素之后，那么E~F选择器将选择中所有E元素后面的F元素。
*/
.active~li{ /*选中 2之后所有的元素*/
background: green;
color: yellow;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
