1、格式
标签名称{ 属性:值; }
能够通过标签名选中标签
二、id选择器
给标签添加id属性
/#来表示id选择器
注意: id是留给js使用的,前端中不能随意设置
三、类选择器
class是可以重复滴
. 来表示class选择器
类名专门给特定标签设置样式的
HTML标签中可以同时绑定多个类名
可以把公共的标签抽取
四、后代选择器
作用:找到所有特定的后代标签,设置属性
格式:
标签1 标签2{ //找到标签1,标签1中选中所有标签2 属性:值; }
后代可以无限向下延伸
五、子元素选择器
作用:找到指定标签中所有特定的直接子元素,然后设定属性
格式:
标签名称1>标签名称2{ 属性:值; }
注意:子元素只会查找儿子,不会查找其他嵌套的元素
六、交集选择器
作用:给所有选择器选中的标签,相交的那部分添加属性
格式:
选择器1选择器2 属性:值
3.注意:
选择器与选择器之间没有任何连接东西
选择器1与选择器2相交的地方
七、并集选择器
作用:选中的
格式:
选择器1,选择器2 属性:值
八、兄弟选择器
1、相邻兄弟选择器CSS2:作用:给只是指定选择器后面的那个紧跟被选中的那个设置属性(并列下方第一个)格式:
选择器1+选择器2 属性:值
2、通用兄弟选择器CSS3:作用:给所有选择器后面那个设置属性(并列下方所有)格式:
选择器1~选择器2 属性:值
九、序列选择器
序列选择器:选中第几个的问题:
同级别(同一级)不区分类型
p:first-child 选择父元素的第一个某元素 p:last-child p:nth-child(3)同级别第n个 p:nth-last-child(3)同级别倒数第几个 P:only-child :选中只有一个子元素的元素
同级别 同类型:
p:first-of-type 选择同类型的第一个某元素 p:last-of-type p:nth-of-type(3) 同级别同类型第n个 p:nth-last-of-type(3)同级别同类型倒数第二个 p:only-of-type选中只有一个同类型元素的
nth-child/nth-of-type()的公式应用
odd奇数
even偶数
可以写入an+b的公式
十、属性选择器
作用:找到拥有属性的标签
[attribute]根据属性标签找到对应属性设置
[attribute=value]找到有指定属性,并且设置属性取值等于value
作用:不需要写大量class属性,多用于input标签等属性多的标签
十一、其他属性选择器:
属性是以什么开头的[attribute^=value] CSS3 可以找到所有开头的[attribute|=value] CSS2 只能找到-相隔的
属性是以什么结尾的[attribute$=value] CSS3
属性值是否包含某个值[attribute*=value] CSS3 只要包含value就能找到[attribute~=value] CSS2 只能找到独立单词
十二、通配符选择器
作用:给所有标签设置属性
注意:它设置所有标签,标签多的时候性能会比较差,一般不会使用通配符