CSS权威指南-选择相邻兄弟元素
2016-06-24 21:34
351 查看
选择紧接（必须紧跟着）在另一个元素后的元素，而且二者有相同的父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ol>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol+ul{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ol>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
</div>
</body>
</html>
！两个元素之间的文本内容不会影响相邻兄弟结合符起作用。中间文本并不包含在兄弟元素中，而只是父元素的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
3333333
<li>4444444</li>
</ol>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<p>3333333</p>
<li>4444444</li>
</ol>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ol>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol+ul{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ol>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
<ul>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
</div>
</body>
</html>
！两个元素之间的文本内容不会影响相邻兄弟结合符起作用。中间文本并不包含在兄弟元素中，而只是父元素的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
3333333
<li>4444444</li>
</ol>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li+li{
color: red;
}
</style>
</head>
<body>
<div>
<ol>
<li>1111111</li>
<li>2222222</li>
<p>3333333</p>
<li>4444444</li>
</ol>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 遮罩层——通过阴影弱化背景的四种方案
- CSS中的几种选择器
- CSS权威指南-属性选择器
- CSS权威指南-id选择器
- css总结
- CSS实现的loading页面等待效果
- p标签中有span标签，垂直居中时pc与移动的坑
- Sublimt HTML/CSS代码快速编写神器
- css的文本装饰，文本缩进，空白符，换行符使用示例
- CSS属性-1
- CSS3属性: Flexbox 快速上手记
- CSS布局 ——从display，position， float属性谈起
- CSS 文字多行超长，自动用省略号"..."表示
- QListWidget与QTableWidget的使用以及样式设置
- CSS权威指南-@import
- css 单行文字溢出与多行文字溢出显示...
- 聊一聊移动web分辨率的那些事儿
- CSS中模糊滤镜
- ng-style用法
- CSS权威指南-候选样式表