CSS---组选择器练习示例代码

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

组选择器

.box01 + tab 快捷键

<div class="box01">      </div>

将公共的样式提取出来放到一组里面，不一样的样式另外定义

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>组选择器</title>
	
	<style type="text/css">
		/* .box01{
			font-size: 20px;
			text-indent: 40px;
			color: #00FFFF;
			
		}
		.box02{
			font-size: 20px;
			text-indent: 40px;
			color: burlywood;
		}
		.box03{
			font-size: 20px;
			text-indent: 40px;
			color: cornflowerblue;
		} */
		/* 组选择器 */
		.box01,.box02,.box03{
			font-size: 20px;
			text-indent: 40px;
		}
		.box01{
			color: #00FFFF;	
		}
		.box02{
			color: burlywood;
		}
		.box03{
			color: cornflowerblue;
		}
		
		
	</style>
	
</head>
<body>
	<div class="box01">不错的体验</div>
	<div class="box02">很好的经历</div>
	<div class="box03">相当炫酷的解决办法</div>
</body>
</html>
Go· again
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS---id选择器练习示例代码
qq_43766304的博客
03-05 363
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
painless-css:无痛CSS
05-01
2. **选择器的使用**：CSS选择器是定位HTML元素的关键。包括类选择器、ID选择器、元素选择器、属性选择器、伪类和伪元素等，理解这些选择器的用法能精确控制元素的样式。 3. **布局与定位**：CSS布局是网页设计中的...
ChroPath插件，xpath 通过递进方式定位有层级关系的页面元素的2种写法。
07-07 2102
试验页面http://ui.imdsx.cn/uitester/ 目标：定位到页面元素 “单击” 。 第一种写法：//div[@class='driver'][3]/div[@class='inner'][3] （定位到单击按钮的 div标签） 第二种写法：//div[@class='driver'][3]//*[@id='onC'] （定位到单击按钮） xpath提供...
python爬虫--xpath解析语法
qq_42633222的博客
05-13 1333
什么是Xpath？ Xpath 是一门在XML或者html文档中导航查找信息的语法，对HTML有很好的支持 xpath 是一个w3c的标准；xpath 包含标准库； Xpath语法的详细用法？ 1.节点关系 （层次关系） 2.节点选择 2.1节点选择 表达式：nodename |/ |// |. |.. |@ nodename: 选取此节点的所有子节点 ...
div中class属性的理解
热门推荐
liulang68的博客
07-01 5万+
div 在网页设计中是表示块、区域的意思，比如你在制作一个卖衣服的网页时，把男装和女装各分一个区域这是就可以定义两个div，两个块，class则可以表示你可以给这个块加一些属性啊，比如长和宽，背景颜色什么的，你可以给这些属性取一个名字，class=shuxing就表示你给这个属性的集合取了个shuxing的名称 <div class=nanzhuang>、<div class=nvzhuang> 就可以表示你给男装区域和女装区域定义的属性名，这样你就可以设疑class改变他的属性了
Xpath重点
小通的博客
05-31 114
- a/text() #、获取a下的所有文本 - //a[text()='下一页'] #、选择文本为下一页三个字的a标签 - @符号 - 'a/@href' - '//ul[@id="detail-list"]' - // - 在xpath开始的时候显示html中任意位置开始选择 - 'li//a' 表示在li下的任意一个a标签 - 获取多个中的第二个 - //div/a[@id="page"]/a[2] - 获取多个中的最后一个 ...
CSS学习
weixin_43887322的博客
02-19 235
1.CSS初识 如何学习？ 1.CSS是什么？ 2.CSS如何用？（快速入门） 3.CSS选择器（重难点） 4.美化网页（文字，阴影，超链接，列表，渐变等） 5.盒子模型 6.浮动 7.定位 8.网页动画（特效） 1.1 什么是CSS CSS:表现（美化网页）字体、颜色、边距、高度、宽度、网页浮动等 1.2 CSS发展史 略 1.3 CSS快速入门 <head> <meta charset="UTF-8"> <title>Title</title&g
curso-html-css-feliz
02-19
在"curso-html-css-feliz"中，你将深入理解CSS选择器的工作原理，如何通过类和ID选择器精确控制特定元素的样式。课程会引导你探索盒模型，理解边距、填充、边框和内容之间的关系，从而实现布局的精确控制。除此之外...
css-atsiskaitymas
02-24
【标题】：“CSS-atsiskaitymas”是一个关于CSS（层叠样式表）学习资源的项目，可能包含一系列教程、示例代码或者练习材料，帮助用户深入理解和掌握CSS技术。 【描述】：“css-atsiskaitymas”这个词汇在立陶宛语中...
CSS-Site
03-20
在实践中，你可以通过“CSS-Site-main”提供的示例代码来动手练习，逐步掌握这些知识点。同时，不断关注最新的CSS规范和发展趋势，以保持技术的前沿性。记得理论知识与实际操作相结合，多做项目练习，才能更好地巩固...
Xpath定位小结
Van_CLB的博客
09-17 862
Xpath语法堂 1.Xpath语法教程 2.Xpath通过文字匹配 contains()函数匹配 xpath=//*[@id=“backFeeManage”]//a[@class=“btn btn-primary” and contains(text(), “查询”)] 3.Xpath通过多层级定位 （1）多层级 xpath=//[@id=“schoolListWrapper”]/div[@class=“allSchool”] （2）通过//符号匹配A层级下所有路径中B层级的元素,而不管他的位置 xpat
CSS 的 类class选择器 的正确写法
hanshou101的博客
12-01 1万+
1.正确写法： 前面是标签名的通配符，后面是 class的名称。（）*.a_class {color:red;}下面的简写，尽量少用.a_class {color:red;}2.举例举例：p.a_class {}解释为：“其 class 属性值为 a_class 的所有段落”。举例2：*.a_class {}解释为：“其 class 属性值为 a_class 的所有任意标签”。3.多层类叠加：同一
Xpath 的语法小结
`or 1 or 不正经の泡泡
07-19 554
Xpath 用于提取网页上的信息，方便高效快捷。（当然学会正则走天下） 本篇博客将总结xpath使用语法。 Xpath 浏览器工具(chrome) 1 使用插件工具xpath helper 2下载安装插件。 由于某些原因我们无法从谷歌浏览器中直接下载所以这里可以从我的云盘上下载 链接：https://pan.baidu.com/s/1xkj3OxnxrVI-lvuAyVbZnQ 提取码：bwfn 3安装插件； 0.1 先解压 0.2 将crx文件拖入谷歌浏览器拓展程序中 Xpath 特点 首先 xpat
div 中id和class使用讲解
zhangxiaowei
06-13 5万+
在div 标签中，我们比较常见的属性是id 和class,那么这两个属性有什么区别吗？今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。     首先看看这两个属性在html中是如何使用的。 解释上面的代码， id="loading"，意思是定义了一个id，它的值是“loading”； class="
python爬虫——提取抓取内容（6）使用XPath爬取好段子
weixin_44321116的博客
02-08 606
一.分析 1.url: http://www.haoduanzi.com/category/?1-1.html http://www.haoduanzi.com/category/?1-2.html 所以可以设置为url=‘http://www.haoduanzi.com/category/?1-{}.html’ 2.编码：utf-8 3.每个段子的标签：div_list = tree.xpat...
xpath获取标签的属性值_CSS & Xpath定位页面元素的规则
weixin_39946798的博客
11-20 994
在写xpath、css之前，也许您需要知道为了能成功写好路径，需要什么工具？那么，看这里~杜哈哈：如何使用Chrome、火狐浏览器+Try Xpath写xpath、css?​zhuanlan.zhihu.com爬虫，爬什么？通常是通过 CSS或者Xpath 路径来定位到页面中我要爬取的内容。路径怎么写？一、CSS语法规则1、基本语法语法：Tag[attribute=‘value’] 示例： ...
css第五课：群组选择器及后代选择器
YY的博客
08-26 2049
群组选择器、后代选择器
一个div有多个class，如何通过xpath获取？
weixin_34301132的博客
08-21 1751
想要获取所有class=film-col的div 元素 @SuppressWarnings("unchecked")List<HtmlDivision> divs= (List<HtmlDivision>)page.getByXPath("//div[contains(@class, 'film-col')]"); 转载于:https://www.cnblog...
CSS选择器的用法:组选择，次序选择，相邻节点选择
最新发布
键盘敲烂，工资过万，多多实践，丰富经验
03-30 1224
注意：通过组选择能够完成同时选择多个元素的工作，其选中元素不是按照组表达式的次序排序的，而是先选择出符合这些表达式的元素，然后按照它们在HTML文档中的出现的次序排列。指定选择的元素是父元素倒数第几个某类型的子节点，语法为 :nth-last-of-type()，括号中填写第几个子节点的数字。指定选择的元素是父元素第几个某类型的子节点，语法为 :nth-of-type()，括号中填写第几个子节点的数字。指定选择的元素是父元素的第几个子节点，语法为 :nth-child()，括号中填写第几个子节点的数字。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值