Css knowledge (5) -- selector and css knowledge Selector

Css knowledge (5) -- selector and css knowledge Selector
1. Introduction

Starting from this section, we will enter the second part of this series-css and html combination-to put it bluntly, it is the selector.

CSS defines styles. How do I set these styles to corresponding html nodes? You have to use the selector. Let the browser know which dom node css has selected, and the browser will render the corresponding style as a view.

As for how css renders pages, this is the third part of this series.

The first part describes the loading and cascade of css styles. The second part describes the selector and Selector levels. The third part describes various styles (such as background, Font, positioning, and floating ). Such an idea is also the most effective way to learn how to use css in a browser. (As mentioned in section 2, I will review it here)

2. Selector

We all know there are many css selectors, but it may take several minutes if you really want to count your fingers. In fact, there are two types of selectors:

1. The tag selector (* in special cases) can be a tag or a context with multiple tags;
2. Attribute selector (id and class are both attributes and special attributes );

2.1. Tag Selector 2.1.1 General choice *

The general selector * should be familiar to everyone. The most common one is * {margin: 0; box-sizing: border-box ;}. Mragin: 0 we have already said in the previous section that box-sizing: border-box will be described in detail in the box Model section below.

For example, when detecting the bootstrap3 style, we can also see that it uses the * selector:

　　

2.1.2 single tag

Single tag selector is the most basic css knowledge. In the default style of the browser in the previous section, single tag selection is used everywhere. I will not go into details here. If you are a friend with poor css foundation, you can make up the makeup.

2.1.3 Multiple labels

The multi-tag selector is generally related to the html context, which has the following centralized classification:

1. Select all descendant nodes of an ancestor, such as div p {...}
2. Select all direct nodes of a parent element, such as div> p {...}
3. Select a sibling node with an element next to, such as li + li {...}
4. Select All sibling nodes of an element, such as span ~ A {...}
5. The combination and application of the above situations (do not combine too complicated, encoding requires readability first)

 

Let's list a typical application, such

　　

The effect in should be more common, and underline each menu. My previous implementation is: Add a border-bottom to each li, and remove the border-bottom of the last li.

In fact, there is no need for such trouble. The following style settings can be solved:

　　

What do you mean?

2.2. Attribute Selector 2.2.1 special 1: id Selector

Basic knowledge.

According to many css tutorials, the id selector and attribute selector are two different classes. Why should I put the id selector under the attribute selector? Because the css selector is set based on the characteristics of html nodes, id is also an attribute, but it is a special attribute, and the id of each html node cannot be repeated.

Because it is special and commonly used, the id selector is assigned a "#", which is essentially an attribute selector. The execution results of the following two lines of code are identical:

　　

2.2.2 Special 2: class selector

Basic knowledge.

Class is also a special attribute. The reason why it is placed under the attribute selector is the same as the id mentioned above.

2.2.3 attribute Selector

Attribute selectors can be used in either of the following situations:

1. Select img [title] {… only by attribute name }
2. Select "input [type = 'text'] {…}" based on the attribute name and attribute value.

These two are also relatively basic, so they will not be detailed again. If you do not know, you can go to the basic tutorial to make up the course.

3. pseudo classes and pseudo elements

Several selector types are mentioned above. pseudo classes and pseudo elements can be used for any selector.

3.1. pseudo class

Pseudo classes are classified into UI pseudo classes and structured pseudo classes.

3.1.1 UI pseudo-class

The UI pseudo classes are simple and commonly used. I will not elaborate on them by simply writing a few pieces of code below.

　　

3.1.2 structured pseudo-classes (IE is not available in earlier versions)

First, let's ask you a question: how to display the background color at a table interval,

　　

The simplest way is to use a structured pseudo-class and set a style.

　　

 

Structured pseudo-classes have the following writing options. What do you mean? You can understand them literally:

　　

3.2. pseudo elements

Remember, pseudo elements are a very important concept! Among them,: before AND: after are very common.

First, let's take a look at the following: before AND: after.

　　

, We can see that you can add content before and after the element. Here the "content" can also be written as unicode encoding, such:

In addition to adding content, you can also customize the style of the executed content, such:

　　

　　

The above describes the basic usage of the two. The following describes two typical application scenarios:

First, we all know fontAwesome, the most popular icon library on the web. The applications of these small icons are implemented through pseudo elements, such:

　　

(It doesn't matter if you don't know fontAwesome. We will introduce it in detail when talking about css fonts)

Second, do you know how to clear floating styles? This is a typical pseudo-element Application Scenario:

　　

(Clearfix will be explained specifically when talking about css float)

4. selector Extension

A selector is a css rule used to select html nodes for css. However, smart humans still use selector to create great works in other fields.

• JQuery

The root cause of jQuery's popularity is its "Query"-a "Query" based on the css selector ". Currently, all browsers support the querySelectAll () method. In fact, this is the jQuery Design of W3C "Plagiarism.

I believe that all web Front-end users are familiar with jquery. Click here.

• Zen-Coding

Jquery can use a css selector expression to select a dom group that complies with the expression from the existing html structure, but zen-coding is the opposite-html nodes can be created based on the css selector expression. I have to admire the creativity of these people.

　　

If you have never used zen-coding, you are advised to try it out no matter whether you use it later!

5. Summary

This section summarizes the knowledge of css selectors, and describes several types of selectors. But it may not be a good thing if there are more types. In the next section, we will talk about a problem or solution caused by too many types.

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Welcome to my open-source project --WangEditor, simple and easy-to-use rich web text editor

Bytes -------------------------------------------------------------------------------------------------------------