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

时间 2019-12-08

标签 css 符号意义栏目 CSS 繁體版

原文原文链接

css中“~”

element1~element2 选择器匹配出如今element1后面的element2。
element1和element2这两种元素必须具备相同的父元素，但element2没必要紧跟在element1的后面。css

如：html

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

结果：css3

element,element
div,p
选择全部<div>元素和<p>元素测试

element element
div p
选择<div>元素内的全部<p>元素spa

element>element
div>p
选择全部父级是 <div> 元素的 <p> 元素，（只选择第一代）code

element+element
div+p
选择全部紧接着<div>元素以后的<p>元素htm

css中“>”

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

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

css中“~”

css中“>”

.a，.b｛逗号指相同的css样式｝

.a .b｛空格指全部后代元素｝

.a>.b｛大于号指子代元素｝