css选择器

作用范围

// 从上至下，范围越来越小
* {}：通配选择器，全部
body {}：标签选择器
.class {}：类选择器
#id {}：ID选择器 // id应该唯一，但相同式样也可作用全部元素

父子标签

<body>
    <main>
        <span>
            <div>main span div</div>
        </span>
        <div>main div</div>
    </main>
</body>

// 作用于main里所有子，孙级div
// main div 和 main span div都为红色
body main div {
  color: red;
}

// 仅作用于main里所有子div
// 仅main div为红色
body main > div {
  color: red;
}

兄弟标签

<body>
    <main>
        <div>main div 0</div>
        <span>
            <div>main span div</div>
        </span>
        <div>main div 1</div>
        <a href="https://www.baidu.com">百度</a>
        <div>main div 2</div>
    </main>
</body>

// span 后的所有兄弟div
// main div 1 和 main div 2 都为红色
body main span~div {
  color: red;
}

// span 后的第一个兄弟div
// 仅main div 1 为红色
body main span+div {
  color: red;
}

// 注意 '后' 字，因为main div 0不在span后，所以全程无变化。

属性

<body>
    <main>
        <div title id >main div has title, id props</div>
        <span>
            <div title>main span div has title prop</div>
        </span>
        <div title>mian div has title prop</div>
        <div title="last">main div has title="last" prop</div>
    </main>
</body>

// 所有有title属性的div 
// 所有都变红，因为都有属性title
div[title] {
  color: red;
}

// 同时有title 和 id属性的div
// 仅 main div has title, id props 变红
div[title][id] {
  color: red;
}

// 有title属性且值为"last"的div
// 仅 main div has title="last" prop 变红
div[title="last"] {
  color: red;
}

注意 div和[title]之间不要有空格，否则不起作用。
eg：
div[title]：ok
div[title][id]：ok
div [title]：no
div [title] [id]：no

<body>
    <main>
        <div title="last">main div prop title value last prefix</div>
        <span id>
            <div title="last afsa">main span div prop title value last prefix</div>
        </span>
        <div title>mian div has title prop</div>
        <div title="last fhsjfsao" id>main div prop title value last prefix</div>
        <div title="fhsjfsao  last" id>main div prop title value last surfix</div>
        <div title="fhsjfsao  last trywioue" id>main div prop title value contain last </div>
        <div title="last-trywioue" id>main div prop title value last- </div>
    </main>
</body>

// 以title值为last开头的div
div[title^="last"] {
  color: red;
}

// 以title值为last结尾的div
div[title$="last"] {
  color: red;
}

// 以title值包含last的div
div[title*="last"] {
  color: red;
}

// 以title值包含last且是独立单词的div
div[title~="last"] {
  color: red;
}

// 以title值[last | last-]的div
div[title|="last"] {
  color: red;
}

伪类

<body>
    <main>
        <a href="https://www.baidu.com">百度</a>
    </main>
</body>

a:link {
  color: red;
}
a:visited {
  color: orange;
}
a:hover {
  color: green;
}
a:active {
  color: blue;
}

// 目标对象
a:target {
}
// 空伪类
a:empty {
}

结构

<body>
    <main>
        <h3>main h3</h3>
        <h1>main h1</h1>
        <h1>main h1-2</h1>
        <h4>main h4</h4>
        <h2>main h2</h2>
        <div>
            <h3>main div h3</h3>
            <h1>main div h1</h1>
            <h1>main div h1-2</h1>
            <h2>main div h2</h2>
            <div>
                <h3>main div div h3</h3>
            </div>
        </div>
        <div>
            <h3>main div2 h3</h3>
        </div>
    </main>
</body>

// main标签所有后代的第一个元素
// main h3 和 main div h3
main :first-child {
  color: green;
}

// main标签的第一个子元素
// main h1
main >:first-child {
  color: green;
}

// main标签所有后代第一个元素是h1
// main div h1
main h1:first-child {
  color: green;
}

// main标签所有后代的第一个h1元素
// main h1 main div h1
main h1:first-of-type {
  color: green;
}

// main标签所有后代的仅有一个元素的
main :only-child {
  color: green;
}

// main标签所有后代的仅有一个h3元素的
main h3:only-child {
  color: green;
}

// main标签仅子标签且仅有一个h4
main >h4:only-of-type {
  color: green;
}

// main标签所有后代的第一个元素
// main h3,  main div h3
// main div div h3, main div2 h3
main :nth-child(1) {
  color: green;
}

// main标签子级的第一个元素
// main h3
main >:nth-child(1) {
  color: green;
}

// main标签所有后代的第一个和第二个元素
main :nth-child(-n+2) {
  color: green;
}

// main标签所有后代的第一个和第二个元素
main :nth-child(n+2) {
  color: green;
}

<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
</body>

// 偶数行
ul li:nth-child(2n) {
  color: red;
}
ul li:nth-child(even) {
  color: red;
}
// 奇数行
ul li:nth-child(2n-1) {
  color: red;
}
ul li:nth-child(odd) {
  color: red;
}

文字处理

<body>
    <span>HelloWorld</span>
    <p>
        从暮春到初夏，习近平总书记在45天之内三次出京考察，分别去往浙、陕、晋，覆盖中国东、西、中。大疫之年如何完成既定目标、交出满意答卷？总书记观大势、察实情、出实招、发警语。山西考察期间，他重点看了三个方面，不仅涉及山西，也关系全国，不仅适用当下，也指导未来。
    </p>
</body>

span::after {
  content: "!";
  color: red;
}
span::before {
  content: "Hi! ";
  color: green;
}

p::first-letter {
  color: red;
}
p::first-line {
  color: burlywood;
}

表单

<body>
    <div>
        <input type="text" />
        <input type="text" disabled />
        <input type="text" required />
        <input type="email" />
        <input type="text" />
        <input type="radio" name="sex" checked>
        <label>男</label>
        <input type="radio" name="sex">
        <label>女</label>
    </div>
</body>

div {
  border: 1px solid #ddd;
  width: 200px;
}
div>input[type="text"] {
  border: none;
  outline: none;
}
input {
  display: block;
}
input:disabled {
  background: burlywood;
}
input:required {
  background: red;
}
input:valid {
  background: green;
}
input:invalid {
  background: red;
}
input:checked+label {
  color: green;
}
input:optional {
  background: gray;
}