Some interesting CSS questions (10) -- structural pseudo-class selector and css Selector

Some interesting CSS questions (10) -- structural pseudo-class selector and css Selector

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

All questions are summarized in my Github.

 

10. structural pseudo-class selector ( :root, :target, :empty, :not)

The emergence of each CSS pseudo class and pseudo element must be designed to solve some previously difficult problems.

Learning to understand them is the basis for solving many other complex CSS problems or cutting-edge technologies.

Here are four basic structural pseudo-class selectors. The common feature of a structural pseudo-class selector is to allow developers to specify element styles Based on the structure in the document tree.

  :rootPseudo class

:rootThe pseudo-class matches the root element of the document tree. Apply to HTML,:rootIt is expressed as an element. In addition to a higher priority, it is equivalent to the html Tag selector.

Syntax Style

: Root {style attributes}

For example,:root{background:#000}To set the background color to black.

As it is a new pseudo class in CSS3, it can also be used as an HACK element and only takes effect for IE9 +.

Introduction:rootPseudo class, because it is used in the IntroductionCSS VariablesWhen declaring global CSS Variables:rootVery useful.

  :emptyPseudo class

:emptyA pseudo-class that represents an element without child elements. The sub-elements mentioned here only calculate the element node and text (including spaces). Comments and running commands are not taken into account.

Consider an example:

div{  height:20px;  background:#ffcc00;}div:empty{  display:none;}

<div>1</div><div> </div><div></div>

In the preceding example, the first two divs are normally displayed, and the third one isdisplay:noneHide.

That is to say,:emptyEffective. Even a space in the tag cannot exist.

[Demo stamp me: empty structure pseudo-class example]

  :notPseudo class

CSS denies pseudo classes,:not(X)You can select all elements except an element.

X cannot contain another negative selector.

About:notPseudo classes have several interesting phenomena:

• :notUnlike other pseudo classes, the pseudo class does not increase the priority of the selector. Its priority is the priority of its parameter selector.

We know that selectors have different priorities. Generally, the weights of pseudo-class selection and class selectors (such.example), Attribute selector (attributes selectors, for example[type="radio"]), But there is a special case, that is:not().:notThe negative pseudo class is not regarded as a pseudo class in priority calculation, but the selector in the calculation is still counted as a normal selector.

• Use:not(*)Will match any non-element, so this rule will never be applied.

• This selector applies only to one element. You cannot use it to exclude all ancestor elements. For example, body: not (table) a will still be applied to the table because it will be matched by the: not () selector. (From MDN)

  :targetPseudo class

:targetPseudo class, in#8. CSS-only navigation bar Tab switching SolutionHas been practiced, you can look back.

:targetIt represents a special element. If we talk about the difference, it needs an id to match the segment identifier of the document URI.

:targetThe appearance of the selector allows CSS to receive user click events and provide feedback. (Another CSS selector that can receive click events is:checked).

 

All the questions are summarized on my Github and sent to my blog for more communication.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.