CSS否定伪类

最新推荐文章于 2022-10-31 21:55:48 发布
原创 最新推荐文章于 2022-10-31 21:55:48 发布 · 674 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

CSS否定伪类

css否定伪类

html代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<link rel="stylesheet" type="text/css" href="../css/stu3-5-3.css"/>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td><label>姓名：</label></td>
					<td><input type="text" placeholder="请输入姓名"></input></td>
				</tr>
				<tr>
					<td><label>登录名：</label></td>
					<td><input type="text" placeholder="请输入登录名"></input></td>
				</tr>
				<tr>
					<td><label>密码：</label></td>
					<td><input type="password" placeholder="请输入密码"></input></td>
				</tr>
				<tr>
					<td><label>性别：</label></td>
					<td>
						<select>
							<option value="">请选择</option>
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

css代码
/*否定伪类*/
input:not([type="password"]) {
	border-radius: 5px;
	font-size: 12px;
	color: red;
}

页面效果



CSS进阶知识（伪类选择器，伪类等）
m0_61213423的博客
11-21 353
1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示，(并集选择器)分组选择器是单独计算的。样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果， 是看选择器的权重，谁的权重高，就有效果。3、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变。定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定。兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高。通配符、子选择器、相邻选择器等。
提升你的CSS技能：深入理解伪类选择器和伪元素选择器
09-29
否定伪类选择器（:not(selector)）用于排除符合特定条件的元素。伪类选择器的应用非常广泛，比如设置鼠标悬停在元素上的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式等。需要注意的是，a...
CSS-否定伪类
主营前端方向，技术栈是vue
10-31 210
否定伪类(从已选中的元素中剔除某些元素)
CSS3否定伪类选择器
歪脖先生的博客
01-11 2079
否定伪类选择器 否定伪类选择器用来选择不满足某些条件的元素。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:not(selector) 选择未被选择器selector所选中，且类型为E的元素 3 如果想对某个结构元素使用样式，但是又想排除这个结构下的某些子结构时，否定伪类选择器就非常有用，它可以
图解CSS3----5-否定伪类选择器
weixin_33749131的博客
07-24 168
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>否定伪类选择器</title> <style type="text/css"> .container{ margin: 100px; ...
CSS3学习笔记 之 否定伪类选择器
@LeX
09-01 760
否定选择器:not()主要用来选中不匹配该选择器的元素，其语法如下： 选择器 功能描述 E:not(F) 匹配所有除元素F外的E元素 浏览器兼容性：所有版本的FF， Chrome，Safari，Opera，和IE9+都支持否定伪类选择器 下面通过一个例子来演示否定伪类选择器的使用：当鼠标悬浮在整个图片墙上时，所有图片通过自定义的过滤特性，变成
html否定伪类选择器,CSS 否定伪类是什么？
weixin_35297190的博客
06-04 567
CSS 否定伪类是:not(selector)，下面本篇文章给大家介绍一下否定伪类 :not(X)。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。:not(selector)是CSS中的一个否定伪类(选择器)，并且接受一个简单的选择器作为参数。本质上，可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器...
四种css 伪类选择器
09-25
:not伪类属于否定伪类选择器，它可以选择不符合特定选择器的元素。例如，:not(#container)会选择所有id不为container的div元素。这个选择器可以非常方便地对某些元素应用样式，而不影响特定的元素。不过，IE8浏览器...
浅谈CSS伪类与伪元素
09-25
- :not()：否定伪类选择器，用于匹配不符合给定选择器的元素。 - :empty：选择没有任何子元素（包括文本节点）的元素。 - :target：用于匹配文档中的目标元素，当URL片段标识符指向该元素时会被激活。 - :nth-child...
CSS3伪类选择器；例如：E:root、E:not等等
03-25
CSS3伪类选择器 E:root 根选择器，它的意思是匹配元素E所在文档的根元素，在HTML文档中，根元素始终是 E:not 否定选择器，它和JQuery中的:not选择器一模一样，可以选择除某个元素以外的元素， E:first-child 第...
否定伪类
jdbfvhxx的博客
07-28 184
否定伪类: 作用:可以从已经选中的元素中剔除某些元素 语法: :not(选择器) !DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>否定伪类</title> <style> /* * 为所有元素设置一个背景元素颜色为黄色,除了...
Css伪类选择器之结构伪类、否定伪类篇
路虽远，行则必至！
04-26 736
伪类选择器 二、结构伪类       结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和ID属性的定义，使得文档更加简洁。       结构伪类有很多种形式，这些形式的用法是固定的，但可以灵活使用...
h5----------否定伪类
学习是我快乐， 吗
07-04 269
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; /* * 为所有的p元素设置一个背景颜色为黄色，除了class值为he
否定伪类和伪元素
Lonelydesertea的博客
12-08 207
否定伪类(negation pseudo-class) ■:not()的格式是:not(x) □x是一个简单选择器 √元素选择器 , 通用选择器 , 属性选择器 , 类选择器 , id选择器 伪类(除否定伪类) 伪元素(pseudo-elements) ■常用的伪元素 □:first-line , ::first-line □:first-letter , ::first-letter □:before ::before □:after , ::afte..
html之否定伪类
qq_41555580的博客
05-12 231
p:not(.class1){ }
4.8 否定伪类选择器
u010502101的博客
07-01 980
否定伪类选择器从一组元素中将符合要求的元素剔除出去。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;style type=&quot;text/css&q
HTML与CSS基础之否定伪类(四)
xiayiye5的博客
03-13 429
否定伪类 p:not(#id) { background-color: #ADFF2F; }//not括号里面传递选择器即可 测试否定伪类选择器 测试否定伪类选择器 测试否定伪类选择器 这个一定不能被选中 测试否定伪类选择器 测试否定伪类选择器
css 伪类
最新发布
03-17
### CSS伪类的使用方法与示例 #### 1. 基本定义 CSS伪类是一种用于选择元素特定状态或情况的方式，它不需要在HTML中添加额外的类或ID即可实现动态样式控制[^4]。 #### 2. 语法结构 伪类的名称不区分大小写，但需要以冒号 `:` 开头，并且必须与CSS中的选择器结合使用。其基本语法格式如下： ```css selector:pseudo-class { property: value; } ``` #### 3. 示例代码 ##### (1) 动态伪类选择器 动态伪类选择器主要用于处理用户的交互行为，例如鼠标悬停、点击等操作。 ```css /* 当鼠标悬停在链接上时改变颜色 */ a:hover { color: blue; } /* 当链接被激活时改变背景色 */ a:active { background-color: yellow; } ``` ##### (2) UI元素状态伪类选择器 UI元素状态伪类常用于表单控件的状态变化。 ```css /* 输入框获取焦点时增加边框 */ input:focus { border: 2px solid green; } /* 复选框被选中时显示绿色勾号 */ input[type="checkbox"]:checked + label::before { content: "\2713"; color: green; } ``` ##### (3) 结构伪类选择器 结构伪类选择器可以根据文档树的位置来选择元素。 ```css /* 选择第一个子元素并设置字体加粗 */ ul li:first-child { font-weight: bold; } /* 选择最后一个子元素并更改文字颜色 */ ol li:last-child { color: red; } ``` ##### (4) 否定伪类选择器 否定伪类选择器可以排除某些条件下的匹配项。 ```css /* 排除所有输入类型为text的元素，其余都变为只读 */ input:not([type="text"]) { pointer-events: none; opacity: 0.5; } ``` #### 4. 实际应用场景 通过上述伪类的应用，开发者可以在不影响HTML语义化的情况下轻松实现复杂的交互效果和视觉设计[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值