众妙之门

业精于勤,荒于嬉;行成于思,毁于随

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

css中“~”

element1~element2 选择器匹配出现在element1后面的element2。
element1和element2这两种元素必须具有相同的父元素,但element2不必紧跟在element1的后面。

如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<style>
    p~ul { background: #00ccff; }
</style>
<body>
<p>测试~</p>
<ul><li>a</li><li>b</li></ul>
<ul><li>1</li><li>2</li></ul>
</body>
</html>

结果:

element,element
div,p
选择所有<div>元素和<p>元素

element element
div p
选择<div>元素内的所有<p>元素

element>element
div>p
选择所有父级是 <div> 元素的 <p> 元素,(只选择第一代)

element+element
div+p
选择所有紧接着<div>元素之后的<p>元素

css中“>”

css3特有的选择器,A>B 表示选择A元素的所有子B元素。与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。

 .a,.b{逗号指相同的css样式}

.a .b{空格指所有后代元素}

.a>.b{大于号指子代元素}

posted on 2019-06-10 12:45  xuanm  阅读(3415)  评论(0编辑  收藏  举报