css层次选择器的理解
2017-10-15 15:43
363 查看
1、css后代选择器
（1）语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，若em元素中还有其他元素，也会被选择。h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。
（2）语法：h1>em{color:red;} 仅仅选择直接子元素em，子元素中若有其他元素，则不再选择
2.prev+next（前+后）选择器，如li+p{}，则选择紧跟在li元素后面的所有p元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+li{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
例子中的选择器可以选择紧接在第一个li后面的两个li，运行结果
这个例子可以可能有点迷惑性，使用了li+li
把代码改变一下，
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
这样写，有更加深刻的理解
运行结果，如图
3.prev~siblings(前~兄弟)选择器
该选择器可以选取指定的prev元素后面根据siblings过滤的元素。例如，使用#prev~div可以选取所有（指在同一个嵌套中的）在id为prev的元素后面的div元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li~p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<p>456465465</p>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
<p>54654654654685465</p>
</div>
</body>
</html>
运行结果：
（1）语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，若em元素中还有其他元素，也会被选择。h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。
（2）语法：h1>em{color:red;} 仅仅选择直接子元素em，子元素中若有其他元素，则不再选择
2.prev+next（前+后）选择器，如li+p{}，则选择紧跟在li元素后面的所有p元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+li{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
例子中的选择器可以选择紧接在第一个li后面的两个li，运行结果
这个例子可以可能有点迷惑性，使用了li+li
把代码改变一下，
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
这样写，有更加深刻的理解
运行结果，如图
3.prev~siblings(前~兄弟)选择器
该选择器可以选取指定的prev元素后面根据siblings过滤的元素。例如，使用#prev~div可以选取所有（指在同一个嵌套中的）在id为prev的元素后面的div元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li~p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<p>456465465</p>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
<p>54654654654685465</p>
</div>
</body>
</html>
运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5学习_day02(2)--css层次选择器
- CSS中ID选择器只能用一次的理解
- 理解CSS中的三种选择器>+~
- css03层次选择器
- 深入理解CSS中选择器的逻辑处理
- 深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）
- CSS层次选择器温故-2
- CSS之旅——第二站 如何更深入的理解各种选择器
- CSS中背景background-position负值定位深入理解
- CSS的选择器
- CSS （一）初步理解
- css之选择器总结
- 【CSS 学习】CSS 选择器
- CSS 选择器权重优先级计算规则
- html 学习(css class选择器)
- Reveal通过视图层次帮你理解复杂的app 并提供相关Debug功能
- CSS入门基础——选择器等（1）
- HTML基础之CSS-id选择器
- CSS 相对定位与绝对定位的理解
- html中css三种常见的样式选择器