Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use the inclusion selector and wildcard selector in Div and CSS writing

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article will explain in detail how to use the inclusion selector and wildcard selector in the preparation of Div and CSS, the content of the article is of high quality, so the editor shares it for you to do a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Include selector

An include selector is also called a derived selector, which, as its name implies, is a choice with an inclusion relationship.

Multiple selectors are separated by spaces and combined into an inclusion relationship, and the selector on the right is subordinate to the left (that is, the selector on the right can only be selected within the scope of the selector on the left).

An example of an application that contains selectors:

CSS Code copies content to the clipboard

# nav a {

Text-decoration: none

}

This example means that hyperlinks in elements of "id=" nav "apply this style (hyperlinks are ununderlined), while hyperlinks to other web page elements are not affected.

Inclusion selector is one of the commonly used selectors, which allows us to make precise personalization of some elements.

Selector combination

The inclusion of selectors mentioned above can actually be seen as a combination of selectors. Obviously, using the combination of selectors, the style can be more accurately applied to the web page elements, in order to achieve rich and colorful personalized display.

In addition to this inclusion combination, we can also have some common combinations as follows:

Type-qualified classes, such as div.class ul li {}

Dual composite classes, such as div.class ul.catlist {}

Pseudo class: such as # nav H3 a:hover

The above examples are just to illustrate the combination of selectors, there may be some differences in practical applications. Making good use of selector combinations can make our CSS documents more organized and concise.

Selector grouping

Selector grouping means that multiple selectors with the same style definition will be grouped by commas.

Example:

CSS Code copies content to the clipboard

H2,h3,h4,h5,h6,h7,div {

Font-size: 14px

}

The above means that the font in the headings H2 to H7 and div tags is uniformly set to 14 pixels.

Notice the difference between grouping selectors and including selectors.

Wildcard selector

Like many languages, the symbol "*" stands for everything in CSS, that is, the wildcard selector.

Example:

CSS Code copies content to the clipboard

* {font-size: 12px;}

This example means that the font of all elements in a web page is defined as 12 pixels. Of course, this is an example, and it is not generally such an extreme definition.

In practical application, more possibilities are as follows:

CSS Code copies content to the clipboard

* {

Margin: 0

Padding: 0

}

The meaning of this definition is to define the outer and inner margins of all elements as 0, and then define them when you need to set the inner and outer margins. As can be seen from this example, the role of the wildcard selector is more for a unified preset of elements.

Wildcard selectors can also be used in selector combinations:

CSS Code copies content to the clipboard

Div * {color: # FF0000;}

This example indicates that all fonts within the tag are red.

An exceptional situation

CSS Code copies content to the clipboard

Body * {font-size:120%;}

At this point, it means multiplication, and of course body can also be replaced with another selector tag. As this effect depends on many factors, it is generally not often used.

On how to use Div and CSS to write the inclusion selector and wildcard selector to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report