CSS选择器详解-优快云博客

本文详细介绍了CSS选择器的使用方法，包括如何通过ID、类名、属性等选择网页中的元素，适用于前端开发者学习和参考。

我们知道网页由一个个节点组成，那么我们可以使用 CSS 选择器来定位节点：

(1) 如下，如果我们想选择 id 为 container 的节点，用 CSS 选择器表示为：#container
(2) 如下，如果我们想选择 class 为 wrapper 的节点，用 CSS 选择器表示为：.wrapper
(3) 如下，如果我们想选择 class 为 wrapper 节点下的 h2 标签，用 CSS 选择器表示为：.wrapper h2

<!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 的所有节点