CSS know how much (5)--Selector

Original: CSS know how much (5)--Selector

1. Introduction

Starting with this section, you'll enter the second part of this series,--CSS and HTML, which is plainly the selector.

CSS defines the style, how to set these styles to the appropriate HTML node? You have to pass the selector. Let the browser know which DOM node the CSS chooses, and the browser will render the corresponding style as a view.

The third part of this series is what CSS can do to render the page.

The first part of the CSS style loading and stacking, the second part of the selector and selector level, the third part of the presentation of the various styles (background, font, positioning, floating, etc.). Such a train of thought, also official browser using CSS process, is the most effective learning ideas. (Mentioned in section II, here again)

2. Selector

Say CSS selector, you know there are many kinds of, but really want you to break the fingers to count, you may need a few minutes. In fact, so many selectors, can be divided into two categories:

1. Tag Selector (* is special case), can but label, also can context multi-label;
2. The property selector (ID and class are attributes, special attributes);

2.1. Tag Selector 2.1.1 General selection *

Universal Selector * Everyone should be more familiar with, the most commonly used is *{margin:0; box-sizing:border-box;}. mragin:0 We have said in the previous section thatBox-sizing:border-box will describe in detail the block in the back of the box model.

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

　　

2.1.2 Single Label

Single label selector is the most basic CSS knowledge, in the previous section of the browser default style, the use of single-label selection everywhere. Here no longer repeat, CSS Foundation weak friends, you can first to make up the missed lessons.

2.1.3 Multi-label

Multi-tag selectors are generally related to HTML contexts and have the following centralized classification

1. Select all descendant nodes of an ancestor, such as div p{...}
2. Select all the immediate nodes of a parent element, such as div > p{...}
3. Select an element next to the sibling node, such as Li + li{...}
4. Select all sibling nodes of an element, such as span ~ a{...}
5. Combination of the above situations (do not mix too complex, coding emphasis on readability first)

To give you a list of more typical applications, such as

　　

The effects should be more common, and underline between the various menus. My previous implementation was: Each Li plus a border-bottom, in the last Li's border-bottom removed.

In fact, there is absolutely no need for such trouble, the following style settings can be resolved:

　　

You got a point?

2.2. Property Selector 2.2.1 Special 1 : ID Selector Selector

Basic knowledge, no longer repeat.

According to many CSS tutorials, the ID selector and the attribute selector are different two categories, why do you put the ID selector under the property selector? Because the CSS selector is set according to the attributes of the HTML node, the ID is also an attribute, except that it is a special property, and the ID of each HTML node cannot be duplicated.

Because of the special, and more commonly used, so the ID selector is given a "#", essentially a property selector. The following two lines of code perform exactly the same thing:

　　

2.2.2 Special 2 : Class Selector Selector

Basic knowledge, no longer repeat.

Class is also a special attribute that is placed under the property selector, just like the ID above.

2.2.3 Property Selector

There are two cases of the property selector:

1. Select only by property name:img[title]{...}
2. Select by property name and property value:input[type= ' text ']{...}

These two are also relatively basic, again also no longer detailed unfolds, do not know the friend can go to see the Basic tutorial remedial lesson.

3. Pseudo-class and pseudo-elements

A number of selector types are mentioned above, and pseudo-classes and pseudo-elements can be used for any selector.

3.1. Pseudo-Class

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

3.1.1 UI Pseudo class

UI pseudo-class are relatively simple and commonly used, I write a few words below, it is no longer detailed to say.

　　

3.1.2 Structured pseudo-class (IE low version not available)

Let's ask you a question: How to implement a table interval to display the background color,

　　

The simplest way to do this is to use a structured pseudo-class, which can be implemented as a style setting.

　　

The structured pseudo-class has the following writing options, and as for what it means, it can be understood literally:

　　

3.2. Pseudo-Elements

　　remember, pseudo-elements are a very important concept ! Among them,: Before and : After is very common.

First, let's take a look at : Before and : What's going on after.

　　

, we can see that the content can be added before and after the element. The "content" here can also be written in Unicode encoding, such as:

In addition to adding content, you can customize the style of performing content, such as:

　　

　　

The above general understanding of the basic usage of the two, the following home to introduce two typical application scenarios:

First, we all know Fontawesome bar, the web's most popular icon font library. The application of these small icons is implemented through pseudo-elements, such as:

　　

(It doesn't matter if we don't know fontawesome, we'll describe it in detail when we talk about CSS fonts.)

Second, clear the floating style, you know? This is a typical pseudo-element scenario:

　　

(when it comes to CSS floats, it will be devoted to Clearfix)

4. Expansion of the Selector

A selector is a rule for CSS that chooses an HTML node for the CSS. But smart humans still create great works in other fields through selectors.

• Jquery

The root cause of jquery's popularity is its "query"--a "query" based on the CSS selector. Now the browser supports the Queryselectall () method, in fact, this is the "plagiarism" of the design of jquery.

I believe that the Web front-end people are more familiar with jquery, here a bit can be.

• Zen-coding

jquery can select an expression-compliant Dom group from an existing HTML structure through a CSS selector expression, but zen-coding the opposite-Creating an HTML node based on the CSS selector expression. Have to admire the creativity of these people.

　　

If you have not used zen-coding, no matter what you use later, suggest that you must also experience!

5. Summary

This section summarizes the selector knowledge for CSS and knows that there are several types of selectors. But the type of more is not necessarily a good thing, the next section will tell you about the type of too many problems, and solutions.

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

Welcome to my Tutorial:"From design to Mode" " deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

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

CSS know how much (5)--Selector