The zero-based HTML tutorial CSS article (2): a selector in CSS

First, the basic composition of CSS

Selector {property: Property value}

The CSS statement is composed of the above three parts selector written in the curly braces, the curly braces for the declaration, if there are more than one declaration, attributes will be separated by ";" First, let's cite an example:

Body

{

Background: #2CA4CF;

Font-family: "Bold";

Color: #ffffff;

}

We have studied the use of inline style within an element to change the style , and style is the same as the usage of the declaration within the curly braces. When an external style sheet or an internal style sheet is written in this form. This code means that the background of the BODY element is #2ca4cf color, the font is bold, and the font color is #ffffff (black).

Second, the selector in the CSS

1. Tag Selector

P{color:black;}

A tag Selector is a selector that determines the style for a particular label, and this example is to have all the P tags apply the style of a black font.

2. Class Selector

. Class1{color:black;}

Class selectors are selected based on class names (classes), and a "." is added before the class name.

3.ID Selector

#id1 {color:black;}

The ID selector can specify a specific style for an element that is marked with a specific ID. IDs can appear only once in an HTML document page, for example, if you value an element's ID as "ID1", then you can no longer name the other element ID "ID1" on the same page. Although you will find that even naming several ID,CSS selectors will apply styles to all of these IDs, just like tag selectors. Please keep in good habit, the ID do not appear duplicate.

4. Descendant Selector

Div.class1 p{color:red;}

The descendant selector is also called the include selector. The outer label is in front, the inner label is behind, a space is left between the inner layer label and the label inside the outer layer, and the inner label is the offspring of the external label. The sentence applies the font-color-red style to all P tags in a div with class Class1.

5. Descendant Selector

div.class1>p{color:red;}

The descendant selector usage is similar to the descendant selector, and the label is connected with a ">" greater than the number. The difference is that the descendant selector selects only the DIV.CLASS1 in the child element of the

, does not include child element's child element and so on, will not choose grandson and later backup, hence the name descendant selector.

6. Group Selector

P,div,.class1, #id1 {color:red;}

The group selector selects a number of tags, separated by "," lowercase commas, and the selector chooses all the tags or classes that are written down.

7. Universal Selector

*{color:red;}

The universal selection applies the style to the entire HTML document and is the most powerful selector. The syntax is to write a "*" asterisk before the curly braces.

This course explains the basic grammatical structure and the most basic selector function in CSS. Students who have studied HTML must have been able to read a lot of CSS code!