<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
*{
margin: 0; /*外边距,盒子与盒子之间的距离*/
padding: 0; /*内间距,盒子内部的内容与盒子边框的距离*/
}
.outer{
border: 1px solid red;/*边框线的宽度 样式:实线 颜色*/
}
.inner{
width: 100px;
height: 100px;
border: 1px solid blue;
}
/*标签选择器*/
span{
/*background-color: green;*/
}
/*选择div并且id为two的后代的span*/
div#two span{
/*background-color: green;*/
}
/*选择所有的span标签和p标签给样式*/
p,span{
/*background-color: green;*/
/*border: 1px solid green;*/
}
/*选择id为two的之后的兄弟并且class为spanOne的span标签*/
div#two~span.spanOne{
/*background-color: green;*/
}
/*选择id为two的下一个兄弟元素*/
#two+*{
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>hello</span>
<span>hello</span>
</div>
<div class="inner" id="two">
<span>hello</span>
<span>hello</span>
<p>你好<span>world</span></p>
<p>你好<span>world</span></p>
</div>
<div class="inner">
<p>你好</p>
</div>
<div class="inner"></div>
<p>你好</p>
<p>你好</p>
<span class="spanOne">hello</span>
<span>hello</span>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
*{
margin: 0; /*外边距,盒子与盒子之间的距离*/
padding: 0; /*内间距,盒子内部的内容与盒子边框的距离*/
}
.outer{
border: 1px solid red;/*边框线的宽度 样式:实线 颜色*/
}
.inner{
width: 100px;
height: 100px;
border: 1px solid blue;
}
/*标签选择器*/
span{
/*background-color: green;*/
}
/*选择div并且id为two的后代的span*/
div#two span{
/*background-color: green;*/
}
/*选择所有的span标签和p标签给样式*/
p,span{
/*background-color: green;*/
/*border: 1px solid green;*/
}
/*选择id为two的之后的兄弟并且class为spanOne的span标签*/
div#two~span.spanOne{
/*background-color: green;*/
}
/*选择id为two的下一个兄弟元素*/
#two+*{
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>hello</span>
<span>hello</span>
</div>
<div class="inner" id="two">
<span>hello</span>
<span>hello</span>
<p>你好<span>world</span></p>
<p>你好<span>world</span></p>
</div>
<div class="inner">
<p>你好</p>
</div>
<div class="inner"></div>
<p>你好</p>
<p>你好</p>
<span class="spanOne">hello</span>
<span>hello</span>
</div>
</body>
</html>