HTML教程 - 选择器

分享于 

5分钟阅读

html

  繁體

选择器

CSS选择器对于在页面上的元素子集上定义查询非常有用,查询允许根据在CSS样式表中的元素集合上声明一个样式。

下面是一个示例--如果我们想给文档中的所有段落涂上蓝色,我们可以简单地编写:


<style>
p {
 color: blue;
}
</style>
<p>I am blue</p>
<p class="example">I am also blue</p>
<p id="last" class="example">I am blue as well</p>

CSS选择器" p"将选择页面中的所有" p"(段落)。

用green为所有具有" example "类的" p"元素上色,注意,在这个例子中,CSS定义的顺序并不重要,因为第二个CSS选择器更具体。


<style>
p.example {
 color: green;
}

p {
 color: blue;
} 
</style>
<p>I am blue</p>
<p class="example">I am green now</p>
<p id="last" class="example">I am also green now</p>

我们可以重复相同的过程,但是这次添加一个ID选择器而不是类选择器。


<style>
p#last {
 color: red; 
}

p.example {
 color: green;
}

p {
 color: blue;
} 
</style>
<p>I am blue</p>
<p class="example">I am green now</p>
<p id="last" class="example">And now I am red</p>

CSS选择器还支持逗号标记,用于将相同的样式块应用于多个元素,本示例将h1h2和。


<style>
h1, h2, h3 {
 color: blue;
}

h4, h5, h6 {
 color: red;
}
</style>
<h1>h1 title</h1>
<h2>h2 title</h2>
<h3>h3 title</h3>
<h4>h4 title</h4>
<h5>h5 title</h5>
<h6>h6 title</h6>

后代

除了指定元素类型,ID和/或类名之外,可以创建特定的子选择器,例如,假设我们希望对具有<strong>的paragraph类中的所有标记。


<style>
.strongblue strong {
 color: blue; 
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <strong>second</strong> sentence.</p>

有两种子选择器,一种祖先选择器,一种是直接子选择器,以下是与直接子选择器相同的代码:


<style>
.strongblue > strong {
 color: blue; 
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <strong>second</strong> sentence.</p>

如果<strong>元素被封装在一个链接中,那么这个选择器将不能在它依赖。


<style>
.strongblue > strong {
 color: blue; 
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <a><strong>second</strong></a> sentence.</p>

querySelector和querySelectorAll方法

HTML5引入了新的document.querySelectordocument.querySelectorAll方法,它允许运行。

让我们看一个例子:


<p class="nice">This is a nice paragraph.</p>
<p class="nice">This is another nice paragraph.</p>
<p>This is a standard paragraph.</p>

<script>
 // this code colors the first nice paragraph in blue
 var firstNiceParagraph = document.querySelector(".nice");
 firstNiceParagraph.style.color ="blue";
</script>


相关文章