Deep understanding of CSS pseudo-class selectors (code example)

This article brings you the content is about in-depth understanding of CSS pseudo-class selector knowledge (code example), there is a certain reference value, the need for friends can refer to, I hope to help you.

Objective

In the past sporadic to understand and use :link , ::after and content other pseudo-class, pseudo-element selector, recently found this lack of reading, so decided to study a little bit, the following is the pseudo-class part of the collation.

Pseudo class

Pseudo-class selectors essentially allow designers to set different visual effects based on the state of the element in particular. Specifically,,,,,, :link :visited :hover :active :focus :focus-within :target , :root and :checked .

HTMLAnchorElement4 Classic Pseudo-class

1. :linkThat is used to set the style of the initial link state;

2. :visitedTo set the style of the link after it has been clicked;

3. :hoverThat sets the style of the link when the mouse hovers over the link;

4. :activeThat is used to set the style of the link when the mouse button is pressed, but not released.

Presumably everyone and I, the first contact is the above 4 pseudo-class it?! And also crash hard back their set order ( LVAH ) bar, haha.

Sets the current target element style

Do you remember the pound sign in the URL? #a hash or fragment of the URL, starting at the pound sign () to the end of the URL, is used to locate a resource within the page. Assuming that

the element is present on the page, the browser will scroll as long as the address bar is entered #title (scrolling does not necessarily have a tweened effect) until h3#title the element is at a specific location in the visual area. (Note: Please do not confuse with UI routing)
The above-named page resource is called the target element or the current active element ! You can :target set its style by setting it.
Compatibility: IE9 start support.

Example:

The current URL is http://foo.com#1:target {    color:red;}. title{    Color:blue;        &:target{        border:solid 1px red;    }}. Title{i ' m not target element.}. Title#1{yes, I ' m.}

Set the style of the element when it gets focus

:focusUsed to set the style of the element in the focus state.
Compatibility: IE8 start support.
So which elements support the focus state? Let's figure out what actions are possible to implement focus.
Each of them is:

1. mouse click;

2. TAB key;

3. By means of JavaScript HTMLElement.prototype.focus() .

Then the elements that traditionally support the focus state must be,,, a button input select and textareas .
In HTML5 contenteditable tabindex , the element supports the focus state when the element is set or the attribute is added.
That is, elements that match the following selectors support the focus state.

A,button,input,select,textarea,[contenteditable],[tabindex]

Note: If tabindex the property value is less than 0, the focus cannot be obtained by the TAB key. However, the element can be focused by mouse click or script.

JS gets the element that currently has the focus

/  * * Returns the body by default when loading is complete * If an element receives focus, the element is returned */document.activeelement:: HtmlElement

There's also a misleading attribute.

Used to detect whether the document has the focus, that is, whether the user is interacting with the page//page is only in the viewable area of the screen, and the user does not return FALSE when they interact with it. Document.hasfocus:: Boolean with Void

When you set the child element to get focus, the element's style

:focus-withinThat sets the style of the element when the child element is in the focus state.
Compatibility: Chrome63 start support.

Example: two times when the password is confirmed, the password box is highlighted

. form-control{  &:focus-within > input{    &:focus {      border:solid 1px skyblue;    }        &:not (: Focus) {      border:solid 1px orange;}}}  . Form-control>input.pwd[type=password]+input.confirm-pwd[type=password]

Other

1. :root, which is used to set the style of the element, starting with IE9 support.

2. :checkedTo set the selected style for the radio and check controls, starting with IE9 support. Combining pseudo ::before -elements and content attributes enables flexible and efficient custom radio and check controls.

3. :emptyThat sets the style for elements that do not have child nodes. is an element that has a p{ } text_node child node, p{} or an element that has no child nodes.

4. :not, which is the inverse semantics of the predicate expression.

5. :placeholder-shownThat sets the style of the element placeholder when it is displayed.