![]()
一、CSS选择器
![]()
简单选择器
![]()
1.分类
| 分类 | 说明 | 比例 |
|---|---|---|
| 标签选择器 | 普通标签 | <h2></h2>;使用h2{} |
| 属性选择器 | 通过属性选择 | grand=”one”;使用方法[grand=”one”] |
| 类选择器 | 通过class定义 | class=”top”;.top{} |
| id选择器 | 通过id来定义 | id=”foot”;#{} |
![]()
2.举例
九宫格
<!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> .container{ width: 300px; height: 300px; display: grid; grid-template-columns:repeat(3,1fr); gap: 5px; } .item{ font-size: 2em; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } body{ background-color:lightcyan; } /* .item.center{background-color: lightgreen;} */ .center{background-color: lightgreen;} #first { background-color:rgb(0, 255, 0); } .item#first{background-color: yellow;} div#first{background-color: red;} .item[title="hello"]{background-color:lime;} </style> </head> <body><div class="container"> <div class="item" id="first">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item" title="hello">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div></div></div> </div> </body></html>![]()
二、群组选择器
h2,.top,#footer{}
![]()
三、上下文选择器
| 序号 | 分类 | 说明 |
|---|---|---|
| 1 | 后代选择器 | 最上层选择器 |
| 2 | 子选择器 | > |
| 3 | 同组相邻选择器 | + |
| 4 | 同级所有选择器 | ~ |
![]()
代码举例
<!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> .container{ width: 300px; height: 300px; display: grid; grid-template-columns:repeat(3,1fr); gap: 5px; } .item{ font-size: 2em; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* body div{background-color: yellow;} */ /* body div{border: 1px solid #000;} */ /* body>div{border: 1px solid #000;} */ /* .item.center+div{border: 1px solid #000;} */ .item.center~div{border: 1px solid #000;} </style> </head> <body><div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div></div></div> </div> </body></html>![]()
四、伪类选择器
![]()
1、代码举例
<!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> .container{ width: 300px; height: 300px; display: grid; grid-template-columns:repeat(3,1fr); gap: 5px; } .item{ font-size: 2em; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* .container :first-child{background-color:yellow;} */ /* .container :last-child{ background-color:red; } */ /* .container>:nth-child(1){background-color: #fff;} */ /* .container>:nth-child(2n){background-color: blue;} .container>:nth-child(2n-1){background-color:yellow;} */ /* .container>:nth-child(even){background-color: blue;} .container>:nth-child(odd){background-color:yellow;} */ .container>:nth-child(-n+3){background-color: #fff;} .container>:nth-child(n+5){background-color: #fff;} </style> </head> <body><div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div></div></div> </div> </body></html>![]()
四、伪类分组选择器
-看代码
<!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> .container{ width: 300px; height: 300px; display: grid; grid-template-columns:repeat(3,1fr); gap: 5px; } .item{ font-size: 2em; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } .container span:nth-of-type(2n){background-color: #fff;} </style> </head> <body><span class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <span class="item">5</span> <span class="item">6</span> <span class="item">7</span> <span class="item">8</span> <span class="item">9</span></div></div> </div> </body></html>