CSS selector records

CSS selector records

Selector	Example	Example description	CSS
.Class	. Intro	Select all the elements of class = "intro.	1
#Id	# Firstname	Select all the elements of id = "firstname.	1
*	*	Select all elements.	2
Element	P	Select all <p> elements.	1
Element,Element	Div, p	Select all <div> elements and all <p> elements.	1
Element Element	Div p	Select <div> all <p> elements in the element.	1
Element>Element	Div> p	Select all <p> elements whose parent element is <div>.	2
Element+Element	Div + p	Select all <p> elements following the <div> element.	2
[Attribute]	[Target]	Select all elements with the target attribute.	2
[Attribute=Value]	[Target = _ blank]	Select all the elements of target = "_ blank.	2
[Attribute~ =Value]	[Title ~ = Flower]	Select all elements whose title attribute contains the word "flower.	2
[Attribute| =Value]	[Lang | = en]	Select all elements whose lang attribute value starts with "en.	2
: Link	A: link	Select All unaccessed links.	1
: Visited	A: visited	Select All accessed links.	1
: Active	A: active	Select the activity link.	1
: Hover	A: hover	Select the link on which the mouse pointer is located.	1
: Focus	Input: focus	Select the input element that gets the focus.	2
: First-letter	P: first-letter	Select the first letter of each <p> element.	1
: First-line	P: first-line	Select the first line of each <p> element.	1
: First-child	P: first-child	Select each <p> element that belongs to the first child element of the parent element.	2
: Before	P: before	Insert content before the content of each <p> element. Content property value: String,Url, Counter (Name) Counter (Name, list-style-type) Counters (Name, string) Counters (Name, string, list-style-type), Attr (X), open-quote, close-quote, No-open-quote, no-close-quote	2
: After	P: after	Insert content after the content of each <p> element.	2
: Lang (Language)	P: lang (it)	Select each <p> element of the lang attribute value starting with "it.	2
Element1~Element2	P ~ Ul	Select each <ul> element with the <p> element.	3
[Attribute^ =Value]	A [src ^ = "https"]	Select each <a> element whose src attribute value starts with "https.	3
[Attribute$ =Value]	A [src $ = ". pdf"]	Select all <a> elements whose src attribute ends with ". pdf.	3
[Attribute* =Value]	A [src * = "abc"]	Select each <a> element whose src attribute contains the "abc" substring.	3
: First-of-type	P: first-of-type	Select each <p> element of the first <p> element of its parent element.	3
: Last-of-type	P: last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.	3
: Only-of-type	P: only-of-type	Select each <p> element that is unique to its parent element.	3
: Only-child	P: only-child	Select each <p> element that belongs to the unique child element of its parent element.	3
: Nth-child (N)	P: nth-child (2)	Select each <p> element that belongs to the second child element of its parent element.	3
: Nth-last-child (N)	P: nth-last-child (2)	Same as above, counting starts from the last child element.	3
: Nth-of-type (N)	P: nth-of-type (2)	Select each <p> element that belongs to the second <p> element of its parent element.	3
: Nth-last-of-type (N)	P: nth-last-of-type (2)	Same as above, but starts counting from the last child element.	3
: Last-child	P: last-child	Select each <p> element that belongs to the last child element of its parent element.	3
: Root	: Root	Select the root element of the document.	3
: Empty	P: empty	Select each <p> element (including text nodes) without child elements ).	3
: Target	# News: target	Select the # news element of the current activity.	3
: Enabled	Input: enabled	Select each enabled <input> element.	3
: Disabled	Input: disabled	Select each disabled <input> element	3
: Checked	Input: checked	Select each selected <input> element.	3
: Not (Selector)	: Not (p)	Select each element of a non-<p> element.	3
: Selection	: Selection	Select the selected element. Only two attributes can be set: background and color.	3

On the css3.info website, you can test the compatibility of the current browser with the CSS selector.

IE8	IE7	IE6

 

References:

Reference manual for http://www.w3school.com.cn/cssref/css_selectors.asp CSS Selector
Http://www.w3cplus.com/css3/basic-selectors CSS3 selector -- Basic Selector
Http://www.w3cplus.com/css3/attribute-selectors CSS3 selector -- attribute Selector
Http://www.w3cplus.com/css3/pseudo-class-selector CSS3 selector -- pseudo class selector
Http://www.w3cplus.com/content/css-selection CSS: Selection
Http://ued.ctrip.com/blog? P = 2545 use the CSS selector to insert content into the page

How does a CSS selector exclude some content?

Special settings will overwrite general settings, such as body p {FONT-SIZE: 1em ;}
In this way, the font of P under the BODY is 1em, and other settings inherit the BODY.

Css derived selector, id selector, and class selector

The derived selector allows the child element in an element to define a style, for example, li a {font-size: 14px} defines a 14px font style class selector for sub-element a under li. css styles are introduced in html. The class selector uses a ". :. box {width: 960px; margin: 0 auto; padding: 0px; overflow: hidden}
On the html page, use the class = "class Name" method to call: <div class = "box"> here is the content </div> the category selector method is simple and flexible, you can create and delete pages at any time. The id selector starts with "#" in CSS, for example, # box {width: 960px; margin: 0 auto; padding: 0px; overflow: hidden} is called using the id = "category name" method on the html page: <div id = "box"> here is the content </div> the id selector and the category selector are actually the same. Generally, the id selector is only used to indicate non-repeated styles, the category selector is more flexible, while the id selector only represents important style fields.