css pseudo-classes and pseudo-elements

1. Pseudo-classes and pseudo-elements

css introduces the concepts of pseudo-classes and pseudo-elements for Format information outside the document tree. In other words, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter in a sentence or the first element in a list. The pseudo-classes and pseudo-elements are explained below respectively:

Pseudo-class is used to add corresponding styles to existing elements when they are in a certain state. This state is based on the user Behavior and dynamic changes. For example, when the user hovers over a specified element, we can use :hover to describe the state of this element. Although it is similar to an ordinary CSS class and can add styles to existing elements, it can only add styles to elements when it is in a state that cannot be described by the DOM tree, so it is called a pseudo class.

　Pseudo elements are used to create some elements that are not in the document tree and add styles to them. For example, we can use :before to add some text in front of an element and add styles to this text. Although the text is visible to the user, it is not actually in the document tree.

##2. The difference between pseudo-classes and pseudo-elements

Here are two examples to illustrate the difference between the two.

The following is a simple html list fragment:

<ul>

## <li>I am the first< ;/li>

<li>I am the second one</li>
##</ul>

If you want to add a style to the first item, you can add a class to the first <li> and define the corresponding style in the class:

　HTML:

<ul>

<li class="first-item">I am the first</li>

</li>

</ul>

CSS:

li.first-item {color: orange}

If there is no need to add a class method, we can add styles to it by setting the :first-child pseudo-class of the first <li>. At this time, the modified <li> element is still in the document tree.

HTML:

<ul>

## <li>I am the first</li> <li>I am the second one</li>

</ul>

CSS:

li:first-child {color: orange}

Here is another simple html paragraph fragment:

<p>Hello World, and wish you have a good day!</p>

If you want to add a style to the first letter of the paragraph, you can wrap a <span> element in the first letter and set the style of the span element:

HTML:

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

CSS:

.first {font-size: 5em;}

If we do not create a <span> element, we can add styles to it by setting the :first-letter pseudo-element of <p>. At this time, it looks like a virtual <span> element is created and styles are added, but in fact this <span> element does not exist in the document tree.

HTML:

<p>Hello World, and wish you have a good day!</p>

CSS :

p:first-letter {font-size: 5em;}

## As can be seen from the above example, the operating object of the pseudo class is the document An element already exists in the tree, while a pseudo-element creates an element outside the document number. Therefore, the difference between pseudo-classes and pseudo-elements is:

Whether or not an element outside the document tree is created.

The origin of confusion between pseudo-classes and pseudo-elements The most confusing , probably most people casually call pseudo-elements like :before and :after pseudo-classes, and even if the concepts are confused, there is no problem in actual use - because even if the concepts are confused, there is no problem in actual use. How much trouble will it cause:)

Requirements in the CSS3 specification

Use double colons (::) to represent pseudo elements to distinguish pseudo elements and pseudo classes. For example, pseudo-elements such as ::before and ::after use double colons (::), and pseudo-classes such as :hover and :active use single colons (:). Except for some browsers lower than IE8, most browsers support the double colon (::) representation method of pseudo elements.

Usage of pseudo-classes and pseudo-elements

##Pseudo-class

##1 :link Select an unvisited link

2 :visited Select the visited link

3 :hover Select the element on which the mouse pointer is floating

4: active Select active link

5 :focus Select the input field to get focus

##:first - child pseudo-class

Matches the first child element of the element.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
       li:first-child {
       color: orange;
       }
      </style>
<body>
  <ul>
    <li>这里的文本是橙色的</li>
    <li>一些文本</li>
    <li>一些文本</li>
  </ul>
</body>
</html>

:not pseudo-class

A negative pseudo-class used to match parameters that do not match the selection elements of the device.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
     li:not(.first-item) {
     color: orange;
     }
    </style>
<body>
  <ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
  </ul>
</body>
</html>

:lang pseudo-class

:lang matches elements that set a specific language. Setting a specific language can be passed to the HTML element Set the lang="" attribute, set the charset="" attribute of the meta element, or set the language attribute on the http header.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
     :lang(en) q { quotes: '“' '”'; }
     :lang(fr) q { quotes: '«' '»'; }
     :lang(de) q { quotes: '»' '«'; }
    </style>
<body>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
</body>
</html>

##pseudo-element

::before/:before pseudo-element :before inserts content before the selected element. You need to use the content attribute to specify the content to be inserted. The content being inserted is not actually in the document tree.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
     h1:before {
      content: "Hello ";
     }
    </style>
<body>
  <h1>World</h1>
</body>
</html>

::after/:after pseudo-element :after inserts content after the element. Its usage and characteristics are similar to:before .

::first-letter/:first-letter pseudo-element

:first -letter matches the first letter of text in an element. The modified initial is not in the document tree.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
     h1:first-letter {
      color:#ff0000;
      font-size:xx-large;
     }
    </style>
<body>
  <h1>World 观察第一个字母</h1>
</body>
</html>

##::first-line/:first-line pseudo-element

:first-line matches the first line of text in the element. This pseudo-element can only be used in block elements, not inline elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <title>php.cn</title>
    <style type="text/css">
     p:first-line {
       background: orange;
     }
    </style>
<body>
  <p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }， 
  to set them apart from pseudo-classes. You may see this sometimes in CSS. 
  CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility， 
  and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>

Next Section