css中\'+\'兄弟选择器及\'~\'选择器的代码

2016-01-20 网页编程网 网页编程网

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css</title></head>
<style>
.line {
    height: 1px;
    margin: 20px 0;
    background-color: red;
}
div {
    margin-top: 5px;
    height: 30px;
    width: 200px;
    outline: 1px solid red;
    text-align: center;
}

.me {
    background-color: blue;
    color: #fff;
}

.me+.gg {
    background-color: red;
}

.me+.dd {
    background-color: yellow;
}
.ni{
	background-color: green;
	color: #FFF;
}
.ni~.dd{
	background-color: yellow;
}
.ni~.gg{
	background-color: red;
}
</style>
<body>
    <h1>'+'选择器的结果</h1>
    <div class="gg">大哥1</div>
    <div class="gg">大哥2</div>
    <div class="gg">大哥3</div>
    <div class="me">我</div>
    <div class="dd">弟弟1</div>
    <div class="dd">弟弟2</div>
    <div class="dd">弟弟3</div>
    <div class="line"></div>
    <h1>'~'选择器的结果</h1>
    <div class="gg">大哥1</div>
    <div class="gg">大哥2</div>
    <div class="gg">大哥3</div>
    <div class="ni">你</div>
    <div class="dd">弟弟1</div>
    <div class="dd">弟弟2</div>
    <div class="dd">弟弟3</div>
</body></html>

阅读原文

阅读 5337

123 显示电脑版