CSS basics 4: Element Selector

CSS basics 4: Element Selector

In the previous blog, we were familiar with CSS syntax and had some knowledge about CSS code formats. The CSS code is as follows:

Selector name {attribute name: attribute value ;......}

The attributes are separated by semicolons. The attributes and attribute values are directly connected by colons. If an attribute has multiple attribute values, multiple attribute values are separated by spaces.

The topic mentioned above is the selector. The selector specifies the tag to which the CSS syntax applies. The Tag Name

Is the selector.

There are three basic selectors:

A) html Tag name selector: it uses the html Tag name, also known as the element selector.

B) class selector. The class attribute in the label is also called the class selector.

C) id selector: The id attribute in the tag is used.

Each tag defines the class attribute and id attribute, which are used to identify tags and facilitate tag operations. In the definition

The class attribute values can be the same, while the id attribute values must be unique because they are often used in JavaScript.

CSS element Selector

The most common CSS selector is the element selector. In other words, the document element is the most basic selector. If you set an HTML style, select

The selector is usually an HTML element, such as p, h1, em, a, or even html.

The following is a simple example:

 

This is heading 1 This is heading 2

This is a common section.

The browser displays the following results:

 

From the above results, the selector priority is still selective. The html selector serves all fonts in the webpage, while h1 and h2

You only use the tag of your own tag name.

You can switch a style from one element to another. Suppose you decide to set the paragraph text (rather than the h1 element) to p. Only

The h1 selector must be p:

 

html {color:#00FFFF;}p {color:#FFFF00;}h2 {color:#FF0000;}

The browser displays the following results:

 

Two selector Group

Assume that h2 elements and paragraphs are gray. The easiest way to achieve this is to use the following statement:

H2, p {color: gray ;}

Place h2 and p selector on the left side of the rule and separate them with commas to define a rule. The style (color: gray;) on the Right will be applied to this

The elements referenced by the two selectors. A comma tells the browser that the rule contains two different selectors. If this comma does not exist, the rule will

Completely different. Or the above example:

 

html {color:#00FFFF;}h2,p{color:#FFFF00;}

The browser displays the following results:

 

You can group any number of selectors together.

For example, if you want to gray many elements, you can use a rule similar to the following:

Body, h2, p, table, th, td, pre, strong, em {color: gray ;}

Through grouping, creators can "compress" certain types of styles to get a more concise style sheet.

Here is a simple example:

The following two rules can get the same result, but it can be clearly indicated which one is easier to write:

/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}h5 {color:blue;}h6 {color:blue;}/* grouping */h1, h2, h3, h4, h5, h6 {color:blue;}

Use the following code:

 

 

This is heading 1 This is heading 2 This is heading 3 this is heading 4 This is heading 5 this is heading 6

The browser displays the following results:

 

Three-Wildcard selector (I think it is better to divide it into element selector. In the end, it is still a type of selector with the tag name)

CSS2 introduces a new simple selector-universal selector, which is displayed as an asterisk (*). This selector can be used

Any element matches like a wildcard.

For example, the following rule can make every element in the document red: * {color: red;} this declaration is equivalent to listing one of all elements in the document.

Group selectors. With the wildcard selector, you only need to press the key once (Only One asterisk) to specify the color attribute value of all elements in the document as red.

 

This is heading 1 This is heading 2 This is heading 3 this is heading 4

This isNormalParagraph text.

The browser displays the following results:

 

4. Declaration Group

We can either group the selector or group the declaration.

If you want all h1 elements to have a red background and display the text in blue in a 28-pixel Verdana font, you can write the following style:

h1 {font: 28px Verdana;}h1 {color: blue;}h1 {background: red;}

However, the above practice is not efficient. This is especially troublesome when we create such a list for an element with multiple styles. On the contrary,

We can group declarations together:

h1 {font: 28px Verdana; color: white; background: black;}

This is exactly the same as the effect of the preceding three row style sheets.

Note: To declare a group, you must use a semicolon at the end of each declaration. This is very important. The browser ignores the blank characters in the style sheet.

6. grouping with selector and Declaration

We can combine selector grouping and declarative grouping in a rule to define relatively complex styles with few statements.

 

This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Browser display:

 

When it comes to selector priority, I will use a dedicated blog to explain this problem.