css

CSS选择器

1. 类选择器

// 所有class包含test的元素
.test
// 包含所有指定class的元素
.test1.test2
// 包含其中任意一个class的元素
.test1,.test2

2. ID选择器

// 获取id为test的元素  整个文档中最多只能一个,因为js选择时,只会取第一个
#test

3. 属性选择器

// 元素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']

4. 关系元素选择器

// 作为div元素的子元素的input
div > input
// 作为div元素后的同级元素的第一个input元素
div + input
// 作为div元素的所有同级元素(不包含自己)
div ~ input
// 作为div元素的所有后代Input元素
div input
// 

5. 伪元素选择器
   重点: 伪类的顺序很重要: link(未访问)-visited(已访问)-focus(输入焦点)-hover(鼠标悬停)-active(点击)
   // 鼠标停留在a标签上时
   a:hover
   // 作为第一个子元素的p元素
   p:first-child
   // 排除id为test的所有p元素
   p:not("#test")