How much do you know about css (5)--selector_html/css

1. Introduction

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

Styles are defined in CSS. How to set these styles to the corresponding html nodes? You have to pass the selector. Let the browser know which DOM node is selected by CSS, and the browser will obediently render the corresponding style into the view.

As for how CSS can render the page, this is the third part of this series.

The first part talks about the loading and cascading of CSS styles, the second part talks about selectors and selector levels, and the third part talks about the various styles presented (background, font, positioning, floating, etc.). Such an idea, which also formalizes the process of browsers using CSS, is the most effective learning idea. (Told in Section 2, review here again)

2. Selector

When it comes to CSS selectors, everyone knows that there are many kinds, but if you really want to count them on your fingers, you It may take several minutes. In fact, so many selectors can be divided into two categories:

Tag selector (* is a special case), which can be single tag or contextual multiple tags;
attribute selection (id and class are attributes, special attributes);

2.1. Label selector

2.1.1 Universal selection*

Universal selector* Everyone should be familiar with it. The most commonly used one is *{margin:0; box-sizing:border-box;}. mragin:0 As we have said in the previous section, box-sizing: border-box will be described in detail later in the box model.

For example, when we detect the style of bootstrap3, 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 browser default style in the previous section, single tag selector is used everywhere. I won’t go into details here. Friends who have a weak foundation in CSS can take supplementary courses first.

2.1.3 Multi-label

Multi-label selector is generally related to html context. It has the following centralized classification

Select an ancestor All descendant nodes of div p{…}
Select all direct nodes of a parent element, such as div > p{…}
Select the sibling nodes next to an element , for example li li{…}
Select all sibling nodes of a certain element, for example span ~ a{…}
Combination application of the above situations (don’t make the combination too complicated, the coding should be careful Readability first)

Let me list a typical application, as shown below

The effect in the above picture should be It's more common to put underlines between menus. My previous implementation was: add a border-bottom to each li, and then remove the border-bottom of the last li.

In fact, there is no need to go to such trouble. The following style setting can solve the problem:

A bit interesting, right?

2.2. Attribute selector

2.2.1 Special 1: id selector

Basic knowledge, no more details.

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

Because it is special and commonly used, the id selector is given a separate "#", which is essentially an attribute selector. The execution effect of the following two lines of code is exactly the same:

2.2.2 Special 2: class selector

Basic knowledge, no need to repeat it.

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

There are two cases of attribute selector:

Select only by attribute name: img[title | It has been expanded on in detail. If you don’t understand it, you can check out the basic tutorial to make up for it.
Several selector types are mentioned above, and pseudo-classes and pseudo-elements can be used for any selector.

3.1. Pseudo-classes

Pseudo-classes are divided into UI pseudo-classes and structured pseudo-classes.

3.1.1 UI pseudo-classes

UI pseudo-classes are relatively simple and commonly used. I will simply write a few lines of code below and will not go into details.

3.1.2 Structured pseudo-classes (lower versions of IE will not work)

Let me ask you a question first: How to implement a table interval display background Color, as shown in the picture:

The simplest way is to use structured pseudo-classes, which can be achieved with just one style setting.

The structured pseudo-class has the following writing options. As for what it means, you can understand it literally:

3.2. Pseudo-element

Remember, pseudo-element This is a very important concept! Among them, :before and :after are very commonly used.

First, let’s take a look at what :before and :after are about.

In the picture above, we can see that we can add content before and after elements. The "content" here can also be written in unicode encoding, as shown below:

In addition, in addition to adding content, you can also customize the execution content style, as shown below:

The above gives a general understanding of the basic usage of the two. Here are two typical application scenarios:

First, everyone knows FontAwesome, the most popular icon font library on the web. The application of these small icons is realized through pseudo elements, as shown below:

　(It doesn’t matter if you don’t know fontAwesome, we will introduce it in detail when we talk about css fonts)

Second, everyone knows about the clear floating style, right? This is a very typical pseudo-element application scenario:

(when talking about css floating, clearfix will be explained specifically)

4. Selector expansion

Selector Originally a rule of CSS, used to select html nodes for CSS. But smart humans have still created great works in other fields through selectors.

jQuery

The fundamental reason why jQuery is promoted and popular is its “Query”?? “Query” based on css selector. Today's browsers support the querySelectAll() method. In fact, this is the jQuery design "plagiarized" by the W3C.

I believe that all web front-end personnel are familiar with jquery, just click here.

zen-Coding

jquery can select the dom group that matches the expression from the existing html structure through a css selector expression, but zen-coding reverses The way to go is to create html nodes based on css selector expressions. I have to admire the creativity of these people.

　　If you haven’t used zen-coding, whether you will use it in the future or not, I suggest you try it!

5. Summary

This section summarizes the knowledge of CSS selectors and knows that there are several types of selectors. But having too many types is not necessarily a good thing. The next section will tell you about a problem caused by too many types and its solution.

----------------------------------------------- -------------------------------------------------- ---------------

Welcome to follow my tutorial: "From Design to Pattern" " In-depth understanding of javascript prototypes and closures Series 》《Microsoft petshop4.0 source code interpretation video》《json2.js source code interpretation video》

You are also welcome to follow my open source project??wangEditor, a simple and easy-to-use web rich text editor Device

---------------------------------------- -------------------------------------------------- ------------------