逆战班-CSS3新增选择器

最新推荐文章于 2020-09-03 20:33:26 发布
最新推荐文章于 2020-09-03 20:33:26 发布
阅读量142 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43662452/article/details/104734722
版权

CSS新增选择器主要分为属性选择器、关系选择器、结构伪类选择器、UI伪类选择器

  • 属性选择器
    属性选择器可以根据网页标记的属性及属性值来选择标记。属性选择器一般是一个记后紧跟中括号[]，中括号内部是属性或者属性表达式。
    例如：E[class=main]{font-size:12px}

常见的三种属性选择器：

  • E[att^=value]

    例： div[id^=new]
    例子说明：匹配一个div，它定义了id属性，id的值为new开头的任意字符串

  • E[att=value]

    例： div[id$=new]
    例子说明：匹配一个div，它定义了id属性，id的值为new结尾的任意字符串

  • E[att*=value]

    例： div[id*=new]
    例子说明：匹配一个div，它定义了id属性，id的值任意位置包含了new的任意字符串

- 关系选择器
关系选择器分子选择器、相邻兄弟选择器、通用选择器
放入代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				height: 100px;
				width: 200px;
				border: 1px solid#000;
			}
			h2>span{
				color: green;
			}
			h2+p{
				color: red;
			}
			h2~p{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="new">
			<h2>
				<span>遇见彩虹</span>
				<span>吃定彩虹</span>
			</h2>
			<p>
				<span>首页</span>
				<span>产品展示</span>
				<span>联系我们</span>
			</p>
			<p>一切皆有可能！</p>
		</div>
		<div></div>
	</body>
</html>

  • 子选择器

    例：h2>span
    说明：选择h2下的span标签

h2>span{
				color: green;
			}

在这里插入图片描述

  • 相邻兄弟选择器

    例：h2+p
    说明：选择h2后的第一个兄弟标签p标签

h2+p{
				color: red;
			}

在这里插入图片描述

  • 通用选择器

    例：h2~p
    说明：选择h2的所有p兄弟标签

h2~p{
				color: yellow;
			}

在这里插入图片描述
结构伪类选择器
放入代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				height: 100px;
				width: 200px;
				border: 1px solid#000;
			}
			
		</style>
	</head>
	<body>
		<div id="new">
			<h2>
				<span>遇见彩虹</span>
				<span>吃定彩虹</span>
			</h2>
			<p class="p1">
				<span>首页</span>
				<i>产品展示</i>
				<span>联系我们</span>
				<span>关于我们</span>
			</p>
			<p class="p2">一切皆有可能！</p>
		</div>
		<div></div>
		<div class="b3">
			<h2>广告</h2>
		</div>
	</body>
</html>

  • :root

    选择匹配文档的根元素

:root{
				color: #f00;
			}

在这里插入图片描述

  • E:nth-child(n)

    选择所有在其父元素中的第n个位置的匹配E的子元素

div h2 span:nth-child(2){
				color: green;
			}

在这里插入图片描述

  • E:nth-last-child(n）

    选择所有在其父元素中倒数第n个位置的匹配E的子元素

div p i:nth-last-child(2){
				color: green;
			}

在这里插入图片描述

  • E:nth-of-type(n)

    选择所有在其父元素中同类型第n个位置的匹配E的子元素

div .p1 span:nth-of-type(2){
				color: green;
			}

在这里插入图片描述

  • E:nth-last-of-type(n)

    选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素

div .p1 span:nth-last-of-type(1){
				color: green;
			}

在这里插入图片描述

  • E:last-child

    选择位于其父元素中最后一个位置，且匹配E的子元素

div .p1 span:last-child{
				color: green;
			}

在这里插入图片描述

  • E:first-child

    选择位于其父元素中第一个位置，且匹配E的子元素

div .p1 span:first-child{
				color: green;
			}

在这里插入图片描述

  • E:fiest-of-type

    选择在其父元素中匹配E的第一个同类型子元素

div .p1 span:first-of-type{
				color: green;
			}

在这里插入图片描述

  • E:last-of-type

    选择在其父元素中匹配E的最后一个同类型子元素

div .p1 i:last-of-type{
				color: green;
			}

在这里插入图片描述

  • E:only-child

    选择在其父元素中只包含一个子元素，且该子元素匹配E

.b3 h2:only-child{
				color: #f00;
			}

在这里插入图片描述

  • E:only-of-type

    选择在其父元素中只包含一个同类型子元素，且该子元素匹配E

#new h2:only-of-type{
				color: #f00;
			}

在这里插入图片描述

  • E:empty

    选择匹配E的元素，且该元素不包含子元素

div:empty{
				border: 2px solid#f00;
			}

在这里插入图片描述
- UI伪类选择器
放入代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			
		</style>
	</head>

	<body>
		<input type="text" />
		<input type="text" disabled="disabled"/>
	</body>

</html>

  • E:enabled

    选择匹配E的所有可用UI元素

input[type="text"]:enabled {
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}

在这里插入图片描述

  • E:disabled

    选择匹配E的所有不可用UI元素

input[type="text"]:disabled {
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}

在这里插入图片描述

  • E:checked

    选择匹配E的所有可用UI元素

input[type="text"]:checked {
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}

在这里插入图片描述

  • E:read-write

    选择匹配可读及可写的元素

input[type="text"]:read-write {
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}

在这里插入图片描述

  • E:read-only

    选择匹配设置"readonly" (只读)属性的元素

input[type="text"]:read-only{
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}
			
		<input type="text" readonly="readonly"/>
		<input type="text" disabled="disabled"/>

在这里插入图片描述

  • E:.selection

    匹配元素中被用户选中或处于高亮状态的部分

input[type="text"]:selection{
				cursor: not-allowed;
				background: #eee;
				border-color: #ddd;
			}

在这里插入图片描述

  • E:out-of-range

    用于标签的值在指定区间之外时显示的样式

input:out-of-range{
				border: 1px solid#f00;
			}
		<input type="number" max="20" min="1"/>
		<input type="email" disabled="disabled"/>

在这里插入图片描述

  • E:in-range

    用于标签的值在指定区间之内时显示的样式

  • E:optional

    用于匹配可选的输入元素

input[type="text"]:optional{
				background-color: #f00;
			}
			
		<input type="text"/>
		<input type="email" disabled="disabled"/>

在这里插入图片描述

  • E:required

    用于匹配设置了"required" 属性的元素

input[type="text"]:required{
				cursor: not-allowed;
				background: #f00;
				border-color: #ddd;
			}
			
<input type="text" readonly="readonly" required="required"/>
<input type="text" disabled="disabled"/>

在这里插入图片描述

  • E:valid E:invalid

    用于匹配输入值为合法、非法的元素

- 动态伪类选择器

  • E:link

    链接伪类选择器
    选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

  • E:visited

    链接伪类选择器
    选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

  • E:active

    用户行为选择器
    选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

  • E:hover

    用户行为选择器
    选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

  • E:focus

    用户行为选择器
    选择匹配的E元素，而且匹配元素获取焦点

- 目标伪类选择器

  • E:target

    选择匹配E的所有元素，且匹配元素被相关URL指向 (如：锚点链接)

慕青夏
关注
逆战小程序篇
m0_46152845的博客
02-23 336
JSON 配置 在小程序中，JSON扮演的静态配置的角色。 小程序配置 app.json { "pages": ["pages/index/index", "pages/logs/logs"], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor":...
3. JavaScript
hanzong110的博客
09-29 962
1 JavaScript简介 简称JS，是一门脚本语言(解释执行非编译执行)，可以嵌套在静态页面中可以给静态页面添加一些动态效果。JS同样被用到了很多非浏览器环境中，例如node平台 不同浏览器厂商会在浏览器中内置不同的解析器来解析JS语法，例如谷歌浏览器使用的就是V8解析器 2 前段三层 结构层：HTML 样式层：CSS 行为层：JavaScript 3 JavaScript组成 ECMAScript：定义了语法规范，例如用var定义变量、function定义函数、for定义循环等，欧洲计算机协
CSS3新增选择器
Glim_mer的博客
02-22 208
逆流而上的经历是弥足珍贵的，很幸运，“逆战班”让我再一次挣脱束缚，打破禁锢，让自己在前端知识中乘风波浪！ CSS（层叠样式表）是前端技术的重要组成部分，是美化网页的常用手段，CSS为我们提供了强大的，多样的选择器，这些选择器非常有效的帮助设计人员实现了网页的精美制作。就像我们一样CSS也是在不断成长的，CSS3为设计人员提供了更多的选择器来优化程序。 CSS3中新增加的选择器包括属性选择器、结构伪...
CSS3新增的选择器有哪些?
FMQXtoCY的博客
02-23 1288
首先说说CSS3之前已有的选择器 CSS1 id选择器 、class选择器 、标签选择器 、群组选择器 、后代选择器 、伪类选择器 用法 描述 #id 选择 id=“xxxx” 的所有元素。（具有唯一性，一个页面只可使用一次） .class 选择 class=“xxxx” 的所有元素。 element 选择所有 element (标签） 元素。 element1,ele...
frontend -- CSS
Starlahi的博客
06-22 807
Angular常见问题 1，ng-if 跟 ng-show/hide 的区别有哪些？ 第一点区别是，ng-if在后面表达式为true的时候才创建这个dom节点，控制dom节点的增删除来实现显示隐藏，ng-show/ng-hide是初始时就创建了，用display:block和display:none来控制显示和不显示。 第二点区别是，ng-if会（隐式地）产生新作用域，ng-switch、ng-include等会动态创建一块界面的也是如此。 这样会导致，在ng-if中.........
jQuery
lz_hack的博客
03-08 180
jQuery ​ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和...
vue基础
kangqiang1998的博客
02-29 350
逆战班，或许有一些些小错误或者语病，例子估计不怎么精炼，但还可以直接复制粘贴执行代码查看效果。 Vue知识点总结 一、起步 1、 首先在HTML文件中引入vue.js。 2、新建一个div标签，并且为其设一个id值。<div id="app"> {{msg}}</div> 3、js代码里面创建实例。 // vue实例就是ViewModel：负责联系view和mode...
JavaScript
Petrel_的博客
09-03 856
JavaScript简介 概述：JavaScript在前端中简称【JS】，JavaScript是开发web脚本语言。但是它也被用到了很多非浏览器环境中【比如：node平台】，JavaScript在1995年由Netscape公司的Brendan Eich（创始人大概用了十天的时间将这门语言创建出来），JS可以嵌套在静态页面中可以给静态页面添加一些动态效果（脚本语言）； 不同浏览器厂商（在浏览器中都有内置解析器解析JS语法）； 各大浏览器厂商：chorme、IE、火狐、sofai、欧朋（都有属于自己的解析器）
逆战班：css3动画特效代码.html
03-09
通过animation实现了图像立体式排布，并让图像进行旋转，并且设置了景深，就会产生一种近大远小的感觉。
6.云计算逆战课堂-第06章-存储管理1.xmind
11-08
6.云计算逆战课堂-第06章-存储管理1.xmind
逆战班：CSS高度塌陷及解决办法.html
03-03
针对CSS中高度塌陷的问题进行描述，并给出了多种解决办法，跟给出了适合任何环境的万能清除法。可以建立统一适用的公共样式表，方便以后进行使用
逆战班月总结
01-08
5. 类选择器、属性选择器、伪类 6. 标签选择器、伪元素 7. `!important`（最高） 【CSS盒模型】 - **标准盒模型**：内容区（content）+ 边框（border）+ 内填充（padding），总宽度等于`content + border + ...
【CSS Tricks】像素风字体、图片
09-17
包含像素风中英文字体，鼠标手势普通状态、点击状态和禁用状态，仅用作技术分享学习研究，不可用于其他用途。
卡瓦牙椅E50life中文使用说明书第一部分.pdf
最新发布
09-17
卡瓦牙椅E50life中文使用说明书第一部分.pdf
ChromiumSetup.exe
09-17
ChromiumSetup.exe
Chain of thought 链式思考赋能Transformer模型解决串行计算难题
09-17
Chain of thought（CoT）使Transformer能够执行串行计算，扩展了它们解决问题的能力，超越了仅限并行的局限性。 增强Transformer的表达能力，特别是对于本质上是顺序问题。 原始问题: 大型语言模型（LLMs）在生成最终答案之前生成中间步骤（连续思考，CoT）时，展现出异常的推理能力。CoT有效性背后的机制尚不清楚，尤其是在zero shot和错误推理场景中。   本文的关键见解: • 在没有CoT的情况下，具有有限精度和多项式(n)嵌入大小的恒定深度Transformer只能解决AC0中的问题 • 通过T步骤的CoT，使用恒定位精度和O(log n)嵌入大小的恒定深度Transformer可以解决任何由大小为T的布尔电路可解决的问题 • CoT大幅提高了低深度Transformer在本质上是串行问题上的准确性   本文的解决方案: • 为通过如下特性解决问题的恒定深度Transformer定义了新的复杂性类CoT[T(n), d(n), s(n), e(n)]： T(n) CoT步骤 d(n) 嵌入大小 s(n) 精度位 e(n) 指数位
7a3b55460m422ea155d8f9aaa897e1dc(1).jsp
09-17
7a3b55460m422ea155d8f9aaa897e1dc(1).jsp
千锋逆战班：Java集合学习与区别详解
在千锋逆战班的学习过程中，今天的主题是集合（Collection）的基础概念与实践。集合是Java中用于存储对象的数据结构，它允许我们存储一组对象，支持各种操作，如添加、删除和遍历。这里主要讨论了两种类型的集合：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值