Pseudo-classes and pseudo elements, review

Always points is not clear, and easy to forget this concept, the project has encountered, review again

problem

1. What are common pseudo-classes? Pseudo-element?

How mind:
In addition to four pseudo-element, others are pseudo-classes

What four pseudo-element? : Before: after: first-letter: first-line

伪类
:first-child
:link
:visited
:hover
:active

2. The difference between pseudo-classes and pseudo elements

Think common: before: after used to doing?

Encountered more is inserted before and after picture elements, or clear float

h1:before
  {
  content:url(logo.gif);
  }
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

.clearfix:after{
    content:"";             /*设置内容为空*/
    height:0;               /*高度为0*/
    line-height:0;          /*行高为0*/
    display:block;          /*将文本转为块级元素*/
    visibility:hidden;      /*将元素隐藏*/
    clear:both;             /*清除浮动*/
}
.clearfix{
    zoom:1;                 /*为了兼容IE*/
}

definition:

Pseudo-element is the creation of objects outside the document tree. For example, the first word document or mechanism does not provide access to the first row of the element content. Pseudo-elements also provide some content distribution pattern that does not exist in the source document, for example: before and: after access to content generated.

Think commonly used pseudo-class used to doing?

Matching elements

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

选择器匹配作为任何元素的第一个子元素的 <p> 元素

p:first-child
{
    color:blue;
}

definition

Pseudo-class is actually based on common DOM elements produced in different states, he is a particular feature of the DOM element.

3. Summary

Stating difference is, the new object is generated pseudo-elements, not visible in the DOM tree, it may operate; no new pseudo-object classes, differing only in a state DOM elements;

css3, in order to distinguish and standardization, pseudo-elements :: modified to begin with, but for historical reasons browser to: the beginning of the pseudo-element also continue to support, but suggested specification writing for the beginning ::.

Reference material

Article 1
Article 2

Guess you like

Origin www.cnblogs.com/shipskunkun/p/11798476.html