CSS学习笔记—选择器

来源：互联网发布：疯狂java讲义最新版pdf 编辑：程序博客网时间：2024/05/29 13:57

一、基本选择器（三种）

元素选择器
类选择器
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>

阅读全文

0 0