CSS 引入方式及选择器的用法的初体验

来源：互联网发布：vb工控软件开发编辑：程序博客网时间：2024/06/05 19:27

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>

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

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

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

多重样式

将层叠为一个样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

提示:如果你使用了外部文件的样式在 <head>中也定义了该样式，则内部样式表会取代外部文件的样式。

CSS 选择器

.class

.class 选择器为所有具有指定类的元素添加样式。

.class 选择器使用 “.” 来选择具有包含特定值的类的元素。

类值的名称必须紧跟在点后面。

多个类值可以链接在一起。

<!DOCTYPE html><html><head><style>.intro{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div class="intro"><p>My name is Donald.</p><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

#id

#id 选择器指定具有id的元素的样式。

#id 选择器使用 “#” 来选择具有包含特定值的ID的元素。

id值的名称必须紧跟在octothorpe（＃）后面。

<!DOCTYPE html><html><head><style>#firstname{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div class="intro"><p id="firstname">My name is Donald.</p><p id="hometown">I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

* 选择器选择所有元素。

* 选择器匹配文档中的每个元素，包括html和body元素。

* 选择器可用于为另一个元素内的所有元素添加样式。

<!DOCTYPE html><html><head><style>div *{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div class="intro"><p id="firstname">My name is Donald.</p><p id="hometown">I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

element

element 选择器将样式添加到具有指定元素名称的所有元素。

<!DOCTYPE html><html><head><style>p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><p id="firstname">My name is Donald.</p><p id="hometown">I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

element,element

用于选取第一个指定的元素之后(不是内部)紧跟的元素。

要使用相同的样式来样式化多个元素，我们可以使用逗号分隔每个元素名称。这样，我们将选择器分组在一起，并对它们进行同样的样式。

称为组选择器。

<!DOCTYPE html><html><head><style>h1,p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><p>My name is Donald.</p><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>

element element

element element 称为嵌套选择器或后代选择器。它用于选择元素内部的元素。

我们可以使用后代选择器来根据它的状态选择一个元素作为另一个元素的后代。

匹配的元素可以是祖先元素的孩子，孙子，曾孙等等。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>div p{background-color:yellow;}</style></head><body><div><p>段落 1。 在 div 中。</p><p>段落 2。 在 div 中。</p></div><p>段落 3。不在 div 中。</p><p>段落 4。不在 div 中。</p></body></html>

element>element

element>element 选择器为特定父元素的元素添加样式。

element1>element2也称为子选择器。

此选择器将基于其状态的元素作为另一个元素的子元素。这比后代选择器更具限制性，因为只有一个孩子将被匹配。

注意: 元素没有被选中是不能直接指定父级的子元素。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>div>p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><div><span><p>I will not be styled.</p></span></div><p>My best friend is Mickey.</p></body></html>

element+element

element+element选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

element+element也称为相邻同级选择器。

此选择器选择作为另一个元素的以下相邻兄弟的元素。两个元素之间的任何文本都将被忽略;仅考虑元素及其在文档树中的位置。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>div+p{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div><h2>My name is Donald</h2><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p><p>I will not be styled.</p></body></html>

[attribute]

[attribute]选择器选择具有指定属性的元素。

element1 [attribute]也称为简单属性选择器。

简单属性选择器根据属性的存在选择任何元素，而不管属性的值。

选择所有带有target属性的 <a>元素

<!DOCTYPE html><html><head><style>a[target]{background-color:yellow;}</style></head><body><p>The links with a target attribute gets a yellow background:</p><a href="http://www.w3cschool.cn">w3cschool.cn</a><a href="http://www.disney.com" target="_blank">disney.com</a><a href="http://www.wikipedia.org" target="_top">wikipedia.org</a><p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p></body></html>

[attribute = value]

[attribute = value] 选择器选择具有指定属性和值的元素。

element1 [attr =“value"] 也称为精确属性值选择器。

element1 [attr =“value”] 基于属性的精确和完整值选择任何元素。

<!DOCTYPE html><html><head><style>a[target=_blank]{background-color:yellow;}</style></head><body><p>The link with target="_blank" gets a yellow background:</p><a href="http://www.w3cschool.cn">w3cschool.cn</a><a href="http://www.disney.com" target="_blank">disney.com</a><a href="http://www.wikipedia.org" target="_top">wikipedia.org</a><p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p></body></html>

[attribute^=value]选择器匹配元素属性值带指定的值开始的元素。

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。

[attribute*=value] 选择器匹配元素属性值包含指定值的元素。

:first-child

:first-child选择器匹配第一个子元素。

:first-child是一个伪类，它适用于任何元素，它是另一个元素的第一个子元素。

使用:first-child伪类，一个元素只有当它是另一个元素的第一个子元素时才匹配。例如，p:first-child将选择作为某个其他元素的第一个子元素的任何p元素。如果要选择段落的第一个子元素，我们可以使用p>*:first-child。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>p:first-child{background-color:yellow;}</style></head><body><p>This paragraph is the first child of its parent (body).</p><h1>Welcome to My Homepage</h1><p>This paragraph is not the first child of its parent.</p><div><p>This paragraph is the first child of its parent (div).</p><p>This paragraph is not the first child of its parent.</p></div><p><b>注意:</b> :first-child作用于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p></body></html>

:nth-child(n)选择器匹配父元素中的第n个子元素。参数是元素的索引。索引从1开始。

n 可以是一个数字，一个关键字，或者一个公式。

element1〜element

element1〜element2选择器选择前面有element1的element2。

element1 和 element2 这两个元素必须具有相同的父元素。element2不必紧跟在element1之前。

<!DOCTYPE html><html><head><style> p~ul{background:#ff0000;}</style></head><body><div>A div element.</div><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul><p>The first paragraph.</p><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul><h2>Another list</h2><ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul></body></html>

:first-of-type

:first-of-type选择器匹配元素其父级是特定类型的第一个子元素。

提示: 等同于 :nth-of-type(1)。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> p:first-of-type{background:#ff0000;}</style></head><body><h1>This is a heading</h1><p>The first paragraph.</p><p>The second paragraph.</p><p>The third paragraph.</p><p>The fourth paragraph.</p></body></html>

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。参数是元素的索引。索引从1开始。

n可以是一个数字，一个关键字，或者一个公式。

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素(CSS3)。参数是元素的索引。索引从1开始。