Insert only some elements:use a stricter CSS selector before: After,:beforeTo
perform an insert with the quotes propertyDefine quotes first, and then specify content using Open-quote or Close-quote
add a number with the Counter-increment propertythe character specified by this property is the calculator name, which is then referenced by the Counter property.
Use custom numbering:Implemented through counter (Name,list-style-type)among them, List-style-type:decimal: Arabic numerals, default values. Disc: Solid CircleCircle: Hollow CircleLower-roman: lowercase roman numeralsUpper-roman: Uppercase Roman Numeralslower-alpha: lowercase english alphabetUpper-alpha: uppercase English alphabetNone: Bullets are not usedcjk-ideographic: Plain ideographic numerals, Kanji 123Georgian: The traditional George numberLower-greek: Basic Greek small LetterHebrew: The traditional Hebrew numeralsHiragana: Japanese Hiragana charactersHiragana-iroha: Japanese hiragana serial numberKatagana: Japanese Katakana charactersKatagana-iroha: Japanese Katakana serial numberlower-latin: lowercase latin alphabetupper-latin: uppercase Latin alphabetTo
add a multilevel number:define multiple number counters, and then insert different counters for different selectorswhen setting a level two number, use Counter-reset to reset the specified counter
structural pseudo-class selectorsSelector:root: Matches the root element of a document, in an HTML document, with elements always Selector:first-child: The first Selector child element of a parent elementSelector:last-child: The last Selector child element in the parent elementselector:nth-child (N): The nth Selector child element in the parent element, when N is Odd/event, which represents the odd/even number ofselector:nth-last-child (N): The nth Selector child element of the parent element, when N is Odd/event, represents the odd/even number, and n can also be a "3n+1" for the penultimate 3n+1 child node (1,4,7 ...)Selector:only-child: Is the Selector of the unique child element of its parent elementSelector:first-of-type: The first element in the parent element that matches the SelectorSelector:last-of-type: Matches the last element of Selector in its parent elementSelector:nth-of-type (N): The nth element in the parent element that matches the SelectorSelector:nth-last-of-type (N): The reciprocal nth element of the Selector in its parent elementSelector:only-of-type: The only element in its parent elementSelector:empty: An selector,selector that does not have any child elements in it is omitted when it represents a null element for all
UI element State pseudo class selectorSelector:link: Selector element not accessed, usually Selector can only be a hyperlink elementselector:visited: The Selector element that has been visited, usually Selector can only be a hyperlink elementselector:active: The Selector element between clicking and releasing the mouseSelector:hover: Selector element in hover state of mouseSelector:focus: The Selector element that gets the focusselector:enable: Selector element in the available stateselector:disable: Selector element in an unavailable stateselector:checked: Selector element in the selected stateSelector:default: Selector element in the selected state when the page is openselector:read-only: The Selector element in the state of the systemSelector:read-write: Selector element in read-write statethe currently selected contents of the Selector::selection:selector elementWhere: Default refers to which state is not understood
Browser-specific properties, plus prefix-ms-: Corresponding Internet Explore browser-moz-: Browsers that correspond to Gecko engines, such as the Firefox browser-o-: corresponding to Opera browser-webkit-: Corresponds to WebKit engine-based browser, such as Chrome,safari browser
Special pseudo-class selectorsSelector:target: Matches an element that conforms to the Selector selector and must be a named anchor TargetSelector1:not (SELECTOR2): elements that conform to Selector1 but do not conform to Selector2
Modify the display style in the scriptSteps:1. Get the target element to set the CSS style, for example, you can use getElementById (")2. To modify the CSS style of the target element, there are two common methods:① Modify inline CSS property values, for example: Obj.style. Property Name = property value② Modifying the class attribute value of an HTML element, for example: Obj.classname = class selector
Dynamic Add stereoscopic Effect:the color of the left and top borders is slightly lighter, the right and bottom borders are slightly darker, which is the stereo effect(Use Javascrpt to change Class)
Frontend note Seven, cascading style sheets and CSS selectors (ii)
