Selector lists

combine selectors into a selector list, by adding a comma between them.

When you group selectors in this way, if any selector is invalid the whole rule will be ignored.

Types of selectors

• Element Selector : h1{ }
• Class Selector: .box, span.box, .notebox.warning{ }
• ID Selector: #box{ }
• Attribute Selector: h1[title], h1[title="nonsense"]{ }
• Pseudo-Class Selector(State):a:hover{ }
• Pseudo-Element Selector:p:first-line{ }(选择元素的特定部分)
• Direct-Children Selector:article > p { }
• Descendant Selector: article p{ }
• Adjacent-Sibling Selector: h1 + h2 { }
• General-Sibling Selector: h1 ~ h2 { }(选择所有的兄弟节点)

Type, class, and ID selectors

The universal selector

• an asterisk (*)
• selects everything in the document or inside the parent element if it is being chained together with another element and a descendant combinator
• use the universal selector to remove the margins on all elements

Using the universal selector to make your selectors easier to read

problem：
article:first-child 与 article :first-child 的不同含义？

Answer：
article:first-child select any article element that is the first child of another element
article :first-child select the first child of any descendant element of article , no matter what element it was.
所以，我们把article :first-child写为 article *:first-child！

Class selectors

.notebox.warning 这种写法对应的是 class="notebox warning"

ID selectors

Attribute selectors

Presence and value selectors

类型	用法
[attr]	Matches elements with an attr attribute
[attr=value]	Matches elements with an attr attribute exactly equals the value
[attr~=value]	Matches elements with an attr attribute contains the value
[attr|=value]	Matches elements with an attr attribute equals the value or begin with the value and a hyphen（-）and maybe something followed

<table><tr><td></td><td></td></tr><tr><td></td><td> </td></tr><tr><td></td><td> </td></tr><tr><td></td><td></td></tr></table>

Substring matching selectors

类型	用法
[attr^=value]	Matches elements with an attr attribute whose value begins with value
[attr$=value]	Matches elements with an attr attribute whose value ends with value
[attr*=value]	Matches elements with an attr attribute whose value contains value anywhere within the string

注意 ^= 与 |= 的区别
^ and $ have long been used as anchors in so-called regular expressions to mean begins with and ends with

Case-sensitivity

If you want to match attribute values case-insensitively you can use the value i before the closing bracket. e.g. li [class^="a" i]{ }

Pseudo-classes and pseudo-elements

A pseudo-class is a selector that selects elements that are in a specific state

• article p:first-child ： 找到 article 中的 p 且为第一个child
• input:invalid ： 当 input 的数据为invalid时被选中
• hover : this only applies if the user moves their pointer over an element, typically a link.
• focus : only applies if the user focuses the element using keyboard controls.

It is valid to write pseudo-classes and elements without any element selector preceding them. 我们经常是使用 *:pseudo 来表示

Pseudo-element

they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

Modern browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility

::before ::after 用来插入content，用法：
.box::after { content: "This should show before the other content." }
A more valid use of these pseudo-elements is to insert an icon，which is a visual indicator that we wouldn't want read out by a screenreader

Combinators

Descendant combinator

represented by a single space character

Child combinator

child combinator (>) matches only those elements that are the direct first children of elements.

Adjacent sibling combinator

The adjacent sibling selector (+) is used to select element that is right next to given element.(也就是，a + b , 当且仅当 b 是 a 的下一个元素则选择 b)

General sibling combinator

use the general sibling combinator (~)，e.g., to select all <img> elements that come after <p> elements, p ~ img { }