CSS Magic Hall: slightly deeper pseudo-class selector

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:

// 当前URL为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

/*  * 加载完成时默认返回body * 若某元素获得焦点时，则返回该元素 */document.activeElement :: HTMLElement

There's also a misleading attribute.

// 用于检测文档是否得到焦点，即用户是否正在与页面交互// 页面仅仅位于屏幕可视区域，而用户没有与之交互时返回false。document.hasFocus :: Void -> Boolean

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 div{ } text_node child node, div{} 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.

Summarize

Respect the original, please specify from: www.cnblogs.com/fsjohnhuang/p/9551799.html ^_^ Fat Boy John

Reference

css-tricks.com/almanac/selectors/f/focus/