css选择器
2020-05-14 本文已影响0人
C_G__
作用范围
// 从上至下，范围越来越小
* {}：通配选择器，全部
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;
}
