css进阶01选择器

最新推荐文章于 2024-10-17 09:19:08 发布
最新推荐文章于 2024-10-17 09:19:08 发布
阅读量57 收藏
点赞数
分类专栏： css3进阶 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52336986/article/details/120495250
版权

增加的选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
		/* :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。 */
			p:first-of-type{
				color: red;
			}
			p:last-of-type{
				color: #0000FF;
			}
			p:nth-of-type(2){
				color: #000000;
			}
			p:nth-last-of-type(2){
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span></span>
			<p>1</p>
			<a></a>
			<p>2</p>
			<p>3</p>
			<div></div>
			<p>4</p>
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
			span:first-child {
				color: red;
			}

			p:last-child {
				color: #0000FF;
			}

			p:nth-child(2) {
				color: gold;
			}

			p:nth-last-child(4) {
				font-size: 45px;
			}
			div:nth-child(6){
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>span</span>
			<p>1</p>
			<a>a</a>
			<p>2</p>
			<p>3</p>
			<div>div1</div>
			<div>div2</div>
			<p>4</p>
		</div>
	</body>
</html>

在这里插入图片描述

::selection等

：：selection 选择用户鼠标选中部分
：not 选择非用户指定内容的选择器
：root 更节点选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			/* ::root 设置网页根元素*/
			:root {
				background-color: #FFE4C4;

			}

			/* :not()除了指定元素外的yuans */
			.box :not(p) {
				background-color: pink;
			}

			/* ::selection 改变双击后用户选中的元素的背景颜色 */
			div::selection {
				background-color: #FF0000;
			}

			span:first-child {
				color: red;
			}

			p:last-child {
				color: #0000FF;
			}

			p:nth-child(2) {
				color: gold;
			}

			p:nth-last-child(4) {
				font-size: 45px;
			}

			div:nth-child(6) {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>span</span>
			<p>1</p>
			<a>a</a>
			<p>2</p>
			<p>3</p>
			<div>div1</div>
			<div>div2</div>
			<p>4</p>
		</div>
	</body>
</html>

在这里插入图片描述

:enabled等

:enabled选择状态可用的元素(input, button)
:disabled选择状态不可用的元素(input, button)
:checked选择选中状态下的input标签
[attr = " value "] 属性选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			input[type='radio'] {
				width: 25px;
				height: 25px;
			}
			input[type='radio']:checked {
				width: 45px;
				height: 45px;
			}

			input[type="text"] {
				width: 250px;
			}

			input[type="text"]:enabled {
				border: 1px dashed green;
			}

			/* ::root 设置网页根元素*/
			:root {
				background-color: #FFE4C4;

			}

			/* :not()除了指定元素外的yuans */
			.box :not(p) {
				background-color: pink;
			}

			/* ::selection 改变双击后用户选中的元素的背景颜色 */
			div::selection {
				background-color: #FF0000;
			}

			span:first-child {
				color: red;
			}

			p:last-child {
				color: #0000FF;
			}

			p:nth-child(2) {
				color: gold;
			}

			p:nth-last-child(4) {
				font-size: 45px;
			}

			div:nth-child(6) {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="text">
			<div></div>
			<input type="radio">
			<input type="radio"> 
			<div></div>
			<input type="checkbox" name="" id="" value="" />
			<span>span</span>
			<p>1</p>
			<a>a</a>
			<p>2</p>
			<p>3</p>
			<div>div1</div>
			<div>div2</div>
			<p>4</p>
		</div>
	</body>
</html>

target选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			#news1:target {
				color: green;
			}

			#news2:target {
				color: red;
			}


			input[type='radio'] {
				width: 25px;
				height: 25px;
			}

			input[type='radio']:checked {
				width: 45px;
				height: 45px;
			}

			input[type="text"] {
				width: 250px;
			}

			input[type="text"]:enabled {
				border: 1px dashed green;
			}

			/* ::root 设置网页根元素*/
			:root {
				background-color: #FFE4C4;

			}

			/* :not()除了指定元素外的yuans */
			.box :not(p) {
				background-color: pink;
			}

			/* ::selection 改变双击后用户选中的元素的背景颜色 */
			div::selection {
				background-color: #FF0000;
			}

			span:first-child {
				color: red;
			}

			p:last-child {
				color: #0000FF;
			}

			p:nth-child(2) {
				color: gold;
			}

			p:nth-last-child(4) {
				font-size: 45px;
			}

			div:nth-child(6) {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="text">
			<div></div>
			<input type="radio">
			<input type="radio">
			<div></div>
			<input type="checkbox" name="" id="" value="" />
			<span>span</span>
			<p>1</p>
			<a>a</a>
			<p>2</p>
			<p>3</p>
			<div>div1</div>
			<div>div2</div>
			<p>4</p>
		</div>


		<div>
			<a href="#news1">点我让news1变绿</a>
			<a href="#news2">点我让news2变红</a>
			<div id="news1">
				news1
			</div>
			<div id="news2">
				news2
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

做李的英雄
关注
专栏目录
CSS进阶-01-选择器-后代
weixin_63562705的博客
12-08 406
一、选择器进阶 目标:能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素 学习路径: 1.复合选择器 2.并集选择器 3.交集选择器 4. hover伪类选择器 5. Emmet语法 1.1后代选择器:空格 ★作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素 ★选择器语法:选择器1 选择器2 { css } ★结果:在选择器1所找到标签的后代 (儿子、孙子、重孙子...)中,找到满足选择器2的标签,设置样式 ★注意点: 1.后代包括: 儿子、孙子、.
css选择器进阶
z000802的博客
04-01 370
1.复合选择器: 空格 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法：选择器1 选择器2{css} 结果： 在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，设置样式 注意点： 后代包括：儿子、孙子、重孙子...... 后代选择器中，选择器与选择器之前通过空格隔开 <style> /* 找到div的儿子p设置文字颜色是红色 */
CSS进阶-选择器进阶
voiley的博客
12-20 138
CSS进阶-选择器知识 运用vs code快速输入代码
CSS选择器进阶
XzXz0207的博客
11-21 150
CSS选择器用于选择你想要的元素的样式的模式。
css进阶知识点速览
woshicaiji12138的博客
11-05 573
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2 {css}结果：在选择器1所找到标签的后代中注意：后代包括：儿子、孙子等等。
CSS进阶--选择器进阶
bug 消灭师的博客
03-30 155
CSS进阶
CSS 进阶
A626796235的博客
01-07 438
CSS 进阶
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 694
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
CSS进阶-CSS的选择器详细介绍
weixin_52937170的博客
09-23 733
CSS的选择器介绍
前端开发学习——CSS进阶
2302_80311379的博客
08-04 1016
ul、li、dl、dt、dd、form、header、nav、footer等。1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等。属性值（颜色取值）：关键字、rgb表示法、rgba表示法、十六进制等。注意点：交集选择器中如果有标签选择器，一定要把标签选择器放在最前面。作用：根据HTML标签嵌套关系，选择父元素后代中满足条件的元素。作用：根据HTML标签嵌套关系，选择父元素子代中满足条件的元素。、b、u、i、s、strong、ins、em、del等。
CSS进阶指引
01-19
你不要觉得CSS没什么重要可言？最近几年他成为一个热门的话题，很多人都在讨论他。CSS并不是一个简单的事情，前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些，我们更关心的是网站的性能以及如何制作出更好...
CSS进阶书籍 网上基本没有书签，我的有
11-16
- **基础知识回顾**：书中首先对CSS的基本概念进行了回顾，包括选择器、属性与值等基础知识，为初学者打下坚实的基础。 - **布局原理**：详细讲解了不同布局方式（如Flexbox、Grid）的工作原理及其应用场景，帮助...
自如网租房价格反爬 CSS偏移
qq_44990881的博客
10-08 527
【代码】自如网租房价格反爬 CSS偏移。
开关打开输入框才能输入文字，否则为禁用状态
2301_81449444的博客
10-11 409
当点击开关，打开开关后，输入框禁用状态解除，才可以在输入框内输入。页面开关默认为关闭状态，输入框为禁用状态。
Tailwind css系列教程（一）
最新发布
huazi99的博客
10-17 328
Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。Tailwind CSS的最大特点是功能类优先，它封装了一系列CSS样式，以加速开发过程。
CesiumJS 案例 P1：创建 Viewer、通过 JS API 隐藏控件、通过 CSS 隐藏控件、隐藏元素
weixin_52173250的博客
10-14 1092
CesiumJS 案例 P1：创建 Viewer、通过 JS API 隐藏控件、通过 CSS 隐藏控件、隐藏元素
关于css文字下划线动画实现
梦雨的博客
10-10 633
【代码】关于css文字下划线动画实现。
css+js实现滚动渐变
m_review的博客
10-11 303
希望在滚动的过程中给这个div加一个rgba(247, 248, 252,1）背景色，要求在滚动1px的时候白色透明度为0,滚动到banner高度的时候透明度为1并且过程是丝滑的。为了实现这一效果，可以采用CSS的linear-gradient结合JavaScript来动态调整背景颜色的透明度。
CSS盒子模型
ning的博客
10-14 856
理解CSS盒子模型对于前端开发者来说至关重要。它不仅影响元素的布局，还影响元素的尺寸计算。通过使用box-sizing属性，我们可以在标准盒模型和怪异盒模型之间切换，以适应不同的布局需求。掌握这些概念将帮助你创建更加灵活和响应式的网页设计。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS 盒子模型 | 菜鸟教程css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性-CSDN博客。
CSS进阶：选择器、伪类与过渡效果解析
"这是一份关于CSS入门学习的笔记补充，主要涉及了CSS选择器的新增类型，包括属性选择器、结构伪类选择器、伪元素选择器，以及CSS盒子模型、图片模糊处理、计算盒子宽度和CSS过渡等概念。" 在CSS中，选择器是定位和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值