CSS选择器
- 类选择器
// 所有class包含test的元素
.test
// 包含所有指定class的元素
.test1.test2
// 包含其中任意一个class的元素
.test1,.test2
- ID选择器
// 获取id为test的元素 整个文档中最多只能一个,因为js选择时,只会取第一个
#test
- 属性选择器
// 元素name属性中匹配test的元素
[name='test']
// 元素name属性中包含test【单词】的元素 例: name="test jjj" 。无法匹配: name="test1 jjj"
[name~='test']
// 元素name属性中包含test【字符】的元素 例: name="test jjj" 。匹配: name="test1 jjj"
[name*='test']
// 以jpg结尾的
[name$='jpg']
// 以jpg开头的
[name^='jpg']
// 不等于jpg的
[name!='jpg']
- 关系元素选择器
// 作为div元素的子元素的input
div > input
// 作为div元素后的同级元素的第一个input元素
div + input
// 作为div元素的所有同级元素(不包含自己)
div ~ input
// 作为div元素的所有后代Input元素
div input
//
- 伪元素选择器
重点: 伪类的顺序很重要: link(未访问)-visited(已访问)-focus(输入焦点)-hover(鼠标悬停)-active(点击)
// 鼠标停留在a标签上时
a:hover
// 作为第一个子元素的p元素
p:first-child
// 排除id为test的所有p元素
p:not("#test")