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

.a，.b｛逗號指相同的css樣式｝

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

.a>.b｛大於號指子代元素｝

相關標籤/搜索