【零基础学习web前端】CSS选择器（元素，群组，类，ID，后代）

Amy

【零基础学习web前端】CSS选择器（元素，群组，类，ID，后代）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

[C#] 纯文本查看 复制代码

1. 元素选择器
2.群组选择器
3.类选择器
4.ID选择器
5.后代选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

一、元素选择器

一个完整的HTML页面是由很多不同的元素组成。元素选择器，是直接使用HTML元素的名称作为选择器（如 html、p、h1、em、a、img等），换句话说，文档的元素就是最基本的选择器。由于使用元素的名称作为选择器，在W3C标准中，又把元素选择器称为类型选择器、标签选择器。

元素选择器匹配该类型的元素，并匹配DOM树中该类型元素的每一个实例，并为它们应用样式。如：

html { color：red }

h1 { color:blue }


二、群组选择器
假设希望 h2 元素和段落都是红色，则可以这样写
h2,p { color:red }
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:red;）将应用到这两个选择器所引用的元素。

多个选择器也可以使用这个规则，如

[CSS] 纯文本查看 复制代码

html,h2,p,a,table{
            color:red;
            font-size: 10px;
        }

三、类选择器
类选择器根据类名来选择，前面用“.”来标志，如：

[CSS] 纯文本查看 复制代码

.demoName{
            color: red;
        }

这需要在HTML中，元素先定义一个class的属性，如：

[HTML] 纯文本查看 复制代码

<p class="demoName">
        这句话要红色的
    </p>
    <h2 class="demoName">
        这句话也要红色的
    </h2>

两个元素的class都是demoName，则两个都应用这个css。

四、ID选择器
ID选择器类似于类选择器，ID选择器前面是用#号标志的。
ID选择器具有唯一性，即同一个id在同一个文档页面中只能出现一次。

[CSS] 纯文本查看 复制代码

#demoName{
            color: red;
        }

这里表示id为demoName的元素设置字体为红色。
在页面中定义一个元素的id为demoName，如：

[HTML] 纯文本查看 复制代码

<div id="demoName">
        这些区域的字颜色为红色
    </div>

五、后代选择器
后代选择器又称包含选择器，用来选择特定元素或元素后代，将父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
后代选择器中的元素不仅只能有两个，对于多层祖先后代关系，可以有多个空格来分开。
例如只希望h1元素中的espan元素应用样式，

[CSS] 纯文本查看 复制代码

h2 span{
            color: red;
        }

这个规则只会将h2中的span元素文本变成红色，其他span元素不会应用这个颜色

[HTML] 纯文本查看 复制代码

<h2>
        这是<span>重要的</span>标题
    </h2>
    <span>这也是重要的标题</span>

图示：

竹林风

不错，不错！加油，看好你哦

站长苏飞

1. 元素选择器
2.群组选择器
3.类选择器
4.ID选择器
5.后代选择器

范范

我只是路过打酱油的。

Amy

先写了一部分，下篇继续更新

liu

强烈支持楼主ing……

惜

楼主加油，我们都看好你哦。