CSS选择器知识点总结

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

CSS嵌入方式

行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内样式</title>
	</head>
	<body>
		<h1 style="color: red; font-size: 50px;" >今天好开心</h1>
		<h1>今天是周三</h1>
	</body>
</html>

其运行出来的结果为：

  • 行内样式的作用域只在行内
  • style属性=""
  • 属性值=样式属性名：属性值；样式属性名：属性值；
  • color：red；    字体颜色
  • font-size；      字体大小

内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
                <!--
			作用域：当前页面  实现了内容和样式的初步分离 
			在head标签中写style标签
		-->
		<style>
			h1{
				color: blue;
				font-size: 60px;
			}
		</style>
	</head>
	<body>
		<h1>今天是周三</h1>
		<h1>今天是雨天</h1>
	</body>
</html>

其运行结果为：

可以发现两个h1标签的字体都变成同一类型

外部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<!--
			作用域：所有的页面
			href：配置css文件
			rel：stylesheet   样式表
		-->
		<link rel="stylesheet" href="my.css" />
	</head>
	<body>
		<h1>今天是周三</h1>
		<h1>今天是雨天</h1>
	</body>
</html>

my.css

h1{
	color: pink;
	font-size: 30px;
}

运行结果为：

样式优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优先级</title>
		<!--
			行内样式>内部样式>外部样式
			就近原则，下面的属性把上面的覆盖了
			
		-->
		
		<style>
			h1{
				color: blue;
				font-size: 50px;
			}
		</style>
		<!--
			方式一：link标签
			作用域：所有的页面
			href：配置css文件
			rel：stylesheet  样式表
			
			先把css导入到html中，然后一起显示
		
		-->
		<!--<link rel="stylesheet" href="css/my.css" />-->
		<!--
			
		方式二：@import
		先加载html，后用css渲染
		
		-->
		<style>
			@import url("css/my.css")
		</style>
	</head>
	<body>
		<h1 style="color: red;font-size: 50px;">国庆节快到了</h1>
		<h1>我们终于不用上课了</h1>
	</body>
</html>

 

 

 

高级选择器

层次选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
		<style>
			p,li{
				border: 1px solid red;
			}
			/*后代选择器 E F
			 *body下的所有p元素
			 * */
			/*1*/
			/*body p{
				background-color: gold;
			}*/
			/*4 5 6*/
			/*2*/
			/*ul p{
				background-color: pink;
			}*/
			/*子选择器 E > F
			 * 选择器body下的孩子是p元素
			 */
			/*3*/
			/*body>p{
				background-color: green;
			}*/
			/*ul下没有p元素，所有无选中*/
			/*4*/
			/*ul>p{
				background-color: orange;
			}*/
			
			/*相邻兄弟选择器 .E+F  E后面的相邻兄弟是F的元素*/
			/*5*/
			/*.aa+p{
				background-color: yellow;
			}*/
			/*通用兄弟选择器.E~F     E后面的通用兄弟是F的元素*/
			/*6*/
			.aa~p{
				background-color: brown;
			}
			
		</style>
	</head>
	<body>
		<p class="aa">1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
	</body>
</html>

其中代码运行后的图为： 

1.

2.

3.

4.

5.

6.

结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>结构为类选择器</title>
		<style>
			/*先计数，再看类型*/
			/*E:first-child 选择E 要求E是父亲的第一个孩子*/
			/*1*/
			/*p:first-child{
				background-color: red;
			}*/
			
			/*选择4*/
			/*2*/
			/*li:first-child p{
				background-color: red;
			}*/
			
			/*3*/
			/*p:last-child{
				background-color: red;
			}*/
			
			/*E:nth-child(n)  odd奇数    even偶数*/
			/*4*/
			/*p:nth-child(even){
				background-color: red;
			}*/
			
			/*E:first-of-type 先去看类型，再去计数*/
			/*5*/
			/*p:first-of-type{
				background-color: red;
			}*/
			
			p:nth-last-of-type(odd){
				background-color: red;
			}
			
			
		</style>
	</head>
	<body>
		<h1>h1</h1>
		<p class="aa">1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
		
		
		
		
		
	</body>
</html>

其中的运行结果为：

1.

2

3

4

5

6

基本选择器

基本选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<style>
			/*标签名 可以选中所有的此标签*/
			p{
				color: green;
			}
			a{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>我们好</p>
		<h1>我们好</h1>
		<p>我们好</p>
		<a>我们好</a>	
	</body>
</html>

其运行结果为：

我们可以看出p标签所对应的字变成绿色，a标签所对应的字变成红色

所以他只针对于某个标签而言。

类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			/*
			 *.+class名（点操作符）
			 * 选中的是带有该class属性的元素
			 * class属性可以作用在多个元素上
			 * */
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 class="red">h1标签</h1>
		<a class="red">a标签</a>
	</body>
</html>

其运行结果为：

全局选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全局选择器</title>
		<style>
			/*全局选择器，可以选择页面内所有元素*/
			*{
				color: red;
			}
		</style>
	</head>
	<body>
		<a>a</a>
		<p>p</p>
		<h1>h1</h1>
	</body>
</html>

其运行结果为：

并集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>并集选择器</title>
		<style>
			/*并集选择器        选中页面内所有元素*/
			a,p,#ha{
				color: red;
			}
		</style>
	</head>
	<body>
		<a>a</a>
		<p>p</p>
		<h1 id="ha">h1</h1>
	</body>
</html>

其运行结果为：

id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			/*
			 id选择器
			 #+id值{}
			 id值只能作用在一个元素上
			 * */
			#title{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 id="title">我是标题</h1>
		<h1 id="title">我是标题</h1>
	</body>
</html>

其运行结果为：

基本选择器优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器优先级</title>
		<style>
			/*id选择器>类选择器>标签选择器
			 不遵循就近原则
			 * */
			/*#title{
				color: blue;
			}*/
			.green{
				color: green;
			}
			h1{
				color: peru;
			}
			
			
			
		</style>
	</head>
	<body>
		<h1 id="title" class="green">哈哈哈</h1>
	</body>
</html>

 

欢欢**
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器知识点总结 （基础选择器+复合选择器）
m0_50694272的博客
10-15 1215
CSS学习自检 选择器(选择符)就是根据不同需求把不同的标签选出来，这就是选择器的作用。 CSS选择器主要可以分为基础选择器和复合选择器两个大类。 基础选择器 基础选择器是由单个选择器组成的，主要包括：标签选择器、类选择器、id 选择器和通配符选择器。 标签选择器： 标签选择器用于将HTML的标签作为选择器，能快速为页面中同类型的标签统一设置样式，但不能设计差异化样式。 p { font-size: 12px; color: red } 类选择器： 类选择器以" . " 进行标识，可以用于给多个H
前端CSS选择器知识点详细整理
weixin_45709829的博客
04-03 3215
前端CSS—选择器知识点整理 一 前言 博主大二计算机专业在读，此博客作为前端学习md记录，算是对自己的一个push作用吧。每天学一点点技术，再把学到的知识按照一定的逻辑顺序整理出来，整理知识点的同时也是在加深对知识点的理解，对自己也是一个学习的过程。学习技术是一个枯燥而且需要消耗时间精力的漫长过程，但是坚持下去特别有成就感。我觉得前端对我来说成就感是“可视化的”。从我个人的角度出发，我认为世界上的幸存者偏差是小概率事件，每个人都在自己的专业领域训练一万个小时。希望自己能坚持学习吧。 二 一些需要理解的逻
转载:CSS选择器知识点整理.
dcpxn64404的博客
12-02 150
1、class 和 id 的使用场景? id：指定标签的唯一标识。根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)。id属性的值，在当前的page页面要是唯一的。 class：指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。 2、CSS选择器常见的有...
CSS选择器知识点
lyc2263843491的博客
05-13 298
选择器一、作用：规范页面中哪些元素能够使用定义好的样式，匹配页面元素二、详解1、通用选择器作用：匹配页面所有的元素语法： *{}                                                         2、元素选择器作用： 匹配 页面中指定的元素的元素语法：元素名{} 例：div{}   p{}     h1{}   span{}3、类选择器作用：允许元素使...
css选择器知识汇总
你的博客
06-26 699
对大多技术人员来说都比较熟悉CSS选择器，举一例子来说，假设给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了，这个时候突然意识到了CSS选择器的优先级问题。严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入sty
css知识点总结包含xmind文件
10-11
图片版CSS知识点总结通常是以图像的形式展示CSS的核心概念和规则，如选择器、盒模型、定位、浮动、布局模式、过渡与动画、响应式设计等。这样的图片便于打印或者离线查看，同时也可以快速概览整个知识体系。 SVG...
HTML+CSS的入门知识点总结
09-20
HTML+CSS入门知识点总结 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点，涵盖HTML的基本结构、CSS...
html和css知识点总结.docx
04-03
CSS 基本语法和选择器： CSS 使用选择器来选取 HTML 元素并应用样式。基本选择器包括元素选择器（如 `p`）、ID 选择器（如 `#myId`）和类选择器（如 `.myClass`）。伪类选择器如 `:hover`、`:active`、`:visited` ...
css初级知识点总结，含有文本字体基础选择器等基础知识点
04-03
关于css的字体，文本，基础选择器的简绍，适合于初学者使用，本篇是关于css基础知识点的巩固与总结
CSS 选择器 知识点
weixin_30642029的博客
05-11 72
<html> <head> <style type="text/css"> h1 > strong { /*子元素选择器 只选择自己 的子元素 子的子不管 */ color: red; } h2 strong { /*后代选择器 选择子元素 子的子 */ ...
css知识点选择器
weixin_48435165的博客
07-28 115
一、css的样式方式 **1、内联样式：**在标签内使用style属性指定css代码 <div style="color:red;">这是一个div标签</div> **2、内部样式：**在head标签内，定义style标签，style标签的标签体内容就是css代码 div{ color: aqua; } <div>hello css</div> **3、外部样式：**1. 定义css资源文件。 2. 在head标签内，定义link标签，引入外部的资
选择器知识点
YangL666的博客
08-19 213
一、选择器 1、属性选择器 ①E[attr] 表示存在attr属性即可； ②E[attr=val] 表示属性值完全等于val； ③E[attr*=val] 表示在属性值的“任意”位置包含val字符； ④E[attr^=val] 表示在属性值的“开始”位置包含val字符； ⑤E[attr$=val] 表示在属性值的“结束”位置包含val字符； 2、伪类选择器 ①以某元素相对于其父元...
CSS——选择器相关知识总结
狂野的鬼
03-30 727
本文章重点讲述以下CSS选择器的分类、CSS3新增选择器分类和权重问题 目录 CSS选择器的分类 简单选择器： 小技巧： 复合选择器: CSS3新增选择器的分类 属性匹配选择器 结构伪类选择器 匹配类选择器： 指定类选择器： 其他结构伪类选择器： 兄弟选择器： 伪类选择器 伪元素选择器 总结 CSS选择器的分类 简单选择器： 通配符选择器：*； 标签选择器：标签名； 类选择器：.+类名； id选择器：#+id名； 权重：内联样式（1000）>i..
css简介及常用选择器（基础知识整理）
最新发布
qq_56532050的博客
11-18 495
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。
CSS重点总结（一）——CSS选择器
qq_45852690的博客
08-11 282
一、CSS选择器 1、CSS选择器的作用 选择标签，就好比这里去选择h1，然后命令h1去做什么事（把字体改为红色） 2、CSS选择器的分类 2.1、基础选择器 通用选择器 * { padding:0px; margin:0px; } 因为有些标签自带一些属性，从而影响我们的一些布局，所以我们把会影响标签的属性的属性值都修改为0px（注意：0px也可以写成0，不需要px） 标签选择器 以HTML标签名作为选择器 div { width：10px; height：10px; } 把同一
CSS基础知识（一）：选择器
前端
10-21 790
文章目录前言一、CSS基础知识二、选择器1.选择器2.基础选择器2.1 标签选择器2.2 类选择器2.3 id选择器2.4 通配符选择器2.5 基础选择器总结3.复合选择器3.1 后代选择器3.2 子元素选择器3.3 并集选择器3.4 相邻兄弟选择器3.5 复合选择器总结4.伪类选择器4.1 动态伪类选择器4.2 UI元素状态伪类选择器4.3 结构伪类选择器4.4 否定伪类选择器5.伪元素选择器5.1 :before选择器5.2 :after选择器5.3 :first-line选择器5.3 :first-l
选择器的基础知识总结
beeliang
04-13 148
1.层级选择器 （+ ~作用的是兄弟关系） ：子代选择器 .box>li{ border: 1px solid red; } +： 当前元素的后面第一个兄弟 .child+li{ background-color: aquamarine; } ~：当前元素后面所有的兄弟元素 ` .child~li{ background-color: yellow;
CSS选择器必备的3个知识点
qq_24520459的博客
10-18 206
1.常用的CSS选择器1.1 标签选择器，用html标签申明，如： /*标签选择器*/ p{ color: red; }1.2类选择器，用一个样式...
CSS选择器总结 思维导图
zp的博客
07-12 883
全面掌握CSS基础与进阶知识点总结
本文档是对CSS（层叠样式表）知识点的详细归纳和总结，旨在帮助学习者系统地理解和记忆CSS基础知识。CSS是用于网页设计和开发中的关键语言，它控制网页元素的外观和布局。 1. **基本格式**： CSS采用三种基本格式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值