CSS 基础（017_伪元素）

最新推荐文章于 2024-07-16 17:18:30 发布

柯南道尔2606

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量341

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_pseudo_elements.asp

翻译：

CSS 伪元素

什么是伪元素？

CSS 伪元素用以式样化元素的特定部分。
例如，它有以下使用：

式样化首字母、行或元素
在元素内容的前、后插入新内容

语法

伪元素的语法：

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

注意双冒号符号 - ::first-line VS :first-line
在 CSS3 中，对伪元素使用双冒号替代单冒号符号，这是 W3C 用以区别伪类和伪元素的一次尝试。
在 CSS2 和 CSS1 中，对伪类和伪元素均使用单冒号语法。
根据向后兼容原则，在 CSS2 和 CSS1 中使用单冒号语法是可行的。

The ::first-line Pseudo-element

::first-line 伪元素用以对文本的首行进行特殊式样化。
下列示例是格式化所有 <p> 元素内的文本首行：
The ::first-line Pseudo-element

<!DOCTYPE html>
<html>
    <head>
        <style>
            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. Some more text. And even more, and
            more, and more, and more, and more, and more, and more, and more, and
            more, and more, and more, and more.
        </p>
    </body>
</html>

注意：::first-line 伪元素只能被应用于块级元素。
以下属性应用于 ::first-line 伪元素：

font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

The ::first-letter Pseudo-element

::first-letter 伪元素用以对文本的首字母添加特殊式样。
以下示例是格式化所有 <p> 元素内的文本首字母：
The ::first-letter Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
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 character of a text!</p>
</body>
</html>

注意：::first-letter 伪元素只能被应用于块级元素。
以下属性应用于 ::first-letter 伪元素：

font 属性
color 属性
background 属性
margin 属性
padding 属性
border 属性
text-decoration
vertical-align（只在不浮动的情况下）
text-transform
line-height
float
clear

Pseudo-elements and CSS Classes

伪元素可以和 CSS 类结合使用：
Pseudo-elements and CSS Classes

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
    color: #ff0000;
    font-size: 200%;
}
</style>
</head>
<body>
    <p class="intro">This is an introduction.</p>
    <p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>

上面的示例将以红色、大号字体显示以类值为 intro 的段落的首字母。

Multiple Pseudo-elements

多个伪元素也可以结合使用。
在以下示例中，段落首字母将以红色、大号字体显示。首行剩余部分字母将以蓝色、小型大写字母的式样显示。段落剩余部分将以默认字体号和颜色显示：
Multiple Pseudo-elements

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
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!
        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>
</html>

CSS - The ::before Pseudo-element

::before 伪元素用以在元素内容之前插入相应内容。
以下示例是在每一个 <h1> 元素内容之前插入图片：
CSS - The ::before Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
    content: url(http://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>The ::before pseudo-element inserts content before the content of an element.</p>

    <h1>This is a heading</h1>
    <p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>

CSS - The ::after Pseudo-element

::after 伪元素用以在元素内容之后插入相应内容。
以下示例是在每一个 <h1> 元素内容之后插入图片：
CSS - The ::after Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
    content: url(http://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>The ::after pseudo-element inserts content after the content of an element.</p>

    <h1>This is a heading</h1>
    <p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>

CSS - The ::selection Pseudo-element

::selection 伪元素用以匹配被用户选择的元素部分。
以下 CSS 属性可被应用于 ::selection：
color，background，cursor 和 outline

下列示例使被选择的文本以黄色背景、红色字体显示：
CSS - The ::selection Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: red;
    background: yellow;
}
</style>
</head>
<body>
    <h1>Select some text on this page:</h1>
    <p>This is a paragraph.</p>
    <div>This is some text in a div element.</div>
    <p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
    <p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>
</body>
</html>

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（017_伪元素）

原始网址：http://www.w3schools.com/css/css_pseudo_elements.asp翻译：CSS 伪元素什么是伪元素？CSS 伪元素用以式样化元素的特定部分。例如，它有以下使用：式样化首字母、行或元素在元素内容的前、后插入新内容语法伪元素的语法：selector::pseudo-element { prop
复制链接

扫一扫