CSS selector, css

CSS selector, css
CSS Selector[Wildcard character selection]* The asterisk selector matches every element on the page, but I suggest you never use it in code reproduction. It brings a lot of unnecessary burden to the browser. * {Margin: 0; padding: 0 ;}[Tag selector](Also calledType Selector): Uses the html Tag name as the selector demo: ul {}[Id selector]: Use the ID selector with caution. Customize the id of the style label. then write # custom id {css style} in the CSS file }. note: Each id must be different. # IDname {width: 960px; margin: auto;} The id is unique and cannot be reused. If possible, first try to use a tag name, a new HTML5 element, or even a pseudo class.Class)Custom class name. Usage: enter it in the css file. class Name {css style }.. className {border-color: blue; font-size: 16px;} Note: one label can use multiple class names and one class name can be used by Multiple labels.Difference between id and classId selector. One id can be used only once and must not be repeated. GetElementById ('') class selector. A class name can be used repeatedly. For example, multiple elements on the page can be defined using the same style.[Group selector]: Control multiple tags at the same time. Tag names are separated by, a, p, span {}[Combination selector]: You can also choose between tag names, id names, and class names. Adding the style div. p {} indicates that all classes under the div label are p labels. Div, # a {} indicates the tag with id a and all div labels.Link Selector]: Link selector can be divided into selector Name Description version English nameE f contains the selector.Select all F elements contained by the Eelement. CSS1 (Descendant combinator) is also calledDescendant SelectorOfE> F subselectorSelect all the sub-elements F as the Eelement. CSS2 (Child combinator)E + F adjacent SelectorSelect the F element next to the Eelement. CSS2 (Adjacent sibling combinator)E ~ F sibling SelectorSelect all e-sibling elements F. CSS3 (General sibling combinator)[Pseudo-class selector]Not all tags can use pseudo-class delimiters. Here we only talk about the pseudo-class delimiters of tag.

A: link {color: # FF0000; text-decoration: none} // unaccessed link a: visited {color: #00FF00; text-decoration: none} // The accessed link a: hover {color: # FF00FF; text-decoration: underline} // move the cursor over the link a: active {color: # 0000FF; text-decoration: underline} // activation Link

Attention: You can write one or more pseudo classes. But it must be written in order. Otherwise, a problem may occur!Version description E: linkCSS1 sets the style of Hyperlink a before being accessed. E: visitedCSS 1 sets the style of Hyperlink a when its link address has been accessed. E: hoverCSS1/2 sets the style of an element when it is hovering over it. E: activeCSS1/2 sets the style of the element when it is activated by the user (events occurring between mouse clicks and release. E: focusCSS1/2 sets the style of an element when it becomes the input focus (the onfocus event of this element occurs. E: lang (fr)CSS2 matches the eElements in special languages. Rarely used E: not (s)CSS3 matches element E without s selector. E: rootCSS3 matches the root element of the Eelement in the document. Html elements E: first-childCSS2 matches the first child element E of the parent element. E: last-childCSS3 matches the last child element E of the parent element. E: only-childCSS3 matches only one sub-element E of the parent element. E: nth-child (n)CSS3 matches the nth child element E of the parent element. E: nth-last-child (n)CSS3 matches the nth child E of the parent element. E: first-of-typeCSS3 matches E, the first sibling element of the same type. E: last-of-typeCSS3 matches the last sibling E of the same type. E: only-of-typeCSS3 matches a unique sibling E of the same type. E: nth-of-type (n)CSS3 matches the nth sibling Element E of the same type. E: nth-last-of-type (n)CSS3 matches the nth sibling E in the same type. E: emptyCSS3 matches element E without any child elements (including text nodes. E: checkedCSS3 matches the selected Element E on the user interface. (When input type is radio or checkbox) E: enabledCSS3 matches the available element E on the user interface. E: disabledCSS3 matches Element E in the disabled state on the user interface. E: targetCSS3 matches the Eelement pointed to by the relevant URL. ★The difference between first-child and first-of-type:Example:

<Div class = "test"> <p> first child element </p> 
Syntax description:P: first-child matches the p element because the p element is the first child element of the div. h1: first-child does not match any element, in this case, h1 is the second child element of div, not the first one. span: first-child does not match any element, because both span elements are not the first child element of div; p: first-of-type matches the p element, because p is the first of all the child elements of p in div. In fact, there is only one child element for p; h1: first-of-type matches the h1 element, because h1 is the first of all div's h1 child elements. In fact, there is only one child element for h1; span: first-of-type matches the third child element span. Here, div has two child elements of span, matching the first one.
Therefore, the above two examples can draw a conclusion:: First-child matches the first child element of a parent element. It can be said that it is the first child element in the structure. : First-of-type matches the first child element of the same type under a parent element, such as p: first-of-type, is the first of all the child elements of the p type. It is no longer the first child element, as long as it is the first element of this type. Attention: of course, these elements belong to the same level, that is, their peers. The same type of selector: last-child and: last-of-type,: nth-child (n) and: nth-of-type (n) can also be understood in this way.
[Attribute selector]Version description
E [att]CSS2 select an Eelement with the att attribute.
E [att = "val"]CSS2 selects an Eelement with the att attribute and the attribute value is equal to val.
E [att ~ = "Val"]CSS2 selects a list of words with the att attribute and the attribute value is separated by spaces. One of them is an Eelement equal to val.
E [att ^ = "val"]CSS3: select an Eelement with the att attribute and the attribute value is a string starting with val.
E [att $ = "val"]CSS3 selects an Eelement with the att attribute and the attribute value is a string ending with val.
E [att * = "val"]CSS3 selects an Eelement with the att attribute and the attribute value is a string containing val.
E [att | = "val"]CSS2 selects an Eelement with the att attribute and the attribute value starting with val and separated by the connector.
[Pseudo object selector]Version description
E: first-letter/E: first-letterCSS1/3 sets the style of the first character in the object.
E: first-line/E: first-lineCSS1/3 sets the style of the first line in the object.
E: before/E: beforeContent that occurs before an object (based on the logical structure of the Object Tree) in CSS2/3. Used with the content attribute
E: after/E: afterCSS2/3 is set after an object (based on the logical structure of the Object Tree. Used with the content attribute
E: placeholderCSS3 sets the style of the object text placeholder.
E: selectionCSS3 sets the color when an object is selected.
Note: the syntax of CSS3 is changed to:. The original CSS1 is:, so it is still appropriate to directly use two colons.Example: html:
<Input type = "search" placeholder = "test">
Css:
input::-webkit-input-placeholder {color: green;}
I will not give an example if there are too many attributes. You can read the manual or the blog post written by the following senior man.
30 CSS delimiters you must remember:Http://www.open-open.com/lib/view/open1429583085104.html