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

This article mainly explains "what are the important knowledge points of CSS". The explanation content in this article is simple and clear, and it is easy to learn and understand. Please follow the ideas of Xiaobian to study and learn "what are the important knowledge points of CSS" together.

Selectors

Root

:root { }

Using root lets you select the highest level parent element in the DOM. If you are writing HTML, then the htnl element is always the highest. Because pseudo-class selectors have higher properties for a target element, you can override the element with:root.

Use:root to change background color

First Line

The::first-line selector allows you to select the first line of a paragraph, and of course there are other selectors that allow you to select the first paragraph, but this way you can style the first line and have more design space.

Even more surprising is the fact that the selector can be rewritten. Pretty cool, isn't it?

Change the first line element of a paragraph

First Letter

::first-letter

Similar to the above, this selector allows us to select the first letter of a block-level element. This allows us to design the initials sinker very quickly and easily.

::first-letter first drop effect

Not Selector

:not(x)

The:not(x) selector selects the target element when you don't specify it, as the following example illustrates.

List Item

List Item

List Item

List Item

Instead of using "active," you can select all items by simply writing the following code:

ul li:not(.active) {}

This is a handy way to add navigation elements, as you can see from the example above.

Use:not() to select all listed elements, not active

Combinators

direct neighbor selector

span + span

Technically, this is not a selector, but it is possible to put two selectors together. With the "+", you can select the element directly and put the other one behind it. Here are some examples:

Lorem ipsum blah blah blah Lorem ipsum blah blah blah Lorem ipsum blah blah blah

Use the following CSS:

blockquote + p { font-weight: bold; }

The second element will be bolded.

Reference elements followed by adjacent selectors

General Sibling Combinator

ordinary adjacent selector

figure ~ p {}

Using the page hierarchy you designed, that's him. For example, using the code above, only paragraph elements after graphic elements are affected.

Select all paragraphs using normal adjacent selectors

Thank you for your reading. The above is the content of "What are the important knowledge points of CSS?" After studying this article, I believe everyone has a deeper understanding of what are the important knowledge points of CSS. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.