Day46 css选择器

最新推荐文章于 2024-06-12 12:52:53 发布
最新推荐文章于 2024-06-12 12:52:53 发布
阅读量549 收藏 4
点赞数 5
分类专栏： JavaEE java 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjp1240201821/article/details/138915268
版权
java 同时被 2 个专栏收录
34 篇文章 0 订阅
订阅专栏
JavaEE
33 篇文章 0 订阅
订阅专栏

Day46 css选择器

文章目录

概念

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 ，是为了解决内容与表现分离的问题 ， 多个样式定义可层叠为一，样式通常存储在样式表中

1、通配符选择器

选择所有元素。

*{
				color: red;
}

2、标签选择器

CSS标签选择器是最基本的选择器之一，用于选择特定类型的HTML元素并对其应用样式

p{
				color: red;
}

3、类选择器

通过类名选择元素。

注意：类选择器使用.开头

			.myclass{
				color: red;
			}

4、ID选择器

通过ID选择元素。

注意：
id选择器使用#开头
id唯一，不能重复

#myid{
				color: red;
			}

5、基本选择器的优先级别

ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			p{color: red;}
			
			.myclass{color: green;}
			
			#myid{color: blue;}
			
			
		</style>
	</head>
	<body>
		
		<p id="myid" class="myclass">用良心做教育</p>
		
	</body>
</html>

6、群组选择器

CSS群组选择器允许将相同的样式应用于多个不同的选择器，以减少重复的样式规则。通过逗号分隔不同的选择器，可以将它们组合在一起，使它们共享相同的样式规则。这样可以简化CSS代码并提高代码的可维护性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			h1,p,span{color: red;}
			
		</style>
	</head>
	<body>
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
	</body>
</html>

7、派生选择器/上下文关系选择器 – 后代选择器

选择特定元素的后代元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			ul a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

8、派生选择器/上下文关系选择器 – 子代选择器

子代选择器（child combinator）是CSS中的一种派生选择器，用于选择作为某个元素的直接子元素的元素。子代选择器使用大于号（>）来表示，语法格式为“父元素 > 子元素”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li>a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

9、派生选择器/上下文关系选择器 – 相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在另一个元素后的元素，二者有相同的父元素。这个选择器使用符号 “+”，表示紧接在前一个元素后的元素。

注意：效果作用在后者

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a+a{color: red;}
			
		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		
	</body>
</html>

10、属性选择器

属性选择器（Attribute Selectors）是 CSS 中一种用来选择具有特定属性的元素的方法。

单个属性：
input[placeholder]{color: red;}

		  单个属性+值：
		  		input[placeholder="请输入账号..."]{color: red;}
		  
		  多个属性：
		  		input[name][placeholder]{color: red;}
		  
		  多个属性+值：
		  		input[name="name"][type="text"]{color: red;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		
		<form action="服务器地址" method="get">
			
			账号：<input type="text" name="username" placeholder="请输入账号..." /><br />
			密码：<input type="password" name="password" placeholder="请输入密码..." /><br />
			确认密码：<input type="password" name="repassword" /><br />
			姓名：<input type="text" name="name" /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			城市：
				<select name="city">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
					<option value="shengzheng">深圳</option>
					<option value="chengdu" selected="selected">成都</option>
					<option value="chongqing">重庆</option>
					<option value="dongguan">东莞</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
			
		</form>
		
	</body>
</html>

11、锚伪类

锚伪类（anchor pseudo-classes）是CSS中用于定义超链接（元素）在不同状态下的样式的一种方式。

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

理解：监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00}      /* 已访问的链接 */
a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */
a:active {color: #0000FF}       /* 选定的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #FFCCFF}		/* 未访问的链接 */
			a:visited {color: #66FF66}	/* 已访问的链接 */
			a:hover {color: #33FFFF}	/* 鼠标移动到链接上 */
			a:active {color: #000033}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.jd.com">京东</a>
		
	</body>
</html>

12、样式的优先级别

分类：
内部样式表
外部样式表
行内样式表

优先级别：
行内样式 > 内部样式或外部样式（内外部样式表要看加载顺序）
理解：
为什么行内样式最优先呢？
因为行内样式最后加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

        
        <!--外部样式表-->
		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
		
		<!--内部样式表-->
		<style type="text/css">
			p{color: red;}
		</style>
		
	</head>
	<body>
		
		<!--行内样式-->
		<p style="color: blue;">用良心做教育</p>
		
	</body>
</html>
风起携月归
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day22css选择器和简单爬虫
chaichaishufen的博客
03-15 615
day22css选择器和简单爬虫 1css常用标签 1多行文本输入框：textarea <textarea rows="3" cols="" placeholder="输入提示信息" maxlength="">123213</textarea> 2下拉列表：select-option <select> <option value ="">沉脉</option> <option value ="">浮脉</option
Day 3:CSS选择器查找元素
LSMSMD0526的博客
07-21 3005
CSS选择器查找元素一、哪些情况不能用ID选择器二、CSS选择器语法三、ID选择器查找元素四、class选择器查找元素五、通配符定位六、查找子节点 一、哪些情况不能用ID选择器 元素的ID不唯一，或者ID是动态变化的 name以及linktext属性值不唯一 如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了 PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是
day 73 css样式 选择器
weixin_45939821的博客
04-07 822
1）在css目录下创建样式文件 XXX.css2) 在HTML页面中标签中使用标签引入css样式文件。
CSS--选择器--使用/教程
IT利刃出鞘的博客
11-06 1262
原文网址： 简介 说明 本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。 官网 CSS 选择器 - CSS（层叠样式表） | MDNCSS 参考 - CSS（层叠样式表） | MDN 优先级 简介 给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。 详解 CSS选择器的优先...
CSS五大选择器
认真做事，开心生活
02-21 8211
一.类选择器：用.+名称定义的css样式类型，叫类选择器在class中引用   如： .comment{     background-color: #0bbb15;     color: white;     margin: 20px;     padding: 20px; } &lt;div class=“comment"&gt;   二.id选择器：用#+名称定义的css样式...
[css选择器] 选择器特殊性
weixin_36210698的博客
03-11 1049
特殊性 可以使用多种不同的方法选择元素。实际上，可能同一个元素可以使用两个或多个规则来选择，每个规则都有其自己的选择器。下面考虑以下 3 对规则。假设每一对规则都匹配同样的元素： /* 第一对规则 */ h1 { color: red; } body h1 { color: green; } /* 第二对规则 */ h2.grape { color: purple; }...
Day2-CSS选择器
Chillax_LXL的博客
05-16 139
分享链接
Day2 css选择器和requests
m0_54255329的博客
05-25 957
Day2 css选择器和requests 一、css基本语法 <!-- css负责网页内容的样式和布局 css - 层叠样式表（简称：样式表） 1、css语法 语法： 选择器{属性名1：属性值1；属性名2：属性值2；...} 说明： 选择器 - 选中需要设置样式的标签 {} - 固定写法 属性名 - 决定需要设置哪些样式 属性值 - 如果是表示数值大小，数字值需要单位，一般是px 常用属性： color - 文字颜色（颜
CSS中的基本选择器
qq_45192812的博客
03-03 1837
CSS中的基本选择器 什么是选择器？选择器就是通过标签选择一类元素进行控制，常用于HTML等语言中。 css中的选择器种类有很多，下面介绍几种常见的基本选择器：标签选择器，类选择器和id选择器 一、标签选择器 标签选择器又叫元素选择器：文档的元素就是最基本的选择器。 例如： /*对h1和p标签进行选择*/ <style> h1{ background: wheat; border-radius: 21px; }
练习前端-CSS引入、基础选择器-day04
08-31
练习前端-CSS引入、基础选择器-day04
day03（CSS01-基础选择器+字体文本样式）.rar
12-01
day03（CSS01-基础选择器+字体文本样式）.rar
练习前端-CSS权重计算、复杂选择器、基础属性-day05
08-31
练习前端-CSS权重计算、复杂选择器、基础属性-day05
ylsislove#make-a-little-progress-every-day#前端-CSS选择器优先级1
07-25
声明在样式表或文档中越靠后出现，权重越大。如果样式表中有通过 @import 导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表的所有声明在后。
split-selector:将CSS选择器组拆分为各个选择器
05-18
将CSS选择器组拆分为各个选择器。 用法 splitSelector ( '.red, .blue' ) // -> [ '.red', '.blue' ] splitSelector ( 'a[title="Someday, Somewhere"], strong' ) //-> [ 'a[title="Someday, Somewhere"]', '...
CSS中，设置 0.5px 会生效吗
最新发布
Keep trying, keep going
06-12 349
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 279
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
CSS从入门到精通——背景样式
m0_73614626的博客
06-12 1262
当页面较长时，滚动页面，背景图像也会随之滚动。从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用。请在右侧的编辑框中修改。属性设置元素的背景属性，常见的网页背景图就是这样设置的。文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 943
常见 CSS 效果实现总结。
python css选择器
08-20
- *1* [python学习 day47之CSS选择器](https://blog.csdn.net/wuzeipero/article/details/108622643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值