选择器
01 标签选择器h1,li,等
- 标签选择器 返回的是一组数据
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {color: brown;}</style></head><body><ul><li>item1</li><li>item1</li><li>item1</li><li>item1</li><li>item1</li></ul></body></html>
02类选择器
- 类选择器，使用class（简化.）
- 标签选择器 返回的是一组数据
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li.on{background-color: cornflowerblue;}</style></head><body><ul><li>item1</li><li class="on">item1</li><li>item1</li><li class="on">item1</li><li>item1</li></ul></body></html>
id选择器
- id选择器，使用class（简化#）
标签选择器 返回的是一个数据
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.on {background-color: cornflowerblue;}#off {background-color: darkgoldenrod;}</style></head><body><ul><li id= "off">item1</li><li class="on">item1</li><li>item1</li><li class="on">item1</li><li id = "off">item1</li></ul></body></html>
上下文选择器
- 由大到小选择。后代选择器
- 01选择所有标签渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li {background-color:darkgoldenrod}</style></head><body><ul><li id="off">item1</li><li class="on">item1</li><li>item1</li><ul><li>item1-2</li><li>item1-2</li></ul><li class="on">item1</li><li id="off">item1</li></ul></body></html>
- 02父子级别的发生渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body> ul> li {background-color: darkgreen;}</style></head><body><ul><li id="off">item1</li><li class="on">item1</li><li>item1</li><ul><li>item1-2</li><li>item1-2</li></ul><li class="on">item1</li><li id="off">item1</li></ul></body></html>
同级选择器
04
伪类选择器(重点)nth-of-type与last-of-type
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css01.css"></head><body><ul><li>itme1</li><li>itme2</li><li>itme3</li><li>itme4</li><li>itme5</li><li>itme6</li><li>itme7</li><li>itme8</li><li>itme9</li><li>itme10</li></ul></body></html>`
-匹配任意位置的元素写法一
/* 写法一匹配第三个li */ul li:nth-of-type(0n+3){background-color: rgb(228, 127, 164);}
写法二
ul li:nth-of-type(3){background-color: rgb(228, 127, 164);}
匹配所有元素
ul li:nth-of-type(1n){background-color: rgb(228, 127, 164);}
- 匹配倒数第三个
ul li:nth-last-of-type(3){background-color: rgb(228, 127, 164);}
- 匹配从第三个开始
ul li:nth-of-type(n+3){background-color: rgb(228, 127, 164);}
- 匹配倒数
ul li:nth-last-of-type(-n+3){background-color: rgb(228, 127, 164);}
- 匹配偶数 (even)
ul li:nth-of-type(2n){background-color: rgb(228, 127, 164);}
匹配奇数(odd)
ul li:nth-of-type(2n-1){background-color: rgb(228, 127, 164);}