Div + CSS basic Tutorial: CSS Selector

In the previous lesson, we talked about how CSS controls the page. If you don't remember it, I will help you remember it, there are four ways to control HTML page styles: In-line, embedded, link, and import, if you want these styles to implement one-to-one, one-to-many, or multiple-to-one control over elements on an HTML page, you need to use the CSS selector, the elements on the HTML page are controlled by the CSS selector.

Reference:

There are three CSS selectors: Tag selector, Id selector, and class selector.

In order to make it easier to understand the selector, let's make a metaphor here. If you regard your environment as an HTML page, each person in the environment is equivalent to the Tag Element in the HTML page. Each person has an ID (ID card), so each tag in the HTML also has its own ID, we all know that IDs are unique and cannot be repeated.


[Tag selector]

The P label style declaration in the labels file is as follows:

Copy content to clipboard

Code:

p{

font-size:12px;

background:#900;

color:#090;

}

The background of all P labels on the page is #900 (red), the text size is 12px, and the color is #090 (green), which is maintained later, if you want to change the background color of the P tag on the entire website, you only need to modify the background attribute. This is so easy!


[ID selector]

The ID selector can only be used once on an HTML page (of course, it can be used several times, but it does not comply with W3C standards, so the page is not a standard page ~, Our goal is not to make standard pages, so we recommend that you do not share the same ID with multiple tags on the same HTML page), just like in your environment, you only have one ID card, which cannot be repeated! I believe you can also see that the ID selector is more targeted, for example, to give an ID to a P tag on an HTML page, the Code is as follows:

Reference:

<P id = "one"> the text in the p label </P>

# Is used to define the attribute of the P tag with ID one in CSS. The Code is as follows:

Copy content to clipboard

Code:

#one{

font-size:12px;

background:#900;

color:#090;

}

In this way, a P in the page will be the style defined in CSS.


Class Selector]

This selector is easier to understand, that is, to make some tags on the page (which can be different tags) have the same style, just like a square matrix in the National Day, they must all be different people, they all wear red clothes and hold the garlands in their hands. The styles are the same. If you want to share a style with everyone, what should you do ~ The usage of the ID selector is similar to that of the ID selector, but the ID is changed to the class, as shown below:

Copy content to clipboard

Code:

<P class = "one"> here is the text in the p label </P>

What if I want the DIV label to have the same style? Add the same class as follows:

Copy content to clipboard

Code:

<Div class = "one"> here is the text in the p label </div>

In this way, all the labels of Class = "one" on the page have the same style ~


The CSS definition is similar to the ID selector, except that # is replaced with., as shown below:

Copy content to clipboard

Code:

.one{

font-size:12px;

background:#900;

color:#090;

}

Duplicate Code supplement: a tag can have multiple class selector values. Different values are separated by spaces, for example:

Copy content to clipboard

Code:

<Div class = "one yellow leftstyle"> here is the text in the p label </div>

In this way, we can use multiple styles in the same tag. Of course, we can also use the ID and class together.

Copy content to clipboard

Code:

<Div id = "div1" class = "one yellow leftstyle"> here is the text in the p label </div>

[General selector]

By now, the first three basic selectors have been completed, but we also need to introduce a CSS selector with the most powerful function but the least commonly used selector "*

Copy content to clipboard

Code:

{Here is the CSS code}

Copy the code is powerful because it defines the style of all HTML tags in the parent level, and can define the label styles with common styles (a bit of the formula extracted from elementary school mathematics ), in this way, the code can be greatly reduced. Why is this powerful function used at least? Also, it is because of its power that it defines all the labels in the parent element, so as long as you define it, all the labels and render manager in the parent level are necessary. It is also equivalent to adding the code in the general selector. If you can say this, you cannot fully understand it, it doesn't matter. Let me give you an example. Please refer to the following

Copy content to clipboard

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>

<Title> untitled document </title>

<Style type = "text/CSS">

<! --

# Div1 *{

Background: # Eee;/* set the background of all elements in div1 to gray */

Color: #333;/* set the font color of all elements in div1 to black */

}

-->

</Style>

</Head>

<Body>

<Div id = "div1">

<P> here is the P tag area. </P>

<Div> here is the tag area </div>

</Div>

<Div id = "div2">

<P> here is the P tag area. </P>

<Div> here is the tag area </div>

</Div>

</Body>

</Html>

Let's run the example above. The two labels in div1 are similar in style, which is the power of the general selector. No matter how many labels there are, the style will be added to all labels, if all the labels in div1 have a part of the same CSS code, you can extract the code and define it with a general selector, which can greatly reduce the code, however, if div1 contains code that is not the same as other elements, it cannot be defined using a general selector, which is a little inflexible in CSS General selector. Now everyone understands why the general selector is the most powerful but the least useful selector in the selector ~~ Haha


There is another method that has to be mentioned for the general selector. To ensure that the page is compatible with multiple browsers, you must reset all the tags in the HTML, add the following code to the top of the CSS file *

Copy content to clipboard

Code:

{margin:0; padding:0;}

Why is it so useful? Because each browser has its own CSS file. If a page loads a page in a browser and no CSS file is found, the browser will automatically call its own CSS files, but the CSS files of different browsers are different, and the styles defined for different labels are different, if we want to make the page display the same effect in different browsers, We need to reset the HTML Tag, that is, the above Code, but this is also a bad thing, because html4.01 has 89 labels, so it is equivalent to adding {margin: 0; padding: 0 ;}, I do not recommend that you do this here, because there are a few tags to be reset in 89 tags, and there is no need to reset all tags, you can reset the tags that need to be reset, as shown below:

Copy content to clipboard

Code:

body,div,p,a,ul,li{margin:0; padding:0;}

If you still need to reset the DL, DT, and DD labels, you can add them to the above, as shown below:

Copy content to clipboard

Code:

body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

This can also be seen as a measure of the page level produced by PAGE reconfigurator, and whether it is a professional aspect. Here, we should better understand this sentence, "the General selector is the most powerful but least used selector ~ Pai_^


OK! I should have understood the content of the selector. I will continue to explain the "collective declaration of the selector" and "nesting of the selector"


[Collective declaration of selector]

When we use selector, some labels have the same style or some labels share the same style.

Attribute. We can declare these tags collectively. Different tags are separated by commas (,). For example:

Copy content to clipboard

Code:

h1,h2,h3,h4,h5,h6{color:#900;}Copy content to clipboard

Code:

#one,#three,.yellow{font-size:14px;}

#one{background:#ccc;}

#three{background:#ccc;}

.yellow{background:#ccc;}

Similar to primary school extraction, the common part is extracted. In this way, the same part is defined together, and different parts are defined separately to ensure unified style and flexible style modification, this is also a part of CSS code optimization. Remember it ~


[Nesting selector]

Selectors can also be nested, such:

Copy content to clipboard

Code:

# Div1 p a {color: #900;}/* indicates that the text color of the link a label in the p label whose ID is div1 is red */

The advantage is that you do not need to define the class selector or ID selector separately for the tag in the p tag of the tag with ID div1. the CSS code will be less ~ It is also a part of CSS code optimization.


At this point, the basic selector is finished, but you need to introduce a "general selector "*

Copy content to clipboard

Code:

{Here is the CSS code}

Well, this lesson mainly describes three types of knowledge: CSS code selector, selector declaration, and Selector nesting. If you do not understand them, you can leave a message.

From: CSS Learning Forum