CSS selectors you must know

What is a selector:

Each css style definition consists of two parts, the form is as follows:

[code] 选择器{
样式;
}

[/code] The part before {} is the "selector". The "selector" specifies the object of the "style" in {}, that is, which elements of the webpage the "style" applies to.

Base selector

Tag selector (choose tag name) : A complete HTML page is composed of many different tags, and the tag selector determines which tags to use the corresponding CSS style;
such as:

p{
color:#900;
font-size:12px;
background:#090;
}

ID selector (##+ID name) : ID selector can specify a specific style for HTML elements marked with a specific ID. The element is selected based on the element ID, which is unique, which means that the same id can only appear once in the same document page;

Such as:

#demoDiv{
color:#FF0000;
}

Class selector (.+class name) : The class selector is selected according to the class name, and is marked with "." in front;

Such as:

.demoDiv{
color:blue;
}

Universal selector (select all elements) : Universal selector is represented by *;
such as:

* {
color:green;
font-size: 12px;
}

Group selector : When several elements have the same style attributes, you can call a declaration together, separated by commas; for
example:

p,h1,span{
color:red;
line-height:20px;
}

#main p, #sider span {
color:#000;
line-height:26px;
}

Using the group selector will greatly simplify the CSS code. Combine multiple elements with the same attributes for selection and define the same CSS attributes. This greatly improves the coding efficiency and reduces the amount of CSS files. volume.

Hierarchy selector

Child selector (use> split between elements): Child selector (child selector) refers to its direct descendants, which can be understood as the first descendant acting on child elements;
such as:

p>span{
color:red;
}

Descendant selector (separated by a space between elements): used to select the descendants of a specific element or element group, put the selection of the parent element in the front, and the selection of the child elements in the back, separated by a space in the middle,
such as:

section span{
color:blue;
}

The difference between
child selector and descendant selector: 1) Child selector (child selector) refers only to its direct descendants, and descendant selectors act on all child descendant elements;
2) Child selectors are performed through ">" Select, and descendant selectors use spaces to select;

Brother selector (separated by + between elements): In addition to the above sub-selector and descendant selector, we may also want to find one of the two siblings, such as a heading h1 element followed by two paragraph p elements, We want to locate the p element of the first paragraph and apply styles to it. We can use the adjacent sibling selector;
such as:

h1 + p {
color:blue;
}

Pseudo-class selector

Pseudo-classes can be applied to link tags, as well as some form elements, but the application of form elements is not supported by IE, so generally pseudo-classes will only be applied to link styles.

Dynamic pseudo-class selector
The writing order of dynamic pseudo-selectors:
1) link and visited must be placed first (no order, static pseudo-class selector);
2) link and visited can only be used for a tag;
3) link And visited is focus
4) focus is hover;
5) hover is active;
Structural pseudo-class selector
first-child: the first element.
last-child: The last element.
nth-child(n): If you want to select the number of a certain element, n takes the value.
nth-child(-n+m): The initial value of n of the first m elements selected is 0.
nth-of-type(n): Select the nth element.
nth-last-child(n): Select the nth element from the bottom.
Negative pseudo-class selector
Element name: not (n) In addition to a certain element, other elements add styles

Pseudo element selector:

All pseudo-element selectors must be placed at the end of the selector where the pseudo-element appears, which means that the pseudo-element selector cannot be followed by any derived selector;

:first-letter, set the first letter style of the block element, the conversion of inline elements into block elements and inline block elements are also supported;

div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;

:first-line: Set the style of the first text line;

.box .main:first-line {
color: #f00
} 
　//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height

:before: Set the previous style, you can insert the generated content, and set its style;

body:before {
content: 'The Start:'; 
display: block;
}
//在body元素前插入文本内容'The Start:'，并设置其为块元素

:after: After setting the style, you can insert the generated content and set its style; for
example:

body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.'，并设置其为块元素

input::-webkit-input-placeholder (modify the prompt information style of the input box)

Attribute selector

Matching is based on the attribute of the element, and its attribute can be a standard attribute or a custom attribute; it can also match multiple attributes at the same time;

Format: element name [attribute name + "attribute value"]

input[type=“text”]

Format: element name [attribute name^=content starting with attribute value]
select the element starting with XXX

input[type^=“te”]+span{ 
color:red;
}

Format: element name [attribute name$ = content ending at attribute value]
select the element ending with XXX

input[type $ =“d”]+span{
 color:blue;
}

Format: element name [attribute name* = content contained in attribute value]
select the element that contains XXX

input[type*=“i”]+span{ 
color:green;
}

Conclusion: Friends who want to learn the web front-end, and friends who need front-end information can join the learning skirt here, front: 953, middle: 352, and finally: 883, there are all from white to big guys in the skirt, as well as front-end learning Information, front-end interview questions PDF files, free to share, see or leave!