Css selector,

Css selector,
(1) element Selector

If you set an html style, the selector is usually an html element, such as p, h1, a, or even html.
Html {color: black ;}
H1 {color: blue ;}
H2 {color: silver ;}

Set styles for elements in xml documents:
XML document:

<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="note.css"?><note><to>George</to><from>John</from>
CSS document:
note{font-family:Verdana, Arial;margin-left:30px;}to{font-size:28px;display: block;}from{font-size:28px;display: block;}heading{color: red;font-size:60px;display: block;}body{color: blue;font-size:35px;display: block;}
(2) selector grouping
Body, h2, p, table, th, td, pre, strong, em {color: gray ;}
 
Wildcard Selector
* {Color: red ;}
It is equivalent to specifying the color attribute of all elements in the document as red
 
(3) class selector
Examples of multi-class selector:
.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}
Classes containing important are bold, including warning italics, and important and warning background silver
(4) id Selector
The difference between the id selector and the class selector:
Unlike the class selector, the id selector can only be used once in an html document.
Unlike the class selector, the id selector cannot be used in combination because the id attribute cannot be a list of words separated by spaces.
Id can contain more Semantics
(5) attribute Selector
Simple attribute selection:
* [Title] {color: red ;}

Changes all elements containing the title to red.
A [href] {color: red ;}

Apply the style only to the anchor (Element a) with the href attribute
A [href] [title] {color: red ;}

To set the text of HTML hyperlinks with both href and title attributes to red
Img [alt] {border: 5px solid red ;}
Apply styles to all images with alt attributes
Select based on specific attribute values
A [href = "http://www.w3school.com.cn/about_us.asp"] {color: red ;}
Changes the hyperlink pointing to a specified document on the Web server to red.
A [href = "http://www.w3school.com.cn/"] [title = "W3School"] {color: red ;}
The property must match the property value.
P [class = "important warning"] {color: red ;}
Must be
<P class = "important warning"> This paragraph is a very important warning. </p>
Select Based on the part score
P [class ~ = "Important"] {color: red ;}
String Matching attribute Selector
[Abc ^ = "def"] select all elements whose abc attribute value starts with "def"
[Abc $ = "def"] select all elements whose abc attribute value ends with "def"
[Abc * = "def"] select all elements in the abc property value that contain the substring "def"
Specific attribute Selector
* [Lang | = "en"] {color: red ;}
Select all the elements whose lang attribute is equal to en or whose name begins with en -.
(6) descendant Selector
Select elements based on Context
H1 em {color: red ;}
The text of the em element that is used as the descendant of the h1 element is changed to red. Other em text will not be selected by this rule
The h1 em selector can be interpreted as "any em element as the descendant of the h1 element"
There is a negligible aspect about the descendant selector, that is, the hierarchy interval between two elements can be infinite.
For example, if you write ul em, this syntax Selects all em elements inherited from ul elements, regardless of the depth of the nesting hierarchy of em.
(7) child element Selector
If you do not want to select any child element, but want to narrow down the scope and select only the child element of an element, use the child element selector.
H1> strong {color: red ;}
<H1> This is <strong> very </strong> important. <H1> This is <em> really <strong> very </strong> </em> important. This rule changes the two strong elements under the first h1 to red, but the strong elements in the second h1 are not affected.
(8) adjacent sibling Selector
If you want to select the element next to another element and the two have the same parent element, you can use the adjacent sibling selector.
H1 + p {margin-top: 50px ;}
Increase the margin of the section that appears next to the h1 Element
(9) pseudo classes
1. hyperlink
A: link {color: # FF0000}
A: visited {color: #00FF00}
2. focus
Input: focus
{
Background-color: yellow;
}
3.: first-child
P: first-child {font-weight: bold ;}
Li: first-child {text-transform: uppercase ;}
Match the first child element
Must declare <! DOCTYPE>, so that first-child can take effect in IE.
4. lang
Q: lang (no)
{
Quotes :"~ ""~ "
}
<Q lang = "no"> references in a paragraph </q>
(10) pseudo elements
: First-line: set a special style for the first line of text
: First-letter: Set the style for the first letter of the text
: Before inserts new content before the Element Content
H1: before
{
Content: url(logo.gif );
}
: After, insert new content after the Element Content
H1: after
{
Content: url(logo.gif );
}