CSS 选择器

CSS概述

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

样式解决了一些普遍问题

  • 最初HTML标签设计为定义文档内容，通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。个人认为，起初为了在网络中能传输文档内容，使用最底层的socket原理发送读取的文档数据，通过浏览器解析成固定格式的可视化界面，后来慢慢有了协议也就是HTTP等。

  • 再后来创建文档内容清晰地独立于文档表现层的站点变得越来越困难，这就可以分离了。（W3C创建）

多重样式将层叠为一个

  • 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
  • 层叠次序：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
    • 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
      • 浏览器缺省设置
      • 外部样式表
      • 内部样式表（位于 标签内部） <style>
      • 内联样式（在 HTML 元素内部） （标签内）

CSS基本语法

  • CSS规定由两个主要的部分构成：选择器，以及一条或多条声明

    selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

例子：h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}

  • 值得不同写法

    • 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000，有时候后面6个字母一致时我们选择省略

      p { color: #ff0000; }

p { color: #f00; }  #节省版本 这里为了方便我是用#键表示注释

#颜色得其他表示方式
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
p { color: rgba(255,255,255,.9); }  #表示透明度，最后一位

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

  • 什么时候要引号

    #如果值为若干单词，则要给值加引号，也就是说不是关键字时
p {font-family: "sans serif";}

多重声明

  • 如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

    p {text-align:center; color:red;}	

#你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

  • 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

    body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

#是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

选择器的分组

  • 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

    h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承及其问题

  • 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

    body {
     font-family: Verdana, sans-serif;
     }

    根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

    通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

    但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？

  • 友善地对待Netscape4

    • 幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

      body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

  • 继承是一个诅咒吗？

    • 如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

      body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

CSS派生选择器

（下面包含后代选择器、子元素选择器、相邻兄弟选择器，因为他们呢都是根据上下文关系地）

  • 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

  • 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

  • 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

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

#下列代码中就是因为派生继承使得再li中的strong有斜体地功能
    <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>

CSS后代选择器

  • 后代选择器（descendant selector）又称为包含选择器。

    后代选择器可以选择作为某元素后代的元素。

  • 根据上下文选择元素：我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

    h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中,当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

  • 语法解释

    • 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

      因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

CSS子元素选择器

  • 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，其实就是再后代选择器下，范围略小了一点

  • 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（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>

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。中间没有其他嵌套关系

  • 当然可以结合后代选择器和子选择器

    table.company td > p

#上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

CSS相邻兄弟选择器

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

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

    #例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”

  • 语法解释

    相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）与子结合符一样，相邻兄弟结合符旁边可以有空白符。

  • 代码示例

    <div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

上面地代码中，有序列表和无序列表是兄弟，而里面地li之间地关系最多算堂兄，所以不会相互影响
li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

  • 结合其他选择器

    html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

CSS ID选择器

  • 在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

  • 语法：ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

    *#intro {font-weight:bold;}
与类选择器一样，ID 选择器中可以忽略通配选择器，表示全部含有这个id地标签。前面的例子也可以写作：
#intro {font-weight:bold;}

以下是一个实际 ID 选择器的例子：
<p id="intro">This is a paragraph of introduction.</p>

  • 类选择器和ID选择器地区别

    区别 1：只能在文档中使用一次
    与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表
	不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义
	类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：
	
#mostImportant {color:red; background:yellow;}

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

  • 区分大小写

    请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
#intro {font-weight:bold;}

<p id="Intro">This is a paragraph of introduction.</p>
也就是上面地代码没有效果

CSS元素选择器

  • ​ 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
  • 类型选择器:在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

CSS选择器分组

  • 假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

    h2, p {color:gray;}

    将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起，对此没有任何限制。

    • 例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

      body, h2, p, table, th, td, pre, strong, em {color:gray;}

通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

  • 通配符选择器

    • CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

      例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
将所有外边框距设置为0
*{margin：0}

CSS类选择器

  • 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

    • 在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

      为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

      <h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

#在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

    • 语法

      *.important {color:red;}
#如果你想所有的这个class都有这个类，可要也可不要*，也可以加元素名
.important {color:red;}

  • 结合元素选择器

    • 类选择器可以结合元素选择器来使用。例如，您可能希望只有段落显示为红色文本：

      p.important {color:red;}

  • CSS多类选择器

    • 多分类是否可以合并

      <p class="important warning"> 
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

但是要是没有匹配齐，就会报错
.important.urgent {background:silver;}

下面和上面没有匹配齐，所以没有效果。
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

CSS属性选择器详解

  • 概念：属性选择器可以根据元素的属性及属性值来选择元素。

  • 简单属性选择：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

    • 例1：如果您希望把包含标题（title）的所有元素变为红色，可以写作：

      *[title] {color:red;}

    • 例2：与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

      a[href] {color:red;}

#例如：
<style type="text/css">
a[href]{color:red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<a name="w3school">W3School</a>

  • 例3：还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

    a[href][title] {color:red;}

  • 例4：可以采用一些创造性的方法使用这个特性。例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

    img[alt] {border: 5px solid red;}

  • 根据具体的属性值选择

    • 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

      例1：假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

      a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

#例2
<p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：
p[class="important warning"] {color: red;}

  • 根据部分属性值选择

    • 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

      • 假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

        p[class~="important"] {color: red;}

<style type="text/css">
p[class~="important"]
{color: red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h1>无法应用样式：</h1>
<p class="warning">This is a paragraph.</a>
</body>

如果忽略了波浪号，则说明需要完成完全值匹配。

    • 部分值属性选择器与点号类名记法的区别？

      • 该选择器等价于我们在类选择器中讨论过的点号类名记法。

        也就是说p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

        那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

        img[title~="Figure"] {border: 1px solid gray;}

  • 子串匹配属性选择器

    • 下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。

    • 下表是对这些选择器的简单总结：

      • 举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

        a[href*="w3school.com.cn"] {color: red;}

#示例代码：
<style type="text/css">
a[href*="w3school.com.cn"]
{color: red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="http://www.w3school.com.cn/">W3School</a>
<a href="http://www.w3school.com.cn/css/">CSS</a>
<a href="http://www.w3school.com.cn/html/">HTML</a>
<hr />
<h1>无法应用样式：</h1>
<a href="http://www.w3c.org/">W3C</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.apple.com.cn">Apple</a>
</body>

  • 特定属性选择器

    *[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|="val"] 可以用于任何属性及其值。假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}

CSS伪类(针对类来说，来修饰类)

  • 伪类语法

    selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}

#示例
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}   #改变颜色

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}   #改变大小

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}  #改变背景

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}   #改变字体

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}  #添加下划线
</style>
</head>

<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>

  • 锚伪类

    • 链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

      a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

  • 伪类和css类配合使用

    • 代码示例

      a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。

CSS2-：first-child 伪类

  • 您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：

    <div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

  • 例1：匹配第一个

    元素

    #在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：
<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

  • 例2，匹配所有

    元素中的第一个元素：

    <html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

  • 例3，匹配所有作为第一个子元素的

    元素中的所有 元素

    在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

CSS2 -： lang伪类

  • :lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

    <html>
<head>
<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪类总结：

CSS伪元素

  • 伪元素的语法：

    selector:pseudo-element {property:value;}

  • CSS 类也可以与伪元素配合使用：

    selector.class:pseudo-element {property:value;}

  • :first-line 伪元素

    • "first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

      <head>
<style type="text/css">
p:first-line 
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>

注释："first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
    font
    color
    background
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

  • :first-letter 伪元素

    • "first-letter" 伪元素用于向文本的首字母设置特殊样式：

      <head>
<style type="text/css">
p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>

<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>

#注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-letter" 伪元素：
    font
    color
    background
    margin
    padding
    border
    text-decoration
    vertical-align (仅当 float 为 none 时)
    text-transform
    line-height
    float
    clear

  • 伪元素和CSS类

    • 伪元素可以和CSS类配合使用

      p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

  • 可以结合多个伪元素来使用

    • 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

      <head>
<style type="text/css">
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line 
  {
  color:#0000ff;
  font-variant:small-caps;
  }
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>

  • CSS2 - :before 伪元素

    • ":before" 伪元素可以在元素的内容前面插入新内容。

      下面的例子在每个 <h1> 元素前面插入一幅图片：且添加的元素无法被选中
<head>
<style type="text/css">
h1:before {content:url(/i/w3school_logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
</body>

  • CSS2 - :after 伪元素

    • ":after" 伪元素可以在元素的内容之后插入新内容。

      <head>
<style type="text/css">
h1:after {content:url(/i/w3school_logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
</body>

  • 伪元素总结：
posted @ 2019-06-04 16:09  独角兕大王  阅读(141)  评论(0)    收藏  举报