1.元素选择器:
作用:通过元素选择器可以选择页面中的所有指定元素
语法: 标签名{}
2.id选择器:
-通过元素的id属性值选择唯一元素
-语法:
#id属性值{}
3. 类选择器:
- class属性和id属性类似,只不过class属性可以重复
-拥有相同class属性值的元素,我们说他们是一组元素
-一个元素可以有多个class属性值,多个值之间用空格隔开。 !!!!!
-通过元素的class属性值选中一组元素
-语法:
.class属性值{}
4.选择器分组:
-通过选择器分组可以同时选中多个选择器对应的元素。
-语法:选择器1,选择器2,选择器N{}
-效果:同时选中了选择器1,2,N他们所指向的元素,实现了代码的复用。
5.通配选择器:
-他可以用来选中页面中的所有元素。(模糊选择)
-语法: *{}
6.精准(复合)(交集)选择器: !!!!!!
-作用:
- 可以选中同时满足多个选择器的元素 (精准选择)
-语法:
选择器1选择器2选择器N{} 指定同时选择器1,2,N的元素
7.后代选择器:
-作用:
-可以选择某一元素的所有子孙元素。
-语法:
祖先元素 后代元素{} 注:祖先元素与后代元素之间有一个空格。
8.子元素选择器:
-作用:
-选中指定父元素的指定子元素。 注:明确子元素与子孙元素的区别
-语法:
父元素 > 子元素 注:可在一个表达式中连续使用多个 > 明确查找关系
9.属性选择器:
- 作用:可以根据元素中的属性或属性值来选取指定元素
- 语法:
[属性名] 选取含有指定属性的元素
如:
1.选中含有属性为title的p标签
p[title] {
background-color: yellow;
}
2.选中title属性值为xxx的p标签,找出含指定属性值的元素标签
p[title = 'xxx'] {
background-color: yellow;
}
3.选中title属性以xxx开头的p标签
p[title ^= 'xxx'] {
background-color: yellow;
}
4.选中title属性以xxx结尾的p标签
p[title $= 'xxx'] {
background-color: yellow;
}
5.选中title属性值包含xxx的p标签
p[title *= 'xxx'] { title中包含指定内容'xxx'
background-color: yellow;
}
10.兄弟选择器:
-选中某一个标签后的紧邻着的兄弟节点,若不紧邻则没用,选择不中。
-标签1 + 标签2{}
-选中某一个标签的后面的所有兄弟节点
-语法:前一个标签 ~ 后面的所有标签
11.否定伪类:
-作用:可以从已经选中的元素中剔除某些元素
-语法:
:not(选择器)
-例如:
p:not(.hello) 选中class属性不为hello的p标签