css派生选择器、id选择器、类选择器、属性选择器

1.派生选择器

也叫上下文选择器，可以根据上下文关系来定义样式。无需为特别为元素设置id 或者class，使代码更简单。

例如.希望列表中的，变成斜体。

li strong {
font-style: italic;
font-weight: normal;
}

施加影响的html.

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

1. 我是斜体字。这是因为 strong 元素位于 li 元素内。


2. 我是正常的字体。

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}

施加影响的html:

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead isblue.

2.css id 选择器

id 选择器以＃来定义。每个id 属性只能在每个 HTML 文档中出现一次。即一个id只能给一个标签唯一使用，不能赋值给多个标签。

id 选择器经常与派生选择器连用。

例.

#red {color:red;}
#green {color:green;}

施加影响的html:

这个段落是红色。

这个段落是绿色。

例.#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

注释：id是sidebar的标签内的 段落 会被设置此样式。也就是说p标签只是其中一个。如果div有 sidebar这个id,那么其中的p标签会被设置成上述样式。

3.类选择器

类选择器以 . 号定义。

class也可以作为派生选择器。.fancy td

元素也可以基于它们的类二被选择。td.fancytd.

.center {text-align: center}

施加影响的html:

This heading will be center-aligned

This paragraph will also be center-aligned.

例.

.fancy td {
color: #f60;
background: #666;
}

注释：类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字.

例.

td.fancy {
color: #f60;
background: #666;
}

施加影响的html:

3.属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

[title]
{
color:red;
}

4.属性和值选择器

[title=W3School]
{
border:5px solid blue;
}
例1.属性和值选择器：多个值。适用于由空格分隔的属性值：[title~=hello] { color:red; }

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

可以应用样式：

Hello world

Hello W3School students!

---

例2.适用于由连字符分隔的属性值：[lang|=en] { color:red; }

可以应用样式：

Hello!

Hi!

---

无法应用样式：

Hi!

Hao!

5.表单样式（同样也给属性加方括号，只是前面加上表单的标签）

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
5.创建css

当读到一个样式表时，浏览器会根据它来格式化html，插入样式表的方法有：外部样式表、内部样式表、内联样式表。

(1) 外部样式表：

当样式需要应用到很多页面时，外部样式表是理想的选择。

每个页面使用标签链接到样式表。标签在标签里。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

(2) 内部样式表：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

(3) 内联样式：

This is a paragraph

(4) 多重样式：

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如：外部样式表拥有针对 h3 选择器的三个属性：

h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;