码迷,mamicode.com
首页 > Web开发 > 详细

css中".",",",“~”和“>”符号的意义

时间:2019-06-10 14:01:29      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:doc   inf   head   lan   大于   zh-cn   charset   bsp   ack   

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{大于号指子代元素}

css中".",",",“~”和“>”符号的意义

标签:doc   inf   head   lan   大于   zh-cn   charset   bsp   ack   

原文地址:https://www.cnblogs.com/grasp/p/10997074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!