A basic selector
- .Name {} class selector
- ID selector #name {}
- The selector element name {}
- Wildcard selector (not through the compiler) *} {
- It includes a selector pc {}: parent child under the same name for all
- Child element selector p> {} c: layer of the same name in all parent child
- Adjacent sibling selector c1 + c2 {}: child1 same level with an adjacent element child2
General sibling selectors c1 ~ c2 {}: the same hierarchy, a next child1 (not adjacent) element child2
II. Attribute selector
- E [attr]: attr attribute element comprising
- E [attr = "value"]: Only the attribute value is equal to "value" elements
- E [attr ~ = "value"]: Some elements have many attributes attribute values, the attribute value indicating the style as long as there is a "value" elements
- E [attr | = "value"]: attribute value "value-" beginning of the element
- E [attr ^ = "value"]: attribute value "value" beginning of the element
- Element attribute values to "value" end: E [attr $ = "value"]
E [attr * = "value"]: string contains the attribute value "value" elements
Pseudo class selector
Dynamic pseudo class selector (: link: visited: hover: active: focus)
- : Link: link not effect access (micro-channel applet does not support)
- : Hover: a rollover effect (micro-channel applet does not support)
- : Visited: the effect after the link is accessed (micro-channel applet does not support)
- : Active: mouse down effect (taking place at that point it)
: Focus: the effect after gains focus
Status pseudo class selector (: enabeld: disabled: checked)
选择伪类选择器(:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type)
- : First-child: selecting the first child element of an element (more precisely as follows: Select the first element of the property's use)
- : Last-child: Select the last child of an element (more precisely as follows: Select the last element of the property's use)
- : Nth-child (): selecting one or more specific sub-element of an element (parameter 1 from the start)
- : Nth-last-child (): selecting one or more particular children of an element from the last child element of the element began to count
- : Nth-of-type (): Select the specified element (parameter starting from 1)
- : Nth-last-of-type (): Select the specified element, counted from the last element
- : First-of-type: selecting a parent element of the child element of the first kind
- : Last-of-type: select a parent element of the last of its kind in sub-element
- : Only-child: a selected element is the only child element of its parent element
: Only-of-type: Select an element of the same type is only one of its sub-elements parent element
Empty contents pseudo class selector (: empty): there is no element selected content
Negative pseudo class selector (: not): each element does not match the property (small micro-channel is not supported)
伪元素(::first-line ::first-letter ::before ::after ::selection)
- :: first-line: The first line
- :: first-letter: The first letter
:: selection: (such as when copying) the selected text effect, CSS and background color only modify two properties, the applet does not support micro-channel
Original: https://blog.csdn.net/weixin_39766005/article/details/82056839