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

This article mainly explains the "detailed introduction of CSS selector", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "detailed introduction of CSS selector"!

What is a selector?

Selectors are one of the most important aspects of CSS because they are used to select elements on a web page so that they can be styled. Selectors can be defined in several ways.

Universal selector

The universal selector (represented by an * asterisk or an asterisk) matches each individual element on the page. If there are other conditions on the target element, you can omit the generic selector. This selector is typically used to remove default margins and padding from elements for quick testing.

Example:

CSS universal selector example: * {margin: 0; padding: 0;} This is heading

This is a paragraph.

* the style rules in the selector are applied to each element in the document.

Note:

Using a generic selector in a production environment is not recommended because it matches every element on the page, which puts unnecessary pressure on the browser.

Element type selector

The element type selector matches each example of an element in the document tree: with the corresponding element type name.

Example:

H2 {color: red;} p {color: blue;}

The style rules in the p selector will be applied to the

Each element in the document and make it blue, regardless of their position in the document tree.

1. ID selector

The id selector is used to define style rules for a single or unique element, and the ID selector is defined as a pound sign (#) followed by an ID value.

Example:

# error {color: # ff0000;}

This style rule renders the element text that the id attribute is set to as red error.

2. Class class selector

The class selector can be used to select any HTML element that has a class attribute. All elements with the class are formatted according to the defined rules.

With a full stop (.) The class value immediately following defines the class selector.

Example:

.blue {color: # 0000ff;}

The above style rule displays the text of each element in the document set to in the class property as blue blue. It can be made more specific.

Example:

P.blue {color: blue;}

The style rules in the selector p.blue only

Those elements that set the class attribute to are rendered as blue blue without affecting other paragraphs.

2.1 descendant selector

You can use these selectors when you need to select that one element is a descendant of another. For example, if you want to locate only those anchor points contained in an unordered list, you do not want to locate all anchor elements.

Example:

H2 em {color: green;} ul.menu {padding: 0; list-style: none;} ul.menu li {display: inline;} ul.menu li a {margin: 10px Text-decoration: none;}

Note:

The style rule ul.menu li an in the selector applies only to those anchor elements .menu contained in an unordered list with class and has no effect on other links within the document.

Similarly, the style rules in the H2 em selector apply only to elements contained in heading.

2.2 Sub-selector

The child selector can only be used to select those elements that are direct children of certain elements. A sub-selector consists of two or more selectors, separated by a greater than sign (that is, >). For example, you can use these selectors to select the first level of a list element in a nested list with multiple levels.

Example:

Ul > li {list-style: square;} ul > li ol {list-style: none;}

The style rule ul > li in the selector applies only to those elements that are direct children of the element, and has no effect on other list elements.

2.3 packet selector

Multiple selectors in a stylesheet usually share the same style rule declaration. You can group them into a comma-separated list to minimize the code in the stylesheet. It also prevents the same style rules from being repeated over and over again.

Example:

H2 {font-size: 36px; font-weight: normal;} h3 {font-size: 28px; font-weight: normal;} h4 {font-size: 22px; font-weight: normal;}

As you can see in the example above, the same style rule font-weight: normal; is made by choosing to share h2memeh3 and h4.

Therefore, it can be divided into comma-separated lists.

Example:

H2 font-weight: normal;} H2 {font-size: 36px;} h3 {font-size: 28px;} h4 {font-size: 22px;}

Thank you for your reading, the above is the content of "detailed introduction of CSS selector", after the study of this article, I believe you have a deeper understanding of the detailed introduction of CSS selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.