CSS pseudo-classes and pseudo-elements

Source: Internet
Author: User

As the front-end personnel, every day to deal with fullscreen tags, elements, through the combination of elements and styles, showing a beautiful and elegant pages, including CSS Pseudo-class and pseudo-elements of the application, with the development of the front-end, developers use more and more integration technology, make our work faster and more efficient high-force lattice, The following is to organize the application of pseudo-class and pseudo-elements in CSS;

CSS pseudo-class:

What is a CSS pseudo-class (pseudo-class), Pseudo-class is to define the existence of a special state of the elements, this particular state at first thought is what high-tech gadgets, but in fact very good understanding, such as a input box, the default is enable& Unchecked, if it is disabled is checked, it becomes a special state, OK, give the most understandable is also the official case to see:

12345678910111213141516171819 /* 未访问的链接样式 */a:link {    color#FF0000;}/* 访问过的链接样式 */a:visited {    color#00FF00;}/* 鼠标滑过后的链接样式 */a:hover {    color#FF00FF;}/* 选中的链接样式 */a:active {    color#0000FF;}

As shown in the example, you can define a corresponding pseudo-element for an element and only take effect when you are in a defined state, and when you debug the style of a pseudo-element, you can use the console to regulate the state of the element:

and pseudo-classes can be used in conjunction with classes:

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

There is a more special pseudo-element Lang, which seems to use less often, is to define the style by defining different Lang types:

123456789101112131415 <!DOCTYPE html><html><head><style>q:lang(en) {    color:red}</style></head><body><p>呵呵<qlang="en">嘿嘿</q>哈哈</p</body></html>

is the following effect:

Of course, CSS pseudo-elements more than these, the writing is also various, but generally used only the first few, the following is the collation of the CSS pseudo-class;

CSS pseudo-class collection:

Pseudo class Example Description
: Active a:active Checked status
: Checked input:checked Tick status
:d isabled input:disabled Disabled state
: Empty p:empty P element No child element
: Enabled input:enabled Activation status
: First-child p:first-child The first P-element under a parent
: First-of-type p:first-of-type The first P-type element under a parent
: Focus input:focus selected, the cursor is in the current
: hover a:hover Hover status
: In-range input:in-range Input that defines a value within a range
: invalid input:invalid All elements that match the validation criteria
: lang (language) p:lang(it) The P defined by Lang (it)
: Last-child p:last-child The last P-element under the parent
: Last-of-type p:last-of-type The last P-type element under the parent
: Link a:link Non-visited links
: Not (selector) :not(p) Non-P element
: Nth-child (N) p:nth-child(2) Nth P-Element under Parent
: Nth-last-child (N) p:nth-last-child(2) Second-to-last element under a parent
: Nth-last-of-type (N) p:nth-last-of-type(2) The second P element of the parent, calculated from the last child element
: Nth-of-type (N) p:nth-of-type(2) The second child element of its parent
: Only-of-type p:only-of-type When P is the only element type of its parent
: Only-child p:only-child When P is the only element of its parent
: Optional input:optional No "required" marked with input
: Out-of-range input:out-of-range Input not in a specific range of values
: read-only input:read-only Input with "ReadOnly" designation
: Read-write input:read-write No input with "readonly" marked
: Required input:required Input with "required" designation
: Root root Page root element
: Target #news:target Select an element anchor point
: Valid input:valid Validation-compliant elements
: Visited a:visited Visited by

In fact, it is quite a lot of ha, but it is commonly used in general development of only a few, anyway I was useless, can achieve the desired development effect on the line, do not have to force the pursuit of, and sometimes can also cooperate with jquery CSS operation, the wording is also very simple;

Next look at the pseudo-element (pseudo-element), after understanding the definition of pseudo-class, it is better to understand the pseudo-element, CSS pseudo-element is the definition of the element "part" of the special style, such as defining the first character of the element, the first line, the element in the before, After, center defines the following syntax:

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

For example, define the first line of a P:

123 p::first-line {    color#ff0000;}

Insert part of the content before or after an element:

123 i::before {    contenturl(pic.gif);}

This approach often works with font icons appearing in Web pages, with an element as the carrier, and the font icon added to the element area display:

On-line Instance page

Pseudo-elements are not many but widely used, the meaning of understanding, examples are as follows:

pseudo Element Example Description
:: After p::after Insert content after P element
:: Before p::before Insert content before P element
:: First-letter p::first-letter The first character in a P element
:: First-line p::first-line First line
:: Selection p::selection User selected Area

Original address: http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/

CSS pseudo-classes and pseudo-elements

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.