CSS3选择器

最新推荐文章于 2022-11-19 14:51:28 发布

csy101

最新推荐文章于 2022-11-19 14:51:28 发布

阅读量124

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/csy101/article/details/105024833

版权

小知识点：
渐进增强
顾名思义是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级
一开始就构建完整的功能，在针对低版本的浏览器进行兼容
举一个实例

如果对输入框实现圆角，就是对高版本的浏览器的优化，这就是渐进增强，可以用border-radius。
如果低版本浏览器也想有圆角，可以用图片来遮盖棱角实现圆角，这就是优雅降级

选择器：
属性选择器：
1.E[attr]：只使用属性名，但没有确定任何属性值

li[class]  /*就会选中li中使用class选择器的元素*/

2.E[attr=“value”]：(完全匹配) 指定属性名，并指定了该属性的属性值

li[class="list"]  /*就会选中li中使用class名字为list的元素*/

3、E[attr~=“value”]：指定属性名，并且具有属性值。此属性值包含了一个value词，并且名字中包含value不会截取，只能是完整的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li[class~="list2"]{background-color: red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="list2"></li>
			<li class="list1 list2 list3"></li>
			<li class="list2list"></li>
			<li class="list1 list2list"></li>
		</ul>
	</body>
</html>

效果图如下：
第三个第四个list2名字是在组合名中，不会截取，所以不会匹配。
在这里插入图片描述

4、E[attr^=“value”]：(起始匹配) 指定了属性名，并且有属性值，属性值是以value开头的且起始是在第一个位置，而且能自动截取组合名的开始有value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li[class^="list2"]{background-color: red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="list2"></li>
			<li class="list1 list2 list3"></li>
			<li class="list2list"></li>
			<li class="list1 list2list"></li>
		</ul>
	</body>
</html>

效果图如下：第二个li的类名list2不是在第一个位置，所以不会匹配。第三个li类名中有list2且类名在第一个位置会自动截取类名中的list2进行匹配。第四个li的类名list2不是在第一个位置，所以不会匹配。
在这里插入图片描述
5、E[attr$=“value”]：（结束匹配）指定了属性名，并且有属性值，属性值在最后一个位置而且属性值是以value结束的，以组合名结尾，但最后是value的也可以。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li[class$="list2"]{background-color: red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="list2"></li>
			<li class="list1  list2 list3 "></li>
			<li class="listlist2"></li>
			<li class="list1 list2list"></li>
		</ul>
	</body>
</html>

效果图如下：
第二个不是在最后一个位置，不能匹配。第三个是组合名但list2是在结束位置，可以匹配。第四个属性值不设以list2结尾的，不能截取。
在这里插入图片描述
6、E[attr*=“value”]：指定了属性名，并且有属性值，(部分匹配就可以)
属性值仅是value(无论vaule在名字哪个地方,可以截取)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li[class*="list2"]{background-color: red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="list2"></li>
			<li class="list1  list2 list3 "></li>
			<li class="listlist2"></li>
			<li class="list1 list2list"></li>
		</ul>
	</body>
</html>

无论在什么位置，只要包含属性值就可以，组合名也可以截取。
在这里插入图片描述
7、E[attr|=“value”]：指定了属性名，并且属性值仅是value(不能截取)或者
以“value-”开头(在第一个位置)的值（比如说left-con）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li[class|="list2"]{background-color: red;}
		</style>
	</head>
	<body>
		<ul>
			<li class="list2"></li>
			<li class="list1 list2 list3 "></li>
			<li class="listlist2"></li>
			<li class="list2-list3"></li>
		</ul>
	</body>
</html>

第二个类名中含有其他的名字，不能匹配。第三个组合名不能部分截取，不能匹配。
在这里插入图片描述
结构选择器

X:first-child 选中第一个元素

X:last-child选中最后一个X元素

X:nth-child(n)选中所有元素 n从0开始，0没有就没选中，索引值从1开始。2n偶数列，2n+1奇数列。或直接写:nth-child(odd)奇数列，:nth-child(even)偶数列

X:only-child 选中唯一一个孩子的元素，不能有其他的标签，这个伪类一般用的比较少，比如div下的有且仅有一个的p，没有其他的标签，如果div内有多个p，将不匹配，如果有除了p以外的其他标签，也不匹配。

X:nth-last-child(n)从最后一个开始算索引。倒数第n个

X:first-of-type匹配同级兄弟元素中的第一个X元素

X:last-of-type匹配同级兄弟元素中的最后一个X元素

X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X 可以写n所有都被选中, 2n偶数被选中，2n+1奇数被选中
X:only-of-type匹配属于同类型中唯一兄弟元素的X，可以有其他的标签存在，但X只有一个

X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

关于:nth-of-type(n)和:nth-child(n)的区别
:nth-of-type(n)是从同类型的孩子中进行排序然后选择，:nth-child(n)是从孩子中选择不区分类型
来看一段代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div:nth-child(2){
				background: blue;
			}
			div:nth-of-type(2){
				background: yellow;
			}
			li:nth-child(3){
				background: red;
			}
			li:nth-of-type(4){
				background: gold;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<div>aaa</div>
			<li></li>
			<li></li>
			<div>bbb</div>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

效果图如下：对于child，ul中第一个孩子是li，第二个孩子是div，所以选中1号div就是要用div:nth-child(2)，如果改用type就要用div:nth-of-type(1)，才能选中1号div，因为他是div类型中的第一个。

在这里插入图片描述

li:nth-child(2){
				background: red;
			}

因为ul中第二个不是li ，是div，所以li:nth-child(2)就不会有作用。
在这里插入图片描述
UI 元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
结合label使用可以改变选中后的样式
E::selection 两个冒号匹配E元素中被用户选中处于高亮状态的部分只能改背景颜色，文本颜色
E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			/*选中可以输入的元素*/
			input:enabled{
				background: red;
			}
			input:disabled{
				background: yellow;
			}
			input:checked{
				width:20px;
				height:20px;
			}
			
			p::selection{
				background: yellow;
				color:red;
			}
		</style>
	</head>
	<body>
		
		<form action="">
			<input type="text" enabled /> 
			<input type="text"  disabled/>
		
			
			<input type="radio" name="man" id="ha"  checked=""/>
			<label for="ha">男</label>
			
			<input type="radio" name="man" id="aa" />
			<label for="aa">女</label>
		</form>
		
		<p>UI元素状态伪类</p>
	</body>
</html>

效果图如下：
前三个适用于表单。::selection表示用光标选中的元素改变样式
在这里插入图片描述

层级选择器
E F 后代选择器
E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素孩子的孩子不管用
E+F 相邻兄弟选择器后面的第一个兄弟选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器(后面的所有兄弟) 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

csy101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

小知识点：渐进增强顾名思义是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级一开始就构建完整的功能，在针对低版本的浏览器进行兼容举一个实例如果对输入框实现圆角，就是对高版本的浏览器的优化，这就是渐进增强，可以用border-radius。如果低版本浏览器也想有圆角，可以用图片来遮盖棱角实现圆角，这就是优雅降...
复制链接

扫一扫