Shulou(Shulou.com)06/03 Report--

This article mainly explains "the type and function of CSS selector". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the type and function of CSS selector".

First of all, what are the main selectors?

1. Tag selector (e. G. body,div,p,ul,li)

two。 Class selector (such as: class= "head", class= "head_logo")

3.ID selector (e.g. id= "name", id= "name_txt")

4. Global selector (e. G. * sign)

5. Combination selector (e.g. .head .head _ logo, note that the two selectors are separated by the spacebar)

6. Inheritance selector (e.g. div p, note that the two selectors are separated by the spacebar)

7. Pseudo-class selector (such as: link style, pseudo-class of an element, 4 different states: link, visited, active, hover. )

8. Attribute selectors for string matching (^ $*, corresponding to the beginning, the end, and the include, respectively)

The way to write style= "" in the tag should be a way to introduce CSS, not a selector, because the selector is not used at all.

Let's take a look at these selectors separately:

1: label signature selector

There are many tags in an XHTML document, such as p tags, H2 tags, etc. To make all p tags in the document use the same CSS style, you should use a tag selector.

The code is as follows:

Div {color:red;border:1px blue solid;}

P {color:#000;}

2: class selector

Use the tag selector to specify the same CSS style for the same tag in the entire XHTML document. But in practice, the same tag in the XHTML document will be used repeatedly. To assign different CSS styles to the same tag, you should use a class selector.

The code is as follows:

Test code

.test {color:red;border:1px blue solid;}

In html documents, we want to control the style of the tag open tag (non-paired tags such as input directly put in the tag) to add class= "xxx", in the css file corresponding to the page, with .xxx can point to this tag, so as to control this tag, we call this way to find the tag through the definition of class (class) as: class selector.

This way of defining class is the most commonly used selector in front-end development, with several prominent features: you can set the same class for different tags, thus using one CSS command to control several tags, reducing a lot of code, so that the page is easy to modify, easy to maintain and easy to modify; secondly, the background staff will not use the relevant settings about class and do not need to interact with the background staff. In addition, the Classname of the tag can be changed dynamically through js, so as to change the style of the whole tag, so that the front-end dynamic effect can be realized more easily.

3:ID selector

ID selectors are similar to class selectors, except that ID selectors cannot be reused. In an XHTML document, an ID selector can only assign its CSS style to one tag.

The code is as follows:

Test code

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

HTML elements with ID can be manipulated by JavaScript. In addition, ID is often used by background developers, so front-end developers should use it as little as possible.

4. Global selector

The global selector is an asterisk. It works on all elements in an XHTML document.

The code is as follows:

* {margin:0; padding:0;}

5. Combination selector

Tag selector, class selector, and ID selector can be combined. The general combination is the combination of tag selector and class selector, tag selector and ID selector. Because the principle and effect of these two combinations are the same, only the combination of tag selector and class selector is introduced. Combinatorial selector is only a combination form, not a real selector, but it is often used in practice.

For example, .orderlist li {xxxx} or .tableset td {}

When we use it, it is usually used in tags that are repeated and have the same style, such as li td dd, etc.

For example, H1.red {color: red}

Group selector

The code is as follows:

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

Div,span,img {border:1px blue solid;}

Group selectors are actually a simplified way to write CSS, but putting different selectors with the same definition together saves a lot of code.

6. Inheritance selector

To learn to use inheritance selectors, you must first understand the inheritance of document trees and CSS. Each XHTML can be thought of as a document tree. The root of the document tree is the html tag, and the head and body tags are its child elements. Other tags in head and body are the grandchild elements of the html tag. The whole XHTML presents a tree-like relationship between ancestors and descendants. CSS inheritance means that descendant elements inherit some attributes of ancestral elements. The following examples explain these two important CSS concepts in detail.

Inheritance Selector of document Tree CSS

The code is as follows:

.test span img {border:1px blue solid;}

Div span img {border:1px blue solid;}

Future generations selector is actually using: multiple selectors plus a space in the middle to find the specific tag to be controlled; from left to right, refine in turn, and finally lock the tag to be controlled, as in the above example, first find the class for the test tag, then look for the span tag from his child tag, and then find the IMG tag from the child tag of span.

7. Pseudo class selector

Pseudo-classes are also a kind of selectors, but CSS styles defined with pseudo-classes do not work on tags. The pseudo-class acts on the state of the tag. 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,: lang, and so on. There is a set of pseudo-classes supported by mainstream browsers, which are hyperlinked pseudo-classes, including: link:,: visited,: hover and: active.

These four pseudo-classes of a represent four states of a, respectively. Note that a can have only one state (: link), or two or three states at the same time! For example, any a tag with a HREF attribute is already available when there is no operation: the condition of link, that is, the condition of having a linked attribute; if you have visited a tag, it will have two states: link: visited. Move the mouse over the a tag that has been visited

8. Attribute selectors for string matching-there are three main types

Syntax: e [at ^ = "val"]: {attribute}

Description: matches an E element that has an att attribute and whose value begins with val

The code is as follows:

P [title ^ = "val"] {color:#FF0000;}

Matches an E element that has an att attribute and whose value begins with val

Syntax: e [att$= "val"]: {attribute}

Description: matches an E element that has an att attribute and whose value ends in val

The code is as follows:

P [title$= "val"] {font-weight:bold;}

Matches an E element that has an att attribute and whose value ends in val

Syntax: e [att*= "val"]: {attribute}

Description: matches an E element that has an att attribute and contains a val in the value.

The code is as follows:

P [title*= "val"] {text-decoration:underline;}

Attribute selector E for substring matching [att*= "val"]

Matches an E element with an att attribute and a value that contains val

Thank you for your reading, the above is the content of "the type and function of CSS selector". After the study of this article, I believe you have a deeper understanding of the type and function of CSS selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.