12 types of CSS selectors to learn

Source: Internet
Author: User
Tags ming

In the previous article, we are introducing the five CSS selectors that you must thoroughly understand, and now introduce the other 12 CSS selectors that you need to learn. If you haven't used it, learn it well, if you already know it.

First, X:link x:visited x:hover x:active Pseudo-Class

a:link {color:red;}
a:visted {color:purple;}

The pseudo-class selector, visted the style that has been visited, hover the style that the mouse has passed, and link is not accessible. Three pseudo-class selectors are often used for links, but not only for links, but unfortunately IE6 only supports the use of these three pseudo-class selectors on links.

Here the Ming River illustrates a point, because of the CSS priority relationship (later than the previous priority), these pseudo-class writing order, generally is link, visted, hover, active.

Two, X + Y adjacent selectors

ul + P {
color:red;
}

Adjacent selectors, the above code will match the first p after UL, the text color within the paragraph is set to red. (Match only one element)

Three, X > Y Sub Selectors

Child Selector, note the difference between x > y and x y, which is the descendant selector, which ignores the hierarchy, and x > y is a word selector that matches only the child element y under X.
Theoretically x > y is worth advocating the selector, but IE6 does not support it.

Four, X ~ Y adjacent selectors

ul ~ P {
color:red;
}

Adjacent selectors, similar to X+y, differ by x ~ y matching the element collection, such as the above code, matching all UL adjacent P

V, X[title] Property Selector

A[title] {
Color:green;
}

The property selector, such as the above code, matches the link element with the title attribute.

Vi. x[title= ""] another property selector

a[title= "Large Front end"]{
Color: #096;
}

Property selector, the above code matches not only the link element with the Title property, but also the title property equals the "large Front end". The Title property is not available within [], and other properties can be used.

Vii. x[title*= ""] Fuzzy matching attribute selector

a[title*= "Large Front end"]{
Color: #096;
}

Add the * number, meaning that it is a fuzzy match, such as the above code, will match the title attribute for Ming or Ming River or Ming River co-shadow with the link attribute of the Ming Word.

Viii. x[title^= ""] another kind of fuzzy matching attribute selector

a[title^= "Large Front end"]{
Color: #096;
}

Fuzzy matching, in contrast to the role of *, ^ plays the role of exclusion, such as the above code, will match the title property does not have the name of the link property.

Nine, x[href$= ""] very useful property Selector

a[href$= ". png"] {
color:red;
}

In the property selector, a $ symbol is used to match an element that ends with a specific string, such as the code above that matches the value of the href attribute at the end of the. PNG link.

Ten, x[data-*= ""] less commonly used property selectors

a[data-filetype= "image"] {
color:red;
}

Data-filetype This property is not much used at present, but some occasions are very useful. For example, I want to match all the data types as links to the images, if you use x[href$= ""] in the following way:

a[href$= ". jpg"],
a[href$= ". jpeg"],
a[href$= ". png"],
a[href$= ". gif"] {
color:red;
}

While using Data-filetype, as long as:

a[data-filetype= "image"] {
color:red;
}

Of course, if you add the Data-filetype attribute to each link.

Xi. x[foo~= ""] very rarely used selectors

A[data-info~= "external"] {
color:red;
}
a[data-info~= "image"] {
BORDER:1PX solid black;
}

This is also a very rare selector, plus the ~ number, there is a particular case, such as you have a data-filetype= "external image" property, this time I want to separate for external and image style control.

a[data-info~= "external"] {
color:red;
}
a[data-info~= "image"] {
BORDER:1PX solid black;
}

The code above matches a data-filetype= "external", data-filetype= "image", data-filetype= "external image".

12. x:checked another pseudo-class selector

input[type=radio]:checked {
BORDER:1PX solid black;
}

This pseudo-class selector is only used to match elements with the checked attribute, such as radio, checkboxes, checkboxes, and multi-marquee boxes. At present, this pseudo-class selector, IE9 is not supported, non-IE browser basically support.

12 types of CSS selectors to learn

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.