CSS-选择器

已于 2023-11-30 15:42:54 修改
阅读量209 收藏
点赞数
分类专栏： HTML/JS/CSS（原生） 文章标签： css html css3
于 2023-02-02 11:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StupidlyGrass/article/details/128846568
版权

1、CSS

（1）特点
  • 相同属性会覆盖，不同属性会叠加
（2）引入方式
  • 外部样式：在head标签中使用link标签引入css文件
  • 内嵌样式：在head标签中使用style标签进行书写
  • 行内样式：在对应标签中添加style属性
1）外部样式
  • W3C School文档：https://www.w3school.com.cn/tags/tag_link.asp
常用属性描述
type属性定义链接文档类型
rel属性定义当前文档与链接文档的关系
href属性定义链接文档位置

① css代码

  • 单独创建一个.css结尾的文件，写入以下内容（文件名称自定义）
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
	border:1px solid black;
	background-color:pink;
}

/* 给p标签内容变为蓝色 */
p {
	color:blue;
}

/* 给strong标签内容变为绿色 */
strong {
	color:green;
}

② html代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<link href="./css/link.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

2）内嵌样式

① 代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<!-- css代码 -->
	<style>
		/* 给div标签添加黑色实线线条和粉色背景颜色 */
		div {
			border:1px solid black;
			background-color:pink;
		}

		/* 给p标签内容变为蓝色 */
		p {
			color:blue;
		}

		/* 给strong标签内容变为绿色 */
		strong {
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

② 运行效果

Picture

3）行内样式

① 代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>

<body>
	<div style="border:1px solid black;background-color:pink;">
		<p style="color:blue;">这是一个p标签</p>
		<strong style="color:green;">这是一个strong标签</strong>
	</div>
</body>

</html>

② 运行效果

Picture

2、简单选择器

注意

  • 这里为了方便展示代码，统一使用内嵌样式进行书写，实际开发工作中提倡优先使用外部样式
（1）元素选择器（标签选择器）

① 语法格式

	标签名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
			border:1px solid black;
			background-color:pink;
		}
		p {
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（2）class选择器（类选择器）
  • 按照类型，可以重复使用，例如：p标签和strong标签文本颜色统一设置为蓝色，创建一个类选择器即可

① 语法格式：

	.类名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		.box {
			border:1px solid black;
			background-color:pink;
		}
		.content {
			color:blue;
		}
	</style>
</head>

<body>
	<div class="box">
		<p class="content">这是一个p标签</p>
		<strong class="content">这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（3）ID选择器
  • id选择器，值唯一，不能重复使用

① 语法格式

	#id名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		#box {
			border:1px solid black;
			background-color:pink;
		}
		#content {
			color:blue;
		}
	</style>
</head>

<body>
	<div id="box">
		<p id="content">这是一个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（4）通配符选择器
  • 选中所有标签，所有标签都会受到影响，不过权重最低

① 语法格式：

	* {
		属性1:属性值;
		属性2:属性值;	
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		*{
			color:blue;
			font-size:25px;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（5）选择器权重
名称权重值
!importantinfinity
行内样式1000
ID选择器100
class选择器10
元素选择器1
通配符选择器0
(1) 选择器命名规则（适用于自定义名称的选择器）
  • 不能以数字和特殊字符开头；
  • 要以英文开头(或者拼音)；
  • 见名知意；
  • 使用驼峰命名法(小驼峰/大驼峰)
(2) 选择器优先级及权重
  • 选择器优先级：!important > 行内样式 > ID选择器 > class选择器 > 元素选择器 > 通配符选择器
  • 权重相同的时候，先看先后顺序
  • 权重不同的时候，看权重大小
  • 权重可以叠加

3、组合选择器

（1）后代选择器
  • 选中父级标签中的所有指定的子级标签

① 语法格式

	父级 子级 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div strong{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（2）子代选择器
  • 只选中选择器的后一代，跨代不选中

① 语法格式：

	父级>子级 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div>strong{
			color:blue;
		}
		div>strong{
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（3）同级选择器
  • 同级选中，只选择后面出现的元素，前面的不选中

① 语法格式：

	元素~元素 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		strong~p{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<p>这是第三个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第第四个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（4）相邻选择器
  • 选中同级的下一个元素

① 语法格式：

	元素+元素 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p+strong{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<strong>这是第二个strong标签</strong>
		<strong>这是第三个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（5）交集选择器
  • 例如：选中div中，既有p，也有.one类的元素

① 语法格式：

	div span.one {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div p.one{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p class="one">这是第二个p标签</p>
		<p>这是第三个p标签</p>
		<p class="one">这是第四个p标签</p>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（6）伪类选择器
  • 当鼠标移入的时候，被选中的当前元素，设定为某种状态

① 语法格式：

	选择器:hover {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
			width:300px;
			height:300px;
			background-color:aqua;
		}
		div:hover{
			background-color:pink;
		}
	</style>
</head>

<body>
	<div></div>
</body>

</html>

③ 运行效果

打开时颜色Picture

鼠标移入时颜色Picture

（7）伪元素选择器

伪元素特点：

  • 能被CSS选中和修改，但是没有html结构
  • 天生就是‘行内元素’，通过CSS选中并修改
  • 特性和‘行内元素’一致
（1）before
  • 在选中的元素前面添加内容

① 语法格式：

	选择器:before {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:before{
			content:"这是before添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ 运行效果

Picture

（2）after
  • 在选中的元素后面添加内容

① 语法格式：

	选择器:after {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:after{
			content:"这是after添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ 运行效果

Picture

更多选择器学习，请参考官方文档

https://www.apiref.com/css-zh/index.htm

呆呆的小草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
heyunjiang#Blog#深入css-选择器及权重1
07-25
2.1 权重分配规则 2.2 权重比较规则 2.3 实例 2.1 权重分配规则 2.2 权重比较规则 2.3 实例 3.1 伪类选择器
选择器（基础选择器+选择器的进阶+结构伪类选择器等）
qq_50260510的博客
03-11 3165
各种类型的选择器
css3.
m0_61925586的博客
01-21 507
css通俗来讲就是起美化网页作用的。
【web前端开发】CSS最常用的11种选择器
云泽野の编程日记
03-09 5047
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS的作用:给HTML里面的标签设置样式简单点来说就是让HTML的页面变得更加好看。
CSS层叠样式表--选择器
QLqrr的博客
05-21 252
一、基础选择器 1.标签选择器 按照标签找元素，不论结构多复杂，都能找到对应的标签。 例： <style> p{ color: red; } </style> <p>标签选择器</p> 效果： 2.id选择器 通过id可以找到指定的元素。 id类似于身份证号，一个id值，只能给一个标签使用。 例： #red{ color: red; } #blue{ ...
css的选择器权重问题
lxw621的博客
09-18 225
权重为0的有 继承和*权重为1的有元素选择器权重为10的有类选择器(class），和伪类选择器权重为100的有ID选择器权重为1000的有行内样式 style权重最大 无敌的有!important (重要的)
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
css3-选择器
01-07
/* 选择所有满足条件的兄弟节点 */ div ~ p{ } Attribute Selector div[data]{ } div[data=a]{ } /* 选则属性值为“a” 或者属性值里包含单独的“a”的节点 */ div[data~=a]{ } /* 选择满足以“a
CSS选择器-xmind
03-10
CSS选择器 xmind - 选择器分类(ID选择器，类选择器，标签选择器，通配选择器，属性选择器，伪类选择器)。 - 选择器关系(分组，后代，子元素，相邻兄弟，后续兄弟)。 - CSS特性(优先级，继承，层叠)。
postcss-selector-parser:CSS选择器解析器，与postcss集成，但不需要它
04-28
postcss选择器解析器 选择器解析器，具有用于处理选择器字符串的内置方法。 安装 使用可以： npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const ...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS笔记-选择器
07-08
本人清风，这次给大家分享本人学习的心得和笔记，记录点点滴滴，用的md格式，这是第一个，CSS选择器
JSoup CSS选择器用法大全
08-15
备查，搞爬虫开发者必备
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm install postcss-css-variables --save-dev 目录 -- ...
CSS总结(一)：选择器、层叠、文本样式与背景
Lee hua
05-28 1286
一：二：
Css-层叠（样式优先级+选择器优先级+继承）
caicsama的博客
03-23 410
定义CSS的方式： 样式表优先级:内联样式>内嵌样式>外联样式 内联样式 <div style="background-color:#red"> 内嵌样式 <style>div{ background-color:red }</style> 外联样式 <link rel="stylesheet" src="index.css"/> 但是为...
CSS层叠样式表（二）——定义CSS样式表（CSS选择器）
qq_42543880的博客
07-02 881
1、HTML标记定义：为html的某个标记中的内容定义样式表      例子：为html中的标记p中的内容定义样式，字体为红色，大小为28px &lt;!DOTYPLE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;定义CSS样式(CSS选择器)&lt;/title&gt; &lt;meta charset="utf-8"&gt
css层叠样式表选择器介绍
xinggey的博客
07-29 613
标签选择器：根据标签名称选择一类元素 id选择器：通过id属性选择一个元素 #value 类选择器：class为.value 普遍选择器：*代表选择所有 后代选择器：>：选择当前元素直接子元素,不包括孙代 空格：选择当前元素的所有后代元素，包括孙代元素 兄弟选择器：+：选择当前元素之后的一个兄弟元素 ~：选择当前元素之后的所有兄弟元素 属性选择器：根据元素的属性选择一类元素 ： 例：[id]:选择当前页面中具有id属
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值