CSS 選擇器

時間 2019-11-30

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

咱們知道網頁由一個個節點組成，那麼咱們能夠使用 CSS 選擇器來定位節點：html

(1) 以下，若是咱們想選擇 id 爲 container 的節點，用 CSS 選擇器表示爲：#container
(2) 以下，若是咱們想選擇 class 爲 wrapper 的節點，用 CSS 選擇器表示爲：.wrapper
(3) 以下，若是咱們想選擇 class 爲 wrapper 節點下的 h2 標籤，用 CSS 選擇器表示爲：.wrapper h2app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
</head>
<body>
<div id="container">
<div class="wrapper">
    <p class="text">Hello World!</p>    
    <h2 class="title">Hello World!</h2>
</div>
</div>
</body>
</html>

選擇器	例子	例子描述
.class	.info	選擇 class = "info" 的全部節點
#id	#name	選擇 id = "name" 的全部節點
*	*	選擇全部節點
element	p	選擇全部 p 節點
element, element	div, p	選擇全部 div 和 p 節點
element element	div p	選擇 div 節點內部的全部 p 節點
element>element	div>p	選擇父節點爲 div 的全部 p 節點
[attribute]	[target]	選擇帶有 target 屬性的全部節點
[attribute=value]	[target=blank]	選擇 target="blank" 的全部節點
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 flower 的全部節點

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。