选择器

最新推荐文章于 2023-06-22 15:09:42 发布

你真好看l

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量77

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103228430

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.基本选择器及其扩展：
基本选择器：
id选择器 #
class选择器 .
元素选择器元素名
后代选择器空格 //下面所有子元素
分组选择器元素名1,元素名2
通配选择器 *
子元素选择器（直接后代选择器） > //第一代子元素
相邻兄弟选择器 + //紧挨着的兄弟元素
~ //后面的所有兄弟元素（css3）
2.属性选择器
存在和值选择器
[attr] 包含attr属性的所有元素
[attr=val] 选择attr的值为val的所有元素
[attr~=val] 选择attr中有命名为val属性的所有元素
子串值选择器
[attr|=val] 选择attr的值以val（或val-）开头的所有元素
[attr^=val] 选择attr的值以val开头的所有元素(css3）
[attr$=val] 选择attr的值以val结尾的所有元素(css3）
[attr*=val] 选择attr的值包含val的所有元素(css3）
3.伪类选择器
链接伪类（只能在链接上用）
:link 选择所有未被访问的链接。
:visited 选择所有已被访问的链接。 (出于隐私，只有color background-color border-color可以应用到已访问链接)
:target 代表一个特殊的元素，他的id可以是url的片段标识符
动态伪类
:hover 选择位于其上的链接
:active 选择正在点击的链接。
(由于a标签的:link和:visited可以覆盖所有a标签的状态，所以当:link :visit :hover :active 都设置时，:link visit放在最前面)
表单相关伪类
:focus 匹配获焦的表单
:enabled 匹配可编辑的表单(css3）
:disable 匹配被禁用的表单(css3）
:checked 匹配被选中的表单(css3）
结构性伪类
idex值从1开始！！！
index可以为变量n(只能是n)
index可以为even odd
ele:nth-child(index) ele元素的父元素的第index个子元素，且第一个是ele元素（父元素的所有元素的第index个，是ele能匹配到。部署就不能匹配到）
ele:nth-of-type(index) ele元素的父元素的子元素类型为ele的第index个子元素（父元素的所有ele子元素的第index个）
nth-child(index)系列
:first-child
:last-child (css3）
:nth-last-child(n) (css3）
:only-child （css3）
nth-of-type(index) 系列
:first-of-type (css3）
:last-of-type (css3）
:nth-last-of-type(n) (css3）
:only-of-type (css3）
:not(selector) 选择非 selector 选择的元素的每个元素。(css3)
:empty (内容必须是空，有空格都不行) (css3)
4.伪元素选择器(css3)
::after 元素的内容之后
::before 元素的内容之前
::first-letter 首字母
::first-line 首行
::selection 选择被用户选取的元素部分

区分first-child ,fist-of-type

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span:first-child{
				color: #0000FF;
			}
			p:first-child{
				color: #FF0000;
			}
			
			span:first-of-type{
				color: blue
			}
			
		</style>
	</head>
	<body>
		<div id="test">
			<p>haha</p>
			<span>哈哈</span>
			<p>xixi</p>
			<span>呵呵</span>
		</div>
	</body>
</html>

在这里插入图片描述

target使用：实现选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	    <style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				height: 300px;
				width: 300px;
				background-color: #0000FF;
				display: none;
			}
			:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<a href="#div1">div1</a>
		<a href="#div2">div2</a>
		<a href="#div3">div3</a>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			div2
		</div>
		<div id="div3">
			div3
		</div>
	</body>
</html>

在这里插入图片描述

自定义单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			label{
				position: relative;
				float: left;
				width: 100px;
				height: 100px;
				border: 1px solid;
				overflow: hidden;
				border-radius: 50px;
			}
			input{
				position: absolute;
				left: -50%;
				top: -50%;
			}
			label>span{
				position: absolute;
				left:0;
				right:0;
				top: 0;
				bottom: 0;
			}
			input:checked + span{
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<label>
			<input type="radio" name="zdy" id="" value="" />
			<span></span>
		</label>
		<label>
			<input type="radio" name="zdy" id="" value="" />
			<span></span>
		</label>
		<label>
			<input type="radio" name="zdy" id="" value="" />
			<span></span>
		</label>
	</body>
</html>

在这里插入图片描述

你真好看l

关注

1
点赞
踩
1

收藏

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

1.基本选择器及其扩展：基本选择器：id选择器 #class选择器 .元素选择器元素名后代选择器空格 //下面所有子元素分组选择器元素名1,元素名2通配选择器 *子元素选择器（直接后代选择器） > //第一代子元素相邻兄弟选择器 + //紧挨着的兄弟元素~ //后面的所有兄弟元素（css3） 2.属性选择器存在和值选择器[attr] 包含at...
复制链接

扫一扫

专栏目录