一、基本选择器
| 选择器 |
含义 |
| * |
通用元素选择器，匹配所有元素 |
| p |
标签选择器，匹配所有使用p标签元素 |
| .info |
class选择器，匹配所有class属性中包含info的元素 |
| #xxxx |
id选择器，匹配所有id属性等于xxxx的元素 |
二、多元素的组合选择器
| 选择器 |
含义 |
| A,B |
多元素选择器，同时匹配所有A或B |
| A B |
后代元素选择器，匹配所有属于A元素后代的B元素，中间空格分离 |
| A>B |
子元素选择器，匹配所有A元素的子元素B |
| A+B |
毗邻元素选择器，匹配所有紧邻A元素后的同级元素B |
需要注意的是子元素属于后代，子元素下面的子元素也属于后代
三、CSS2.1属性选择器
| 选择器 |
含义 |
| E[att] |
匹配所有具有att属性的E元素，不考虑它的值 |
| E[att=val] |
匹配所有att属性等于val的E元素 |
| E[att~=val] |
匹配所有att属性具有多个空格分隔的值、其中一个值等于val的E元素 |
| E[att|=val] |
匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等 |
| [attr^=val] |
匹配所有att属性以val开头的元素 |
| [attr$=val] |
匹配所有att属性以val结尾的元素 |
四、伪类
a:link {...}
a:visited{...}
a:hover{...}
a:active{...}
li:first-child {...}
li:last-child{...}
body :not(p) {...}
p:not(.warning) {...}
五、伪元素
| 伪元素 |
含义 |
| ::after |
创建一个伪元素，作为已选中元素的最后一个子元素 |
| ::before |
创建一个伪元素，其将成为匹配选中的元素的第一个子元素 |
| ::first-letter |
选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格） |
| ::first-line |
将样式只应用于一个块状元素的首行 |
| ::selection |
应用于文档中被用户高亮的部分（比如鼠标选中的部分） |
| ::-webkit-input-placeholder |
设置 input 元素 placeholder |
网友评论