CSS选择器的使用

1.标签选择器
根据标签名选中指定的标签，使用HTML标签名作为选择器，为页面中的一类标签指定样式
语法格式：
标签名{
属性1：属性值1
}
案例：
p{
color:red
}
2.类选择器
可以选择一个或多个标签，为其添加样式
语法格式：
.类名{
属性1：属性值1
}
注意：
类选择器以英文的.开头
可以为多个标签指定相同的类名
类名尽量不要使用数字开头，不要使用中文，若类名过长并由多个单词组成，可以使用-提高可读性
案例：
.div1{
color:red
}
3.id选择器
通过HTML标签的id属性选中唯一一个标签
语法格式：
#id名{
属性1：属性值1
}
注意：
id选择器以英文的#开头
标签的id属性值不可重复
案例：
#div1{
color:red
}
4.通配符选择器
用于选中页面中所有的元素
语法格式：
*{
属性1：属性值1
}
案例：
*{
color:red
}

5.并集选择器
同时选中多个选择器对应的元素.当为不同的选择器选中相同的样式时
语法格式：
选择器1,选择器2，选择器3{
属性1：属性值1
}
案例：
h1,.div1,#div2{
color:red
}
6.交集选择器
选中满足多个选择器需求的元素
语法格式：
选择器1选择器2选择器3{
属性1：属性值1
}
注意
选选择器不能有任何的符合，必须紧密连接在一起
若交集选择器中有标签选择器，标签选择器必须在首位
案例：
div#div2.div1{
color:red
}
7.关系选择器
利用标签之间的关系选中指定的元素
子元素选择器语法格式：
父元素A>子元素B{
属性1：属性值1
}

	作用：选中指定父元素A中所有的子元素B
后代元素选择器语法格式：
祖先元素A 后代元素B{
	属性1：属性值1
}
	作用：选中指定祖先元素A中所有的后代元素B
相邻兄弟元素选择器语法格式：
兄弟A + 兄弟B{
	属性1：属性值1
}
	作用：选中兄弟A相邻的一个兄弟B
通用兄弟元素选择器语法格式：
兄弟A ~ 兄弟B{
	属性1：属性值1
}
	作用：选中兄弟A后面所有的兄弟B
注意
选选择器不能有任何的符合，必须紧密连接在一起
若交集选择器中有标签选择器，标签选择器必须在首位
案例1：
ui>li{
	color:red
}
案例2：
div span{
	color:red
}
案例3：
ul + span{
	color:red
}
案例4：
ul ~ span{
	color:red
}

8.属性选择器
为带有属性的元素指定样式
语法格式一：标签必须包含某属性
标签名[属性名]
语法格式二：标签的属性必须等于某值
标签名[属性名=属性值]
语法格式三：标签的属性以某个值开头
标签名[属性名^=属性值]
语法格式四：标签的属性以某个值结尾
标签名[属性名$=属性值]语法格式四：标签的属性必须包含某个值标签名[属性名\ast =属性值]案例1：input[value]color:red案例2：input[value="值"]color:red案例3：input[valu{e}^{=}"值"]color:red案例4：input[value$=“值”]{
color:red
}
案例5：
input[value*=“值”]{
color:red
}
9.链接伪类选择器
同一个标签，在不同的状态下，显示的样式不同的，这一类标签，称为伪类
例如：超链接（未点击过，点击过，鼠标悬停，鼠标正在点击）
:link 选择未被访问的链接
:visited 选择已被访问的链接
上述两个针对超链接使用
:hover 选择鼠标悬停时
:active 选择鼠标正在点击时（鼠标点击 没有松开鼠标）
原创地址：https://cyimt.net/Article/Details/2107