Home > Developer > Web Develop
1. The difference between class and ID selectors
Same point: can be applied to any element
Different points:
1. The ID selector can only be used once in the document. Unlike class selectors, an ID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once.
2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for one element at the same time, but only with the method of the class selector, the ID selector is not possible (cannot use a space-delimited list of words)
2. Property selector: [Properties]
Select according to one or more attribute elements, h1[class]{color:red;} A[class] [title]{color:red;}
Choose according to the specific attribute value, a[class= "A1"]{color:red;}
Select according to the partial attribute value. p[class~= "title"]{color:red;} The class that represents the P tag changes the color to red as long as it contains the title. "~=" can be used for any property.
Substring Matching Property selector:
[foo^= "bar] Select the Foo attribute value begins with" bar "so the element
[foo$= "bar] Select the Foo attribute value ends with" bar "so the element
[foo*= "bar] Select the Foo attribute value contains the substring" bar "so the element
Specific property selector: *[lang|= "en"]{color= "blue";} This rule selects all elements of the lang attribute that begin with en or en-. The most common use of this property selector is to match language values.
3. * Sub-selector, i.e. greater than symbol (>), used to select the first generation child element of the specified label element.
* contains selectors, which include a space to select the Descendants element under the specified tag element. The difference between this selector and the sub-selector is that the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on the child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.
Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.
* To select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling (Adjacentsibling Combinator), which is represented by a plus sign (+).
Example: H1 +p {margin-top:0px;} Select the paragraph that appears immediately after a H1 element, H1 to have a common parent element with the P element.
4. Pseudo-Class selector:
Link pseudo-class: static:
: Link does not have access to the address hyperlink A:link{color:bule}
: Visited visited address hyperlink a:visited{color:red}
The above two examples are equivalent to <body link= "Blue" vlink= "Red" >
Dynamic Pseudo-Class: (Can be applied to any element)
: Focus indicates the element that currently has the input focus, that is, an element that can accept keyboard input or that can be activated in some way.
: hover indicates that the mouse pointer rests on hover
: Active indicates the element that is activated by the user input. Case of mouse clicks.
* Sequence of pseudo-classes "link-visited-focus-hover-active"
* Select the first child element: First-child
Example: P:first-child {color:red;} All P elements that are the first child element of an element are set to bold. A common mistake is to assume that a selector such as First-child chooses the first child element of the P element.
* Pseudo-classes can be used in combination with the same selector. The binding order is not important, but it is not necessary to put the mutex pseudo-classes together.
Example: A:link:hover:lang (DE) {color:red} or A:hover:link:lang (DE) {color:red} will turn the non-clicked language into a German hyperlink when the mouse hovers over the color red.
5. Pseudo-Element selector pseudo-elements must be placed in the last face of the pseudo-element selector that appears
* Set the first letter style: First-letter
* Set the first line style: First-line
* Set before and after styles: Before:after
6. Can be compatible with all the "pseudo-class selector" is a tag (pseudo-class selectors are many, especially CSS3, but not compatible with all browsers), for example: hover can be placed on any label, such as P:hover, but their compatibility is very bad, So now more commonly used is the combination of a:hover.
css--Selector
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
