天天看点
返回

CSS学习笔记（十）CSS 组合器，伪类，伪元素CSS 组合器CSS 伪类CSS 伪元素

CSS 组合器

CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择

<div>

元素内的所有

<p>

元素：（包含在里面的所有p元素）

实例

div p {
  background-color: yellow;
}

子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于

<div>

元素子元素的所有

<p>

元素：（只包含子类的p元素）

实例

div > p {
  background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随

<div>

元素之后的所有

<p>

元素：（同级且紧随其后）

实例

div + p {
  background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于

<div>

元素的同级元素的所有

<p>

元素：（同级的所有p元素）

实例

div ~ p {
  background-color: yellow;
}

CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

详细参照css链接CSS学习笔记（七）

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

悬停在

<div>

 上

在

<div>

元素上使用 :hover 伪类的实例：

实例

div:hover {
  background-color: blue;
}

简单的工具提示悬停

把鼠标悬停到

<div>

元素以显示

<p>

元素（类似工具提示的效果）：

实例

（鼠标悬停在div上会出现p的内容）

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - :first-child 伪类

:first-child

伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个

<p>

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何

<p>

元素：

实例

p:first-child {
  color: blue;
}

匹配所有

<p>

 元素中的首个

<i>

 元素

在下面的例子中，选择器匹配所有

<p>

元素中的第一个 元素：

实例

p i:first-child {
  color: blue;
}

匹配所有首个

<p>

 元素中的所有

<i>

 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的

<p>

元素中的所有

<i>

元素：

实例

p:first-child i {
  color: blue;
}

CSS - :lang 伪类

:lang

伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，

:lang

为属性为

的

<q>

元素定义引号：

实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

结果：

CSS学习笔记（十）CSS 组合器，伪类，伪元素CSS 组合器CSS 伪类CSS 伪元素

所有 CSS 伪类：标准伪类索引

CSS 伪元素

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

语法

伪元素的语法：

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

::first-line

 伪元素

::first-line

伪元素用于向文本的首行添加特殊样式。

下面的例子为所有

<p>

元素中的首行添加样式：

实例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：

::first-line

伪元素只能应用于块级元素。

以下属性适用于

::first-line

伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter

 伪元素

::first-letter

伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有

<p>

元素中文本的首字母格式：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：

::first-letter

伪元素只适用于块级元素。

下面的属性适用于

::first-letter

伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

伪元素和 CSS 类

伪元素可以与 CSS 类结合使用：

实例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

上面的例子将以红色和较大的字体显示 class=“intro” 的段落的首字母。

多个伪元素

也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS -

::before

 伪元素

::before

伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个

<h1>

元素的内容之前插入一幅图像：

实例

h1::before {
  content: url(smiley.gif);
}

CSS -

::after

 伪元素

::after

伪元素可用于在元素内容之后插入一些内容。

下面的例子在每个

<h1>

元素的内容之后插入一幅图像：

实例

h1::after {
  content: url(smiley.gif);
}

CSS -

::selection

 伪元素

::selection

伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于

::selection

：

color
background
cursor
outline

下例使所选文本在黄色背景上显示为红色：

（指的是你的鼠标选中的部分）

实例

::selection {
  color: red; 
  background: yellow;
}

所有 CSS 伪元素：标准伪元素索引

前端学习 css
上一篇: 伪类/伪元素 css
下一篇: Java必须知道的300个问题

继续阅读