Css and usage distinction pseudo-classes and pseudo elements

First, the difference between:

(1) pseudo-element is used to create some of the main elements in the absence of the original structure dom species, such as: using :: before and :: after adding text style before and after some elements exist, these will be added to specific content the UI is displayed, be seen by the user, the content will not change the content of the document, will not appear in the DOM, not copy, just in CSS rendering layer was added . CSS3 recommended the use of pseudo-elements :: representation, such as: div :: before.

 

:: content has specific properties under both before and :: after pseudo-class, you must have this property.

1, attr () call attributes of the current element, for example, can easily be shown pictures of Alt prompt text or links Href address, as follows:

  a:after {

    Content: "(" attr (the href) ")";
  }
2, URL () / URI () for introducing media file
  h1 of: before {
    Content: URL (log.png);
  }
. 3, counter () call counter, you can not use a list of elements to achieve the function number.
  H2: {before
    counter-INCREMENT: Chapter;
    Content: "Chapter" counter (Chapter). ""
  }

 (2) pseudo-class represents an element that already exists in a certain state, but they can not be represented by dom tree this state, it is possible to add to the style by pseudo-class. Elements, for example, a: hover,: active and the like. In CSS3 recommended: denotes the pseudo elements, such as: a: hover

1. The original HTML fragments, we will explain the pseudo-class and pseudo elements on the basis of

<ul>

  <li>First li element</li>

  <li>Secondli element</li>

</ul>

2. The pseudo-class

1) li element is added to the second style, a class can be added to the second li element

<ul>

<li>First li element</li>

<li class="second">Second li element</li>

</ul>

.second{color:#f00}

2) may be added to the second pattern by a pseudo class li element

 

 It can be seen: the second li element structure where dom is present anyway.

3. pseudo-element

1) to the second first letter (S) in the style element to li, you can add to a span S, a class and add

<ul>

  <li>First li element</li>

  <li><span class=”first-letter”>S</span>econd li element</li>

</ul>

li.first-letter{color:#f00}

2) may be added to the second style first letter (S) in a pseudo-element by element li

 

 

In short,

Pseudo-element operation target is newly generated dom element, instead of the original structure in dom existed; and pseudo-classes contrary, the operation target of the original pseudo-class configuration Lane dom elements present.

Pseudo fundamental difference in that element with pseudo-classes: whether the operation object elements are present in the original structure in dom.

Guess you like

Origin www.cnblogs.com/xmbg/p/11608268.html