>
CSS选择器
2022年3月24日 17:38
前端
  • 728
  • 527
  • 64
  • 51

           

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.属性选择器
	为带有属性的元素指定样式
	语法格式一:标签必须包含某属性
	标签名[属性名]
	语法格式二:标签的属性必须等于某值
	标签名[属性名=属性值]
	语法格式三:标签的属性以某个值开头
	标签名[属性名^=属性值]
	语法格式四:标签的属性以某个值结尾
	标签名[属性名$=属性值]
	语法格式四:标签的属性必须包含某个值
	标签名[属性名*=属性值]
	案例1:
	input[value]{
		color:red
	}
	案例2:
	input[value="值"]{
		color:red
	}
	案例3:
	input[value^="值"]{
		color:red
	}
	案例4:
	input[value$="值"]{
		color:red
	}
	案例5:
	input[value*="值"]{
		color:red
	}
9.链接伪类选择器
	同一个标签,在不同的状态下,显示的样式不同的,这一类标签,称为伪类
	例如:超链接(未点击过,点击过,鼠标悬停,鼠标正在点击)
	:link 选择未被访问的链接
	:visited 选择已被访问的链接
		上述两个针对超链接使用
	:hover 选择鼠标悬停时
	:active 选择鼠标正在点击时(鼠标点击 没有松开鼠标)

更多的学习内容:CSS 选择器参考手册 (w3school.com.cn)


全部留言 (0)
返回
顶部