Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "CSS pseudo-class selector knowledge?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS pseudo-class selector knowledge" article.

Pseudo class

The   pseudo-class selector essentially allows designers to set different visual effects according to the specific state of the element. They are: link,: visited,: hover,: active,: focus,: focus-within,: target,: root and: checked.

Four Classical pseudo classes of HTMLAnchorElement

: link, which is used to set the style for the initial state of the link

: visited, which is used to set the style after the link is clicked

: hover, which sets the style of the link when the mouse hovers over the link

Active, which sets the style of the link when the mouse button is pressed but not released

  you must be like me, the first contact is the above four pseudo-classes, right? And also crash to memorize their setting order (LVAH), .

Set the current target element style

 , do you remember the pound sign in URL? The hash or fragment from the pound sign (#) to the end of the URL called URL is used to locate a resource within the page. Assuming that there is now an element of Target on the page, as long as you enter # title in the address bar, the browser will keep scrolling (scrolling does not necessarily have a tween effect) until the element h4#title is at a specific location in the visual area. (note: please do not be confused with UIRouting)

  and the above-mentioned located page resource is called the target element or the currently active element! It can be styled through: target.

  compatibility: IE9 begins to support.

Example:

/ / the current URL is http://foo.com#1

: target {

Color:red

}

.title {

Color:blue

&: target {

Border:solid1pxred

}

}

.title {I'mnottargetelement.}

.title # 1 {Yes,I'm.}

Sets the style when the element gets focus

Focus is used to set the style of the element in the focus state.

Compatibility: IE8 begins to support.

So which elements support focus state? You need to figure out what operations are possible to achieve focus.

They are:

Mouse click

Tab key

Through the HTMLElement.prototype.focus () method of JavaScript.

Then the elements that traditionally support focus state must be a, button, input, select, and textareas.

HTML5 adds that the element supports focus state when the contenteditable or tabindex attribute is set.

That is, all elements that match the following selector support the focus state.

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

Note: if the value of the tabindex property is less than 0, you cannot get focus through the Tab key. However, you can gain focus through mouse clicks or script-time elements.

JS gets the element that is currently in focus

/ *

* body is returned by default when loading is completed.

* if an element gets focus, the element is returned

* /

Document.activeElement::HTMLElement

There is another misleading attribute.

/ / used to detect whether the document is in focus, that is, whether the user is interacting with the page

/ / the page is only located in the visual area of the screen, and the false is returned when the user does not interact with it.

Document.hasFocus::Void- > Boolean

Sets the style of a child element when it gets focus

: focus-within, which sets the style of a child element when it is in the focus state

Compatibility: Chrome63 begins to support.

Example: when the password is confirmed twice, the password box is highlighted

. form-control {

&: focus-within > input {

&: focus {

Border:solid1pxskyblue

}

&: not (: focus) {

Border:solid1pxorange

}

}

}

.form-control > input.pwd [type = password] + input.confirm-pwd [type=password]

Other

: root, which is used to style elements and is supported starting with IE9.

: checked, which sets the style in which radio and check controls are selected, starting with IE9. Flexible and efficient custom radio and check controls can be achieved by combining pseudo-elements:: before and content attributes.

Empty, which is used to style elements that have no child nodes P {} is an element with a TEXT_ node child, while p {} is an element without child nodes.

: not, as a predicate to express inverted semantics.

: placeholder-shown, used to set the style when the element placeholder is displayed.

The above is the content of this article on "what is the knowledge of CSS pseudo-class selector". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.