CSS选择器---笔记

最新推荐文章于 2024-08-18 11:06:22 发布
最新推荐文章于 2024-08-18 11:06:22 发布
阅读量79 收藏
点赞数
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42847094/article/details/107985328
版权

文章目录

  • 属性选择器：

    • [属性名称]：单独选择某个属性
    • [属性名称 = 属性值 ] ： 选择这个属性具体的某个值的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*属性选择器*/
			[data-src]{
				width: 200px;
				height: 200px;
				background: salmon;
			}
			[data-src="aaa"]{
				border: 10px solid aquamarine;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div data-src="abc">
			
		</div>
		<div data-src="aaa">
			
		</div>
	</body>
</html>

在这里插入图片描述

  • 子元素选择器

    • 第几个元素语法：
      • 元素：nth-child(1)
    • 最后一个子元素语法：
      • 元素：last-child
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li:nth-child(1){
				background: pink;
			}
			li:nth-child(2){
				background: fuchsia;
			}
			/*最后一个*/
			li:last-child{
				background: #7FFFD4;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li>新闻内容1</li>
			<li>新闻内容2</li>
			<li>新闻内容3</li>
			<li>新闻内容4</li>
			<li>新闻内容5</li>
			<li>新闻内容6</li>
			<li>新闻内容7</li>
			<li>新闻内容8</li>
			<li>新闻内容9</li>
			<li>新闻内容10</li>
		</ul>
	</body>
</html>

在这里插入图片描述

  • 直接子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*.parent div{
				width: 100px;
				height: 100px;
				background: #FF0000;
			}*/
			
			/*直接子元素*/
			.parent>div{
				width: 100px;
				height: 100px;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				<div class="sunzi"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

  • 选择某个元素后面的元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*先中后面的第一个元素*/
			.d3+div{
				width: 300px;
				height: 300px;
				background: purple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div class="d3"></div>
		<div>HelloWorld</div>

	</body>
</html>

在这里插入图片描述

  • 选择元素后面的多个元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*后面的多个元素*/
			.d3~div{
				width: 300px;
				height: 300px;
				background: purple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div class="d3"></div>
		<div>HelloWorld</div>
	<div>HelloWorld</div>
	</body>
</html>

在这里插入图片描述

  • 创建伪元素：

    • ：before,在元素内部创建一个最前面的子元素
    • ：after, 在元素内部最后创建一个假的子元素

注意：创建伪元素的时候，content 属性必须写！伪元素默认是行内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 0px;
				height:0px;
				/*background: salmon;*/
				/*border: 20px solid aqua;*/
				/*四个方向，上下左右*/
				border-top: 200px solid #7FFFD4; /*transparent 透明*/
				border-bottom: 200px solid transparent;
				border-left: 200px solid transparent;
				border-right: 200px solid transparent;
			}
			
			.chat{
				width: 600px;
				line-height: 100px;
				padding: 30px; /*外边距*/
				font-size: 30px;
				background: lawngreen;
				margin: 0 auto;/*居中*/
				border-radius: 30px; /*圆角*/
				position: relative; /*相对定位*/
				
			}
			/*伪元素，默认是行元素*/
			/*content 一定要写 可以为空，不写会不生效*/
			.chat:before{
				/*content: "before肉案";*/
				content: "";
				display: inline-block; /*行块元素，才会显示*/
				width: 0px;
				height: 0px;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 40px solid transparent;
				border-right: 40px solid lawngreen;
				position: absolute; /*绝对定位*/
				left: -80px;
				top: 35px;
			}
			.chat:after{
				/*content: "after内容";*/
				content: "";
			}
		</style>
	</head>
	<body>
		<!--通过CSS 可以创建假的元素-->
		<div id="d1"></div>
		
		<!--聊天框-->
		<div class="chat">
			你好啊！
		</div>
	</body>
</html>

效果：
在这里插入图片描述

CodeCode!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS笔记-选择器
07-08
本人清风，这次给大家分享本人学习的心得和笔记，记录点点滴滴，用的md格式，这是第一个，CSS选择器
css选择器303-311-Artificial-Intelligence-笔记
08-01
css选择器303_311-Artificial-Intelligence-笔记
CSS笔记----2
weixin_70903041的博客
07-20 794
1. 父子选择器: 通过父亲选中儿子.语法: 父亲>儿子 {}2. 后代选择器: 通过祖先选中后代语法: 祖先 后代{}3. 兄+弟选择器: 通过兄长选中紧邻的弟弟语法: 兄+弟{}4. 兄~弟选择器: 通过兄长选中符合条件的所有弟弟语法: 兄~弟{}
CSS基础笔记-02动画
渔道的博客
01-05 1258
学习css动画的基本用法
CSS学习笔记｜MDN-CSS选择器
xChive的博客
01-19 871
记录在MDN学习CSS中的一些个人笔记。 选择器种类 通配选择器 或叫全局选择器。选中所有元素。 * {} 标签、类、ID选择器 标签选择器。选择所有的 h1 元素 h1 { } 类选择器。选择类名有 box 的元素 .box { } ID选择器。选择 ID 为 aid 的元素 #aid { } 标签+类/ID，选择含有指定类/ID的某标签元素。 选择类名为 aclass 的 h1 元素。 选择 ID 名为 aid 的 h1 元素。 h1.aclass { } h1#aid { } 标签属性选
CSS-基础-MDN文档学习笔记
qq_57508808的博客
02-16 1354
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容CSS 中的书写模式是指文本的排列方向是横向还是纵向的可以使用进行属性间的切换：块流向从上至下，对应的文本方向是横向的：块流向从右向左，对应的文本方向是纵向的：块流向从左向右，对应的文本方向是纵向的属性实际上设定的是页面上块级元素的显示方向，而这决定了文本的方向。
CSS3学习笔记-02-选择器
欢迎访问我的主页：https://www.bookbook.cc
06-02 8476
一、全局选择器 二、标签选择器 三、结构选择器 3.1 后代选择器(华夏子孙 向下无限选择) 3.2 > 儿子选择器 只往下选择一层 3.3 ~ 兄弟选择器 3.4 + 铁兄弟(紧挨着的) 四、[] 属性选择器 4.1 ^ 以什么开始 $以什么结束 4.3 ~ 属性里边有这个值 4.4 * 属性里边有这个字符串 4.5 | 以什么开始 可以跟-符号 也可以选中 五、伪类选择器 5.1 常见伪类列表 5.2 :target 选择器可用于选取当前活动的目标元素 5.3 :empty 隐藏空的元素 六、结构伪类选
CSS基础--选择器定位
qq_44489836的博客
03-03 1151
学习目标： 学习层叠、优先级，以及在CSS中继承是如何工作的 掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性。 进一步学习 CSS 选择器相关的知识 学习内容： 层叠与继承 在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。 这里也有继承的
CSS基础笔记-03选择器
渔道的博客
01-06 1260
学习本文掌握了10种selectors
CSS基础笔记-01CSS概述
渔道的博客
01-05 1189
CSS是什么？有什么作用？怎么编写CSS？怎样添加CSS？本文对CSS的四个方面作了学习并形成学习笔记。
uni-app中的css3选择器使用
2401_84092483的博客
04-20 927
点击这里即可免费获取，包括答案解析。点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-tpLeXNIy-1713563313436)]
css选择器---组合选择器
热门推荐
weixin_45087771的博客
05-20 1万+
2、组合选择器 （1）包含选择器 格式：包含选择符名 选择符{样式} 例：<html> <head> <meta charset="utf-8"> <title>CSS基础</title> <style type="text/css"> #header p { font-size:14px;} #main p {font-si...
jquery CSS选择器笔记
10-29
本篇笔记中，作者整理了44个CSS选择器，涵盖了CSS 2和CSS 3的所有规定，是学习和工作中的宝贵资料。 首先，通用元素选择器“*”可以匹配页面上的任意元素，它通常用于重置默认的CSS样式。标签选择器使用元素的标签...
CSS笔记-011
08-03
【CSS笔记-011】 CSS，全称Cascading Style Sheet，层叠样式表，是一种用于控制网页外观样式的技术。CSS的主要目的是实现内容与样式的分离，这有利于团队协作，便于代码复用，简化网站的后期维护工作，并且允许对...
CSS的重绘和重排是什么？
沐爸的博客
08-12 1067
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 165
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 955
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
响应式Web设计：纯HTML和CSS的实现技巧
最新发布
vvvae1234的博客
08-18 501
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 658
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS选择器与伪类详解
"这是一份关于CSS的笔记文档，包含了对CSS选择器的详细解释和一些常用的伪类和伪元素的应用。" 在CSS中，选择器是用于定位网页中特定元素的关键工具，使得我们可以精确地控制样式。以下是笔记中提到的一些重要选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值