CSS 选择器

我们知道网页由一个个节点组成,那么我们可以使用 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 的所有节点

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     

    

 

posted @ 2019-03-14 14:21  孔雀东南飞  阅读(265)  评论(0编辑  收藏  举报