css中\'+\'兄弟选择器及\'~\'选择器的代码-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

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

阅读：5336 输入：2016-01-20 09:23:44

<!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>

上一篇：php根据日期显示所在星座的代码
下一篇：php验证台湾身份证号码是否合法的代码

相关阅读: HTML5编写一款网页上的时钟的代码; css3标签，用于显示状态; css3应用nth-of-type(odd)实现li隔行变色