CSS选择器

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

CSS选择器

什么是选择器

选择器: 指的是选择施加样式目标的方式

元素选择器

用标签名作为选择器，选中相应的元素。

<style type="text/css">
			div{
				font-size: 20px;
				color: #0000FF;
			}
			p{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>元素选择器1</div>
		<div>元素选择器2</div>
		<p>元素选择器3</p>
	</body>

Id选择器

根据id来选择元素，样式定义形式

<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background-color: black;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>

类选择器 .

根据class来选择元素，样式定义形式

<style type="text/css">
			.new{
				width: 200px;
				height: 200px;
				background-color: #87CEEB;
			}
			.old{
				width: 200px;
				height: 200px;
				background-color: peru;
			}
		</style>
	</head>
	<body>
		<div class="old"></div>
		<div class="new"></div>
		<div class="old"></div>	
	</body>

属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 60px;
				border: 1px solid brown;
			}
			[title ^= 'div']{
				background-color: #87CEEB;
			}
			
			
			
		</style>
	</head>
	<body>
		<div title="div1">1</div>
		<div title="div2">2</div>
		<div>3</div>
		<div title="a div">4</div>
		<div title="div a">5</div>
		<div title="div">6</div>	
	</body>
</html>

关系选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid red;
				max-width: 300px;
				min-height: 30px;
				margin-left: 50px;
				background-color: #87CEEB;
			}
			#myself~div{
				background-color: #CD853F;
			}
		</style>
	</head>
	<body>
		<div>大哥</div>
		<div id="myself">
			我
			<div>
				大儿子
			<div>大孙子</div>
			<div>二孙子</div>
			</div>
			<div>二儿子</div>
			<div>三儿子</div>
			<div>四儿子</div>
		</div>
		<div>三弟</div>
		<div>四弟</div>
	</body>
</html>

并选择器

将相同样式放在一起，使用并选择器，类名用英文状态下的逗号进行分割

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1,#div3{
				width: 200px;
				height: 200px;
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
	</body>

通配符选择器

*{}
选中页面中所有标签

<style type="text/css">
			*{
				border: 1px solid red;
				max-width: 300px;
				min-height: 30px;
				margin-left: 50px;
				background-color: #87CEEB;
			}
		</style>
	</head>
	<body>
		<div>大哥</div>
		<div id="myself">
			我
			<div>
				大儿子
			<p>大孙子</p>
			<p>二孙子</p>
			</div>
			<div>二儿子</div>
			<div>三儿子</div>
			<div>四儿子</div>
		</div>
		<div>三弟</div>
		<div>四弟</div>
	</body>

伪类、伪元素选择器

伪类选择器
在这里插入图片描述

<!-- <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 未访问的链接 */
			a:link{
				color: #808080;
			}
			/* 已访问的链接 */
			a:visited{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<a href="#1" target="_self">伪类</a>
		<a href="#2" target="_self">伪类</a>
		<a href="#2" target="_self">伪类</a>
	</body>
</html> -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 鼠标悬停 */
			img:hover{
				width: 300px;
				height: 300px;
			}
			/* 输入框获得焦点改变背景颜色 */
			/* input:focus{
				background-color: #0000FF;
			} */
			
			/* 激活 */
			input:active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<img src="img/222.jpg" >
		<br>
		<label>数量</label>
		<input type="text" size="3" value="1" />
		<input type="button" value="购买" />
	</body>
</html>


/*选择子元素*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid red;
				max-width: 300px;
				min-height: 30px;
				margin-left: 50px;
				background-color: #87CEEB;
			}
			div:first-child{
				border: 2px solid black;
			}
			div:hover{
				min-height: 40px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>大哥</div>
		<div id="myself">
			我
			<div>
				大儿子
			<div>大孙子</div>
			<div>二孙子</div>
			</div>
			<div>二儿子</div>
			<div>三儿子</div>
			<div>四儿子</div>
		</div>
		<div>三弟</div>
		<div>四弟</div>
	</body>
</html>

伪元素选择器
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择文本的首字母 */
			h1:first-letter{
				font-size: 20px;
				color: red;
			}
			/* 选择文本首行 */
			p:first-line{
				color: #008000;
			}
			/* 在元素后面添加内容 */
			p:after{
				content: url(img/111.jpg);
			}
			/* 在元素前面添加内容 */
			/* p::before{
				content: url(img/result.jpg);
			} */
		</style>
	</head>
	<body>
		<h1>选择器总结</h1>
		<p>1 元素选择器</p>
		<p>2 id选择器</p>
		<p>3 类选择器</p>
		<p>4 属性选择器</p>
		<p>5 关系选择器<br>
		选择器	属性<br>
		E  F	选择E元素的后代<br>
		E > F	选择E元素的直接后代元素<br>
		E + F	选择E元素的第一个弟元素<br>
		E ~ F	选择E元素所有弟元素
		</p>
	</body>
</html>
ざ宸梓灏
关注
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
day2——Css层叠样式表
ice-bear
07-19 147
Css语法 一、标称名 { 属性：值；} 一个样式的语法是由三部分构成：选择器、属性和属性值 二、id和class id和class是HTML元素中两个最基本的公共属性。区别在于一个页面中只允许出现一个id，而class则可以出现多次 //eg:一下为错误格式，因为一个页面中不能同时使用两个相同的id <div id="first">123456</div>...
CSS——很多让p变红的方法
mintsolace的博客
09-13 1111
第一种情况——只有一个p标签：<body> <div id="wechat1" class="weixin1"> <div id="wechat2" class="weixin2"> <div id="wechat3" class="weixin3"> <p>Please make me red</p>
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6440
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
CSS 选择器
m0_60508194的博客
09-26 1674
可以将CSS选择器分为五类：
css 选择器
qq_42638586的博客
04-10 1579
css选择器
css 选择器 详解
2301_76669854的博客
12-12 2140
使用。
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
CSS选择器大全
认真学习前端的博客
03-08 2095
CSS选择器中的通用 ID class 标签 属性以及交集 并集选择器，伪类，伪元素选择器等等 还有选择器的优先级权值等内容
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS画出三角形的做法
mingangel的博客
10-01 520
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 519
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
【CSS】position
小秀的博客
10-02 465
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
66. three.js Canvas画布布局
Miller777_的博客
10-08 238
Canvas是HTML的元素之一，Canvas元素的CSS布局规律和div、img等其它HTML元素相似，webgl就是依赖于canvas实现，threejs是基于webgl封装的，自然也要依赖canvas，具体说就是把三场场景渲染到canvas画布上。案例源码“CSS布局案例.html”的布局效果，你也可以用CSS其它方式实现，不一定和课程中一样，CSS布局是前端知识，这里不展开讲解，咱们把重点放在threejs上面。
HTML & CSS 基础
最新发布
.bin的博客
10-08 1548
HTML CSS 入门笔记
CSS选择器详解：基础到高级实例
本篇笔记详细介绍了CSS选择器的基本概念和使用方法，分为三个主要部分： 1. **基本选择器**： - **通用元素选择器(*)**：此选择器匹配文档中的所有元素，可用于清除默认样式或设置全局样式。 - **标签选择器(E)**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值