CSS3起步 02-------伪类/伪元素/target伪类/label标签

最新推荐文章于 2022-07-05 21:50:30 发布
最新推荐文章于 2022-07-05 21:50:30 发布
阅读量548 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1234561234561/article/details/89005976
版权

一，链接伪类：:link :visited :targetlv【LV】
注意点：必须按照顺序编写位置，否则失效

二，动态伪类：:hover :active【lvha】

三，表单伪类： :enable :disable :checked[被选中时渲染/自定义单选按钮] :focus[获取焦点时渲染]
注意点：enable/disable必须配合disable属性判定是否为可编辑输入框或则不可编辑输入框

四，结构性伪类
1，child系列
01，:nth-child(index)从上到下第几个子节点
02，:nth-last-child(index)从下到上第几个子节点
03，:first-child第一个子节点
04，:last-child最后一个子节点
05，:only-child只允许有一个【只允许有一个子节点】
注意点：假设div li:nth-child(1)，渲染顺序为浏览器先找到div所有子节点中的的第1个子节点，且此节点类型为li；所以如若div的第一个子节点
类型不是li，则上诉css声明失效。

2，type系列
01，:nth-of-type(index)从上到下子节点中的某类型标签的第几个
02，:nth-last-of-type(index)从下到上子节点中的某类型标签的第几个
03，:first-of-type子节点中的某类型标签的第一个
04，:last-of-type 子节点中的某类型标签的最后一个
05，:only-of-type子节点中的某类型标签只允许存在一个
注意点：

	<style>
		body .type:nth-of-type(1) {
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="type">111</div>
	<p class="type">222</p>
	<h4 class="type">333</h4>
</body>

它会全部渲染，而不是只渲染第一个<div>，所以type在乎的是标签的类型。

五，伪元素
01，before
02，after
用法：一般用于清除浮动

六，文本伪类
:first-letter—选择文本中的第一个字符
:first-line—选择文本中的第一行
:selection—改变鼠标选中区域样式包括文本

七，target伪类
定义：URL 带有后面跟有锚名称 #id，指向文档内某个具体的元素。【一般用于tab切换】
案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/experiment.css" />
		<title>target--选项卡</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.content {
				margin: 20px auto;
				width: 350px;
				border: 1px solid black;
				border-radius: 10px;
				overflow: hidden;
			}
			div {
				width: 350px;
				height: 300px;
				text-align: center;
				font: 50px "微软雅黑";
				line-height: 200px;
				display: none;
			}
			:target {
				display: block;
			}
			ul {
				width: 350px;
				display: block;
				border: 1px solid black;
				overflow: hidden;
				text-align: center;
			 }
			li {
				display: inline-block;
				list-style: none;
				text-align: center;
				width: 100px;
				height: 40px;
				clear: both;
				padding-top: 15px;
			}
			li:nth-child(2) {
				border: 1px solid black;
				border-bottom: none;
				border-top: none;
			}
			a {
				text-decoration: none;
				color: black;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<center class="content">
			<ul>
				<li> <a href="#HTML">HTML</a> </li>
				<li> <a href="#CSS">CSS</a> </li>
				<li> <a href="#JAVASCRIPT">JAVASCRIPT</a> </li>
			</ul>
			<div id="HTML">HTML</div>
			<div id="CSS">CSS</div>
			<div id="JAVASCRIPT">JAVASCRIPT</div>
		</center>
	</body>
</html>

在这里插入图片描述
八，label元素特性
label具有一个包装捆绑的属性，还有个for属性，在它里面的的子代是共生的，一起被选，一起不被选；如果需要绑定外部的元素，则可以用for属性绑定所需元素的name属性值
案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/experiment.css" />
		<title>label--自定义单选框</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.content {
				margin: 20px auto;
				width: 350px;
				border: 1px solid black;
				border-radius: 10px;
				overflow: hidden;
			}
			input {
				visibility: hidden;
			}
			span {
				width: 10px;
				height: 10px;
				border: 1px solid pink;
				border-radius: 100%;
				padding: 15px;
				padding-right: 18px;
				font-size: 30px;
				text-align: center;
				line-height: 10px;
				color: black;
				display: inline-block;
			}
			input:checked + span {
				background-color: pink;
				color: #FF0000;
			}
			
		</style>
	</head>
	<body>
		<center class="content">
			<label>
				<input type="radio" name="lala" />
				<span>&#10003</span>
			</label>
			<label>
				<input type="radio" name="lala" />
				<span>&#10003</span>
			</label for="lala">
			<label>
				<input type="radio" name="lala" />
				<span>&#10003</span>
			</label>
		</center>
	</body>
</html>
燃情雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对CSS3伪类选择器 target的应用
qq_44820039的博客
04-18 547
最近学习了CSS3认识到了很多新的选择器，我发现一个好玩的的伪元素选择器—— :target 。 首先介绍target，然后在写两个小案例。 定义和用法： #锚点的名称是在一个文件中连接到某个元素的URL。元素被链接到目标元素。 :target选择器可用于当前活动的target元素的样式 语法： :target{ css语法 } 案例： 一、点击图片切换 在学习 :target 之前这个是...
纯CSS实现导航栏Tab切换效果
12-09
`:target`是CSS3引入的一个新特性，它用于选择当前页面URL中#标识符所指向的元素。当URL末尾包含一个锚点（如#content1），`:target`伪类就能选中具有相应id属性的元素。例如，HTML代码如下： ```html <li><a ...
伪元素:target
qq_41662119的博客
08-03 450
:target 伪类选择器 :target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。 解释很难理解，看看实际的使用情况，假设我们的 HTML 代码如下：   ...
伪元素：target的妙用
qq_43711470的博客
03-15 307
使用：hover时，一般情况下，都是点击较大（父元素）元素，来控制子元素的变化，合理使用：target可以实现子元素控制外围元素的变化（不使用JS）。<代码详见附件> ...
伪类的用法以及css一些常用的标签
08-14 220
伪类的用法： 标签： :link 表示该超链接文字尚未被点选 :visited 表示该超链接文字已被点选过 :active 表示该超链接文字正被点选,但未被放开 :hover 表示当鼠标停留在文字上 css的一些常用属性标签： background:背景颜色 padding(内边框)：padding-top(上边距) ...
css3之:target伪类
Focus-Fe
07-29 187
CSS3 target伪类         ------- 用来匹配URI某一个标志符的目标元素。一般url中包含"#"字符，后面带有一个标志符号，如："#top"   1、浏览器支持情况：            除了IE6-8，其他浏览器都支持。          http://caniuse.com/#search=%3Atarget    2、使用方式：     ...
前端-图片验证码登录页面
07-17
使用CSS调整元素的布局、颜色、字体等属性，提升用户体验。这包括输入框的边框、内阴影，按钮的背景色，验证码图片的尺寸等。 ```css form { display: flex; flex-direction: column; align-items: center; }...
javascript-html5-tabs
06-06
例如，我们可以使用 `display: none` 和 `display: block` 控制内容的可见性，以及使用伪类 `:active` 或 `:focus` 来突出当前选中的 Tab。 示例 CSS 代码： ```css .tab { /* Tab styles */ } .tab-content { ...
纯CSS3实现TAB选项卡切换特效代码
03-20
首先，选项卡切换的基本原理是利用CSS3的伪类选择器，如`:hover`, `:active`, 和 `:target`，以及`transition`和`animation`属性来实现动态效果。在我们的例子中，我们可能有若干个`<div>`或`<li>`元素代表选项卡，...
超酷HTML5和CSS3实现登录及注册功能表单.pdf
11-17
例如，`data-icon`属性在CSS中被引用，通过背景图像或者内容伪元素来显示图标。 总的来说，这个超酷的HTML5和CSS3登录注册表单设计展示了现代Web开发中的创新技术应用。尽管这种方法在某些不支持CSS3的旧浏览器中...
选项卡伪元素修饰符
weixin_50866404的博客
02-09 295
效果： css代码: .tab::after{ content: ''; width: auto; min-width: 38px; height: 3px; background: #0070f3; border-radius: 1px; display: block; position: absolute; bottom: 0px; }
CSS里的:target伪选择器
默默努力的猪
04-14 702
:target是CSS里一个非常有趣的伪选择器。它在CSS里发生效力的过程是这样的：当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。让我们看一看这个:target伪选择器是如何起作用的： 观看演示 HTML代码 下面的两个HTML元素上我们都指定了ID： h2 id="section1">Sect
:target 伪类使用技巧
tanj's note
11-07 3355
什么是CSS伪类？通常选择器不能表现HTML元素或属性的状态，我们可以在CSS选择器上添加伪类表示元素的状态、特征。伪类名写在选择器的:冒号后面，必要时可以添加(),例如：#comments:not(:target)。:target伪类用来指定那些包含片段标识符的 URL 的目标元素样式。
CSS3target伪类元素选择实现类似灯箱效果
CodingNoob
03-29 674
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } body {
CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素
dglf54292的博客
08-29 397
CSS伪元素: 伪元素如果没有设置“content”属性，伪元素是无用的。 使用伪元素插入的内容在页面的源码里是不可见的，只能在css里可见 插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。 还要注意的是典型的 CSS 继承规则适用于插入的元素。...
纯CSS3运用target伪类元素制作手风琴效果
CodingNoob
03-29 761
什么是target伪类元素？查了一下W3C原理就是点击相应的A标签触发相应的锚点，从而实现使用target伪类元素选择相应的内容进行实现，实现代码如下。<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * {
机器学习中的几个概念区分
王俊的博客
02-13 696
监督学习 监督学习(supervised learning)：是机器学习中的一种方法，可以由训练数据中学习到或通过建立一个模式（函数 / learning model），并依此模式推测新的实例。训练数据是由输入数据（通常是向量）和预期输出所组成。函数的输出可以是一个连续的值（称为回归分析），或是预测一个分类标签（称作分类）。[1] 通俗的说就是：监督学习算法训练含有很多特征的带标签（label ...
深度学习与神经网络（二）：感知机与多输出感知机 & 链式法则
hxxjxw的博客
05-10 1170
一个完整的多层的神经网络的梯度的推导过程 感知机
《HTML+CSS+JavaScript》之第20章 超链接样式
yxqq378287007的博客
07-05 301
css超链接样式
css伪类focus-within
最新发布
07-28
:focus-within是一个CSS伪类，用于选择器匹配其内部有焦点的元素的父元素。当父元素的子元素获得焦点时，可以使用:focus-within来样式化父元素本身。\[2\]在引用\[1\]中的示例中，当.field类的div的后代元素input被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值