相邻选择器和兄弟选择器的使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style/style1.css"> <title>选择器的使用</title> </head> <body> <ul class="main"> <li class="one">one</li> <li id="two">two</li> <li class="one">three</li> <li>four</li> <li>five</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
实例
.main{
margin: 0;
padding: 0;
border: 1px solid #ccc;
width: 300px;
}
ul>li{
display: inline-block;
border: 1px solid red;
border-radius: 50%;
}
/*相邻选择器*/
#two+*{
background-color: green;
}
/*兄弟选择器*/
#two～*{
background-color: red;
}
/*子元素选择器*/
ul :nth-child(4){
background-color: yellow;
}
/*类型选择器*/
ul li:nth-of-type(2) {
background-color: green;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
相邻选择器只会修改当前元素后面元素的样式
兄弟选择器会修改当前元素后面跟他同级同标签的样式
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
padding内编剧通常使用box-sizing: border-box;这个属性来解决。
同时也可以使用重新定制宽度来解决。
magin使用
实例
.box{
width: 180px;
height: 180px;
background-color: greenyellow;
margin-bottom: 200px;
}
.box2{
width: 180px;
height: 180px;
background-color: red;
margin-top: 150px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
同样设置的以那个大为准
