CSS（02）CSS选择器

一、元素（类型）选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

亲自试一试

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

因此，我们也可以为 XML 文档中的元素设置样式：

XML 文档：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
 <to>George</to>
 <from>John</from>
 <heading>Reminder</heading>
 <body>Don't forget the meeting!</body>
</note>

CSS 文档：

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }

to
  {
  font-size:28px;
  display: block;
  }

from
  {
  font-size:28px;
  display: block;
  }

heading
  {
  color: red;
  font-size:60px;
  display: block;
  }

body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

查看效果

通过上面的例子，您可以看到，CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。

二、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1 { text-align:center; color:red; }

尝试一下 »

Remark ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

三、class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

尝试一下 »

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

尝试一下 »

Remark 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

四、分组选择器

在样式表中有很多具有相同样式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p { color:green; }

尝试一下 »

五、嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

尝试一下 »

六、CSS 组合选择符

1、后代选择器(以空格分隔)

后代选择器用于选取某元素的后代元素。

以下实例选取所有元素插入到元素中:

div p { background-color:yellow; }

尝试一下 »

2、直接子元素选择器(以>大于号分隔）

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以下实例选择了元素中所有直接子元素 ：

div>p { background-color:yellow; }

尝试一下 »

3、相邻兄弟选择器（以+加号分隔）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于元素后的第一个元素:

div+p { background-color:yellow; }

尝试一下 »

4、后续兄弟选择器（以~破折号分隔）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 元素之后的所有相邻兄弟元素 :

div~p { background-color:yellow; }

尝试一下 »

七、属性选择器

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

  • "value 是完整单词" 类型的比较符号: ~=, |=
  • "拼接字符串" 类型的比较符号: *=, ^=, $=

下面的例子是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

尝试一下 »

1、属性值等于value

下面的实例改变了标题title='runoob'元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

尝试一下 »

2、属性中包含 value:

1、[attribute~=value] 属性中包含独立的单词为 value，例如：

[title~=flower]  -->

尝试一下 »

2、[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：

下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

[lang|=en] { color:blue; }

尝试一下 »

3、[attribute*=value] 属性中包含字符串，作字符串拆分只要能拆出来 value 这个词就行，例如：

[title*=flower]   -->

3、属性中以value首尾:

1、[attribute^=value] :attribute 属性以 value 开头

[lang^=en]    -->

2、[attribute$=value]:attribute 属性以 value 结尾

a[src$=".pdf"]

属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

尝试一下 »

posted on 2020-02-05 09:49  springsnow  阅读(222)  评论(0)  编辑  收藏  举报

导航