In CSS1 and CSS2, everyone has used :hover, :visited, :before, :after more or less. The distinction between pseudo-elements of pseudo-classes in CSS1 and CSS2 is vague, and even some colleagues often refer to :before and :after as pseudo-classes. CSS3 has made a relatively clear concept of these two concepts, and the syntax is also obvious to tell the difference between the two.
Pseudo classes - pseudo classes
CSS pseudo-class for adding special effects to certain selectors
It doesn't change any DOM content. It just inserts some decorative elements that are visible to the user, but invisible to the DOM. The effect of a pseudo-class can be achieved by adding an actual class
Example :
- a:link {color: #FF0000} /* unvisited link*/
- a:visited {color: #00FF00} /* Visited link*/
- a:hover {color: #FF00FF} /* Mouse over the link*/
- a:active {color: #0000FF} /* selected link */
Note: Pseudo-class names are not case-sensitive, but are required in the order of definition. :hover must be placed after :link and :visited to be valid, and :active must be placed after :hover to be valid. LVHA order cannot be changed
Example:
<style type="text/css">
a:link { color: #FF0000; text-decoration: none; }
a:visited { color: #00FF00; text-decoration: none; }
a:hover { color: #FF00FF; }
a:active { color: #0000FF; }
</style>Summary: Since the state is dynamic, when an element reaches a certain state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on the abstraction outside the document, so it is called a pseudo-class.
Structural pseudo-class selector
- The four most basic: root, not, empty, target
- first-child、last-child、nth-child、nth-last-child、
- nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
- nth-of-type、nth-last-of-type
- Recycle styles
The :root() selector, literally we can clearly understand it is the root selector, which means to match the root element of the document where the element E is located. In an HTML document, the root element is always . The ":root" selector is equivalent to the element
The :not() selector is called a negative selector, and is exactly the same as the :not selector in jQuery, and can select all elements except a certain element.
The :empty() selector means empty. Used to select elements without any content, where no content means no content at all, even a space.
The :target() selector is used to specify a style for a target element on the page (the id of the element is used as a hyperlink in the page), this style is only used when the user clicks the hyperlink in the page, and jumps to the target element work after
The :first-child() selector represents the element E that selects the first child of the parent element. A simple understanding is to select the first child element in the element, remember that it is a child element, not a descendant element.
:nth-child() selects one or more specific child elements of an element;
:nth-child(length);/ parameter is a specific number /
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数:nth-last-child() selects a specific element by counting from the last child of a parent element.
The ":nth-of-type(n)" selector is very similar to the ":nth-child(n)" selector, except that it only counts children of a certain type specified in the parent element. It is very convenient and useful to use the ":nth-of-type(n)" selector to target a certain type of child element in a parent element when the child elements of an element are not only children of the same type of.
":only-child" means that an element is the only child of its parent.
UI state element pseudo-class selector
E:checked ： {attribute}
Matches all elements E that are selected in the user interface (form)
E:enabled ： {attribute}
Matches all E elements that are available in the user interface (form)
E:disabled ： {attribute}
Matches all E elements that are not available in the user interface (form)
E::selection ： {attribute}
Matches the part of the E element that is selected or highlighted by the user
target pseudo-class
E:target : {attribute}
matches the E element pointed to by the relevant URL
Pseudo-elements - Pseudo-elements
CSS pseudo-elements are used to set special effects to certain selectors.
CSS3定义
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
The gist is as follows:
- Pseudo-elements create some abstract elements in the DOM tree that do not exist in the document language (which can be understood as html source code). For example, the document interface does not provide a mechanism to access the first word or the first line of an element's content, whereas pseudo-elements allow developers to extract this information. Also, some pseudo-elements allow developers to get content that does not exist in the source document (such as the common ::before, ::after).
- A pseudo-element begins with two colons ::, followed by the pseudo-element's name.
- The two colons :: are used to distinguish pseudo-classes from pseudo-elements (there is no difference in CSS2). Of course, for compatibility reasons, existing pseudo-elements in CSS2 can still use a colon : syntax, but new pseudo-elements in CSS3 must use two colons :: .
A selector can use only one pseudo-element, and the pseudo-element must be at the end of the selector statement.
Pseudo-elements in CSS2: :first-line, :first-letter, :before, :after;
`:first-line:`为某个元素的第一行文字使用样式；
`:first-letter:`为某个元素中的文字的首字母或第一个字使用样式；
`:before:`在某个元素之前插入一些内容；
`:after:` 在某个元素之后插入一些内容；Pseudo elements in css3
Then in CSS3, he made certain adjustments to the pseudo-elements, adding a ":" to the previous basis, which is now ::first-letter, ::first-line, ::before,:: after In addition, he also added a ::selection.
::selection is used to change the default effect of selecting Chinese when browsing the web
::before and ::after are mainly used to insert content before or after the element. These two commonly used "content" are used together. The most seen is to clear the float.
.clearfix::after{
content: '.';
diaplay:block;
width: 0;
height:0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}//zoom(IE转有属性)可解决ie6,ie7浮动问题
Summary: In simple terms, pseudo-elements create a virtual container that does not contain any DOM elements, but can contain content. In addition, developers can customize styles for pseudo-elements.
Finally, summarize the characteristics and differences between pseudo-classes and pseudo-elements:
Pseudo-classes essentially make up for the inadequacy of regular CSS selectors in order to get more information;
pseudo-elements essentially create a virtual container with content;
CSS3 pseudo-classes and pseudo-elements have different syntax
; pseudo-classes, and only one pseudo-element can be used at the same time;