mirror of
https://github.com/beyondx/Notes.git
synced 2026-02-03 18:33:26 +08:00
159 lines
4.4 KiB
Plaintext
159 lines
4.4 KiB
Plaintext
Content-Type: text/x-zim-wiki
|
||
Wiki-Format: zim 0.4
|
||
Creation-Date: 2011-05-15T17:05:31+08:00
|
||
|
||
====== CSS Pseudo-elements ======
|
||
Created Sunday 15 May 2011
|
||
http://www.w3schools.com/css/css_pseudo_elements.asp
|
||
|
||
CSS pseudo-elements are used to **add special effects to some selectors**.
|
||
|
||
===== Syntax =====
|
||
|
||
The syntax of pseudo-elements:
|
||
|
||
**selector:pseudo-element {property:value;}**
|
||
|
||
CSS classes can also be used with pseudo-elements:
|
||
|
||
**selector.class:pseudo-element {property:value;}**
|
||
|
||
===== The :first-line Pseudo-element =====
|
||
|
||
The "first-line" pseudo-element is used to **add a special style to the first line of a text**.
|
||
|
||
In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):
|
||
|
||
==== Example ====
|
||
**p:first-line**
|
||
{
|
||
color:#ff0000;
|
||
font-variant:small-caps;
|
||
}
|
||
|
||
|
||
=== Note: ===
|
||
The "first-line" pseudo-element can only be used with **block-level elements**.
|
||
|
||
=== Note: ===
|
||
The following properties apply to the "first-line" pseudo-element:
|
||
|
||
font properties
|
||
color properties
|
||
background properties
|
||
word-spacing
|
||
letter-spacing
|
||
text-decoration
|
||
vertical-align
|
||
text-transform
|
||
line-height
|
||
clear
|
||
|
||
===== The :first-letter Pseudo-element =====
|
||
|
||
The "first-letter" pseudo-element is used to** add a special style to the first letter of a text**:
|
||
|
||
=== Example ===
|
||
p:first-letter
|
||
{
|
||
color:#ff0000;
|
||
font-size:xx-large;
|
||
}
|
||
|
||
|
||
**Note: **The "first-letter" pseudo-element can only be used with** block-level elements**.
|
||
|
||
**Note: **The following properties apply to the "first-letter" pseudo- element:
|
||
|
||
font properties
|
||
color properties
|
||
background properties
|
||
margin properties
|
||
padding properties
|
||
border properties
|
||
text-decoration
|
||
vertical-align (only if "float" is "none")
|
||
text-transform
|
||
line-height
|
||
float
|
||
clear
|
||
|
||
===== Pseudo-elements and CSS Classes =====
|
||
|
||
Pseudo-elements can be combined with CSS classes:
|
||
|
||
p.article:first-letter {color:#ff0000;}
|
||
|
||
<p class="article">A paragraph in an article</p>
|
||
|
||
The example above will display the first letter of all paragraphs with class="article", in red.
|
||
|
||
===== Multiple Pseudo-elements =====
|
||
|
||
Several pseudo-elements can also be combined.
|
||
|
||
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
|
||
|
||
=== Example ===
|
||
p:first-letter
|
||
{
|
||
color:#ff0000;
|
||
font-size:xx-large;
|
||
}
|
||
p:first-line
|
||
{
|
||
color:#0000ff;
|
||
font-variant:small-caps;
|
||
}
|
||
|
||
**PS：对p用多个伪元素**
|
||
|
||
===== CSS - The :before Pseudo-element =====
|
||
|
||
The ":before" pseudo-element can be used to** insert some content before the content of an element**.
|
||
|
||
**PS：**插入的内容将作为原来元素内容的一部分
|
||
|
||
The following example inserts an image before each <h1> element:
|
||
|
||
==== Example ====
|
||
h1:before
|
||
{
|
||
__content:__url(smiley.gif);
|
||
}
|
||
|
||
===== CSS - The :after Pseudo-element =====
|
||
|
||
The ":after" pseudo-element can be used to insert some content after the content of an element.
|
||
|
||
**PS：**插入的内容将作为原来元素内容的一部分，如:
|
||
dir:after {
|
||
content:"the appended line"
|
||
}
|
||
字符串"the appended line"将作为div内部内容的一部分而被div包含，这种特性可以用来enclose a floated element。
|
||
{{../float/How_to_completely_enclose_a_floated_element_in_CSS2/pesudo-of-after.png?width=600}}
|
||
如上图所示，“The append text”包含在dvi的空间内。
|
||
|
||
The following example inserts an image after each <h1> element:
|
||
Example
|
||
h1:after
|
||
{
|
||
content:url(smiley.gif);
|
||
}
|
||
|
||
|
||
|
||
===== All CSS Pseudo Classes/Elements =====
|
||
**Selector Example Example description**
|
||
:link a:link Selects all unvisited links
|
||
:visited a:visited Selects all visited links
|
||
:active a:active Selects the active link
|
||
:hover a:hover Selects links on mouse over
|
||
:focus input:focus Selects the input element which has focus
|
||
:first-letter p:first-letter Selects the first letter of every <p> element
|
||
:first-line p:first-line Selects the first line of every <p> element
|
||
:first-child p:first-child Selects every <p> elements that is the first child of its parent
|
||
:before p:before Insert content before every <p> element
|
||
:after p:after Insert content after every <p> element
|
||
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
|