1、属性选择器
（1）属性选择器可以不借助于类或者ID进行选择
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> input[value]{ background-color: red; } </style> </head> <body> <form> <input type="text"/> <input type="text" value="请输入密码" /> </form> </body> </html>
效果：
（2）选择属性=值的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> input[type=text]{ background-color: red; } </style> </head> <body> <form> <input type="text" value="请输入用户名"/><br> <input type="password" value="请输入密码" /> </form> </body> </html>
效果：
（3）选择属性值开头/结尾的某些元素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div[class^=ima]{ color: red; } </style> </head> <body> <div class="imags1">1</div> <div class="imags2">2</div> <div class="tupian1">3</div> <div class="tupian2">4</div> </body> </html>
以。。。。结尾：
<style> div[class$=pian2]{ color: red; } </style>
2、结构伪类选择器
主要根据文档的结构来选择元素，常用于根据父级选择里面的子元素
（1）选择第一个
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> ul :first-child{ color: red; } </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> </ul> </body> </html>
注意选择器的元素（ul）后面要添加空格
（2）选择第n个
<style> ul :nth-child(3){ color: red; } </style>
（3）偶数孩子
<style> ul :nth-child(even){ color: red; } </style>
<style> ul :nth-child(2n){ color: red; } </style>
（4）奇数孩子
<style> ul :nth-child(odd){ color: red; } </style>
<style> ul :nth-child(2n+1){ color: red; } </style>
（5）从第三个孩子元素开始：
<style> ul :nth-child(n+3){ color: red; } </style>
（6）前三个孩子元素：
<style> ul :nth-child(-n+3){ color: red; } </style>
3、nth-child与nth-of-type
（1）nth-child
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> section div:nth-child(1) { color: red; } </style> </head> <body> <section> <p>1</p> <div>2</div> <div>3</div> <div>4</div> </section> </body> </html>
（2）nth-of-type
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> section div:nth-of-type(1) { color: red; } </style> </head> <body> <section> <p>1</p> <div>2</div> <div>3</div> <div>4</div> </section> </body> </html>
- nth-child：先对元素进行排列，选出第一个，但是元素的类型不对
- nth-of-type：先找到所有的div，再选出第一个div元素
4、伪元素选择器
可以利用css创建新标签元素，而不需要html标签，从而简化html的结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ 200px; height: 300px; background-color: yellowgreen; } div::before{ content: 'before'; } div::after{ content: 'after'; } </style> </head> <body> <div>div</div> </body> </html>
- before和after属于行内元素
- 新创建的这个元素在文档树中是找不到的，称为伪元素
- before和after必须有content属性
- 权重为1
- 应用：可以做字体图标，不用再在父盒子里面嵌套子盒子