1. universal selector :asterisk(*), Using the universal selector to make your selectors easier to read

article *:first-child {
  font-weight: bold;
}

h1.highlight {
    background-color: pink;
}
h1[class="highlight"] {
    font-style: italic;
}
.notebox.danger {
  border-color: red;
  font-weight: bold;
}

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}

Warning: Using the same ID multiple times in a document may appear to work for styling purposes, but don't do this. It results in invalid code, and will cause strange behavior in many places.

a[title] { }

a[href="https://example.com"] { }

[attr~=value]value相等，value=开头到空格，比如：　“triangle　star" 里面的triangle
Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.

[attr|=value] value相等，value=开头到－(连字符)比如：　triangle-border 里面的triangle
Matches elements with an attr attribute whose value is exactly value or begins with value immediately followed by a hyphen.

[attr^=value]  选中以value开头的
Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.

[attr$=value] | li[class$="-box"] | 选中以value结束的
Matches elements with an attr attribute whose value ends with value.

[attr*=value] | li[class*="box"] | 选中以包含value的
Matches elements with an attr attribute whose value contains value anywhere within the string.

li[class^="a" i] {
    color: red;
}

p:first-child { } last-child nth-child only-child invalid required optional valid
a:hover { }　　　
一个冒号表示伪类，A pseudo-class is a selector that selects elements that are in a specific state,　给元素本身加上特性（特别状态）；
比如：第一个元素、光标移动上面的时候，　所有伪类的行为方式都是相同的。它们的目标是处于特定状态的文档的某个部分，其行为就像您在HTML中添加了一个类一样

p::first-line { }　　双冒号表示伪元素，　一般选中或修辞的是元素下面的子元素
a: link visited hover focus
伪元素就好像你你增加了一个新的HTML元素，而不像是增加了样式。