<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 属性选择器使用方法 */
/* 选择的是： 既是button 又有 disabled 这个属性的元素 */
/* 属性选择器的权重是 10 */
/* 1.直接写属性 */
button[disabled] {
cursor: default;
}
button {
cursor: pointer;
}
/* 2. 属性等于值 */
input[type="search"] {
color: pink;
}
/* 3. 以某个值开头的 属性值 */
div[class^="icon"] {
color: red;
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
color: green;
}
/* 5. 可以在任意位置的 */
div[class*="icon"] {
color: blue;
}
</style>
</head>
<body>
<!-- disabled 是禁用我们的按钮 -->
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="iicon3">图标4</div>
<div class="absicon">图标5</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: deeppink;
}
/* nth-child(n) 我们要第几个，n就是几 比如我们选第8个， 我们直接写 8就可以了 */
ul li:nth-child(8) {
background-color: lightpink;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* n 可是关键词 even 是偶数 odd 是奇数 */
/* ul li:nth-child(even) {
background-color: pink;
}
ul li:nth-child(odd) {
background-color: hotpink;
} */
/* n 是公式 但是 n 从0开始计算 */
/* ul li:nth-child(n) {
background-color: pink;
} */
/* 2n 偶数 类似于 even */
/* ul li:nth-child(2n) {
background-color: pink;
} */
/* 2n + 1 类似于 odd */
/* ul li:nth-child(2n+1) {
background-color: skyblue;
} */
/* 5n 选择第 0 5 10 15 ... */
/* ul li:nth-child(5n) {
background-color: pink;
} */
/* n+5 就是从第5个开始往后面选择 包含第5个 */
/* ul li:nth-child(n+5) {
background-color: pink;
} */
/* -n + 5 就是选择前面5个 */
ul li:nth-child(-n+5) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div :nth-child(1) {
background-color: pink;
}
div :nth-child(2) {
background-color: purple;
} */
/* div span:nth-child(1) { 这个选不到
background-color: pink;
} */
div span:nth-child(2) {
background-color: pink;
}
/* 总结： :nth-child(n) 选择 父元素里面的 第 n个孩子， 它不管里面的孩子是否同一种类型 */
/* of-type 选择指定类型的元素 */
div span:first-of-type {
background-color: purple;
}
div span:last-of-type {
background-color: skyblue;
}
div span:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<div>
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
<!-- ul 里面我们只允许放li 所以 nth-child 和 nth-of-type 就一样了 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
