您的位置：首页 > Web前端 > CSS

CSS学习笔记—选择器

2017-10-02 17:10 411 查看

一、基本选择器（三种）

元素选择器

类选择器

ID选择器

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习笔记</title>
<style type="text/css">
/*元素选择器*/
p{
color: blue;
}
/*类选择器*/
.important{
color: red;
}
/*ID选择器*/
#intro{
color: yellowgreen;
}
</style>
</head>
<body>
<p>元素选择器</p>
<p class="important">类选择器</p>
<p id="intro">ID选择器</p>
</body>
</html>


基本选择器的优先级：元素选择器< 类选择器< ID选择器

二、选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}


三、后代选择器

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}


上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>


四、子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}


这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航