About CSS Selector type and usage introduction

Often there are tag selectors, class selectors, ID selectors and so on, in fact there are many, in the next article for you to introduce in detail the types of these selectors and their use

First of all, what are the main starters?
1. Tag Selector (for example: Body,p,p,ul,li)
2. Class selector (e.g.: class= "Head", class= "Head_logo")
3.ID selector (for example: id= "name", id= "Name_txt")
4. Global selector (e.g., *)
5. Combo Selector (e.g.:. Head Head_logo, note two selector separated by SPACEBAR)
6. Inheritance selector (e.g. P p, note two selector separated by space key)
7. Pseudo-class selectors (such as: Link style, a pseudo-class of elements, 4 different states: link, visited, active, hover. ）
8. String Matching property selector (^ $ * three, respectively, corresponding start, end, inclusive)
The way to write style= "" in a tag should be an introduction to CSS, not a selector, because selectors are not used at all.
Let's look at these selectors separately:
1: Tag name selector
There are many tags in an XHTML document, such as P tags, h1 tags, and so on. To make all P tags in a document use the same CSS style, you should use a tag Selector.

p {color:red;border:1px blue solid;} p {color: #000;}

2: Class Selector
You can use the tag selector to specify the same CSS style for the same tag in the entire XHTML document. In practice, however, the same tag in an XHTML document is reused. To assign a different CSS style to the same label, you should use the class selector.

<p class= "Test" > Test code </p>. Test {color:red;border:1px blue solid;}

In the HTML document, we add the class= "xxx" to the CSS file in the page, in which we want to control the opening tag of the style (non-paired tags such as input directly in the tag). With. XXX You can point to this tag to control this tag, and we call this by defining the class to find the label by: Class selector.

This way of defining class is the front-end development of the most commonly used selectors, there are several outstanding features: you can give different tags to set the same class, so that a CSS command to control a few tags, reduce a lot of code, the page is easy to modify, easy to maintain, easy revision; Background worker opportunities do not use the relevant settings of the class, do not need to interact with the background staff, moreover, the classname can be changed dynamically through JS, thus changing the entire label style, so that the front-end dynamic effect is easier to implement.
3:id Selector
The ID selector is similar to the class selector, unlike the ID selector, which is not reusable. In an XHTML document, an ID selector can only assign its CSS style to a label.

<p id= "Test" > Test code </p> #test {color:red;border:1px blue solid;}

HTML elements with an ID can be manipulated by JavaScript. Then the ID is also the background developers will often use, so the front-end developers should use as little as possible.
4. Global Selector
The global selector is an asterisk. It can be used for all elements in an XHTML document.

*{margin:0; padding:0;}

5. Combo Selector
Tag selectors, class selectors, and ID selectors can be used together. The general combination is the tag Selector and class selector combination, the tag selector and the ID selector combination. Because of the same principle and effect of the two combinations, only the combination of the tag Selector and class selector is introduced. A combination selector is a combination, not a real selector, but is often used in practice.
For example,. orderlist li {xxxx} or. tableset td {}
We use it in a number of labels that are repeated and have the same style, such as Li TD DD.
For example

Group Selector

. test1,span,test2 {border:1px blue solid;} p,span,img {border:1px blue solid;}

Group selectors are actually a simplified way of writing CSS, but putting together different selectors with the same definition saves a lot of code.
6. Inheritance Selector
Learning to use an inheritance selector must first understand the inheritance of the document tree and CSS. Each XHTML can be thought of as a document tree, where the root of the document tree is the HTML tag, and the head and body tags are the child elements. The other tags in the head and body are the grandson elements of the HTML tag. The whole of XHTML presents a tree-like relationship between ancestors and descendants. CSS inheritance refers to some of the attributes of descendant elements that inherit ancestor elements. The following examples illustrate these two important CSS concepts in detail.
Inheritance inheritance selector for document tree CSS

<p class= "Test" > <span></span> </p>. Test span img {border:1px Blue Solid;} P span img {border:1px blue solid;}

Descendant selectors are actually used: multiple selectors plus intermediate empty glyd find specific to control the label, from left to right, then refinement, and finally lock the label to control, as in the example above, first find the class Test label, and then from his sub-tab to find the span tag, Then find the IMG tag from the Sub-tab of Span.
7. Pseudo-Class selectors
Pseudo-classes are also a selector, but CSS styles defined with pseudo-classes do not work on labels. The pseudo-class acts on the state of the label. Because many browsers support different types of pseudo-classes, there is no uniform standard, so many pseudo-classes are not often used. Pseudo-classes include:: First-child,: Link:,: visited,: hover,: Active,: Focus and: lang, and so on. One set of pseudo-classes that are supported by mainstream browsers is the pseudo-class of hyperlinks, including: Link:,: visited,: hover, and: active.
The four pseudo-classes of a, respectively, represent the four states of a, note that a can have only one state (: link), or have 2 or three states at the same time! For example, any a tag that has an HREF attribute is already available without any action: the condition of link, which satisfies the condition of having a linked attribute, if a tag is accessed, it will have: link:visited two states. Move the mouse over the visited a label
8. String Matching Property Selector--There are three main types
Syntax: e[att^= "val"]: {attribute}
Description: Matches the e element with the ATT attribute and the value begins with Val.

<span style= "FONT-SIZE:18PX;" ><style type= "Text/css" > P[title^= "val"] {color: #FF0000;} </style> <body> <p style= "width : 733px; border:1px solid #666; padding:5px; " > <p title= "Value" > matches the e element with the ATT attribute and the value begins with Val </p> </p></span>

Syntax: e[att$= "val"]: {attribute}
Description: Matches the e element with the ATT attribute, with the value ending in Val

<style type= "Text/css" > P[title$= "val"] {font-weight:bold;} </style> <body> <p style= "width : 733px; border:1px solid #666; padding:5px; " > <p title= "This is Val" > matches the e element with the ATT attribute, with the value ending in Val </p> </p> </body>

Syntax: e[att*= "val"]: {attribute}
Description: Matches the e element with the ATT attribute and the value that contains Val.

<style type= "Text/css" > P[title*= "val"] {text-decoration:underline;} </style> <title> substring matching property selector e[ Att*= "Val"]</title> 
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

How to use CSS background