CSS选择器分类

最新推荐文章于 2024-09-06 10:20:56 发布
最新推荐文章于 2024-09-06 10:20:56 发布
阅读量205 收藏
点赞数
分类专栏： 前端开发学习笔记 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44214671/article/details/108844081
版权

选择器 【掌握】

一、基本选择器【重点】

1.标签选择器 权值1

标签选择器: 利用标签名称做为选择器的名称,可以选择页面上的一种标签
格式: 标签名

<style type="text/css">
		p {
			color: red;
		}
        div {
		    color: red;
		}
</style>

2.ID选择器 权值100

ID选择器: 选择页面上唯一的标签，
格式: #id属性的值

<style type="text/css">
		#header {
			color: blue;
		}
        #header {
			color: red;
		}
        #header {
			color: yellow;
		}
</style>
<body>
        <div id="header">我是头部</div>
		<div id="main">我是主体</div>
		<div id="footer">我是尾部</div>
</body>

3.类选择器 【开发中引用最常见】 权值10

类选择器: 利用标签中的class属性的值作为选择器的名称,可以选择页面上的一类标签,这里的一类是由开发者自己来定义的，用户也可以使用复合属性来对标签归类，class的名称在页面中可以重复

格式: .class属性的值

<style type="text/css">
			.a {
				color: red;
			}
			
			.b {
				color: green;
			}

            .c {
                color:blue
}
</style>
<body>   
		 <h1 class="a">王宝强</h1>
         <span class="b">PGONE</span>
		 <p class="c">班长</p>
		 <!-- 复合属性 -->
		 <p class="a b">李小璐</p>
</body>

三种选择器的优先级 【掌握】
如果多个基本选择器作用于同一个标签，那么优先级顺序是:
Id选择器 > 类选择器 > 标签选择器

选择器的权值 【了解】
选择器 权值 描述
style = “” 1000 标签内引入
id 100 ID选择器
.class 10 类选择器
tag name 1 标签名选择器

如果多个选择器的优先级相同时，根据浏览器的渲染工作原理，从上向下渲染。也即谁离结构越近，谁的优先级越高。

三种基本选择器还可以互相嵌套使用，使用规则如下
1.如果中间有标签选择器，那么标签选择器必须出现在最前面
2.如果没有标签选择器，那么随意

二、高级选择器 【掌握】

1.通用选择器 【掌握】

选择页面中所有的标签，通常用来设置页面的整体样式，例如外边距和内边距

<style type="text/css">	
		/* 选择页面中所有的标签 */
		* {
			padding: 0px;
			margin: 0px;
		}
</style>

2.组合选择器 【掌握】

选择页面中多个选择器，每个选择器使用逗号隔开，一般用来抽取多个标签的共同样式
div, span,ul,li {
color: white;
background: black;
}

3.层次选择器 【掌握】

3.1 后代选择器
格式: E F 选择E标签下面所有的F标签
3.2 子代选择器
格式: E>F 选择E标签下面第一层中所有的F子标签
3.3 相邻兄弟选择器
格式: E+F 选择E标签后面同辈的紧邻的F标签
3.4 通用兄弟选择器
格式: E~F 选择E标签后面同辈的所有F标签

代码示例

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">

		/*让所有的p标签和ul标签加上边框*/
		p,ul{
			border: 1px solid red;  /*边框属性*/
		}

		/*后代选择器: 给body下面所有的p标签加上背景*/
		body p {
			background-color: red;
		}
		/*子选择器 给body下面的一级子标签p标签加上背景*/
		body>p {
			background-color: red;
		}
		/*相邻兄弟选择器: 给.active所对应的p标签 紧邻的p标签设置背景*/
		.active+p {
			background-color: red;
		}
		/*通用兄弟选择器: 给.active对应的p标签 后面的所有兄弟标签p标签设置背景*/
		.active~p {
			background-color: red;
		}
	</style>
</head>
<body>
	<p class="active">1</p>
	<p class="active2">2</p>
	<p>3</p>
	<ul>
		<li>
			<p>4</p>
		</li>
		<li>
			<p>5</p>
		</li>
		<li>
			<p>6</p>
		</li>
	</ul>

</body>
</html>

4.结构伪类选择器 【掌握】

4.1 E F: first-child 选择E标签下面第一个子标签F
4.2 E F:last-child 选择E标签下面最后一个子标签F
4.3 E F:nth-child(n) 选择E标签下面第N个子标签F
4.4 E F:first-of-type 选择E标签下面第一个类型是F的子标签
4.5 E F:last-of-type 选择E标签下面最后一个类型是F的子标签
4.6 E F:nth-of-type(n) 选择E标签下面第N个类型是F的子标签
4.7 nth-of-type(odd) 选择E标签下面偶数个类型是F的子标签
4.8 nth-of-type(even) 选择E标签下面奇数个类型是F的子标签
代码示例

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3结构伪类选择器</title>
	<style>
		ul,li,p,h2 { border: 1px solid red;}
		/*ul的第一个子元素*/
		.u li:first-child {
			background-color: red;
		}
		/* .li1 {
			background-color: orange;
		} */
		/*ul的最后一个子元素*/
		ul li:last-child{
			background-color: blue;
		}

		/*body下面的第2个p元素*/
		body p:nth-child(2) {
			background-color: green;
		}
		/*选择到父级里的第一子元素p*/
		body p:nth-of-type(1) {
			background-color: #00FF00;
		}

		/*父元素里第2个类型为p的元素*/
		body p:nth-of-type(2) {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h2>结构伪类选择器</h2>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul class="u">
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
</body>
</html>

5.属性选择器 【了解】

5.1 E[attr] : 选择具有属性attr的元素
5.2 E[attr=val]: 选择属性attr等于val的元素
5.3 E[attr^=val]: 选择属性attr以val开头的元素
5.4 E[attr$=val]: 选择属性attr以val结尾的元素
5.5 E[attr*=val]: 选择属性attr包含val的元素

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			a {
				display: inline-block;
				width: 45px;
				height: 45px;
				background-color: #AAAACC;
				border-radius: 8px;
				margin-left: 10px;
				text-align: center;
				line-height: 45px;
				text-decoration: none;
				font-size: 20px;
				font-weight: 900;
			}
				
			/* 选中所有含有id属性的链接背景为红色*/
			a[id] {
				background-color: red;
			}
			/* 选中所有class属性等于links item的链接背景为黑色*/
			a[class="links item"] {
				background-color: black;
			}
			/*注意:如果属性值中有特殊字符，那么必须使用双引号包裹*/
			/*选中所有href中以http开头的链接为蓝色*/
			a[href^="http://"] {
				background-color: blue;
			}
			
			/*选中所有href中以png结尾的链接为绿色*/
			a[href$=png] {
				background-color: green;
			}
	
			/* 选中包含class中包含item的链接为橘色*/
			a[class*=item]{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		<p class="demo">
	    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
	    <a href="" class="links active item" title="test website" target="_blank" >2</a>
	    <a href="sites/file/test.html" class="links item"  >3</a>
	    <a href="sites/file/test.png" class="links item" > 4</a>
	    <a href="sites/file/image.jpg" class="links item" >5</a>
	    <a href="efc" class="links item" title="website link" >6</a>
	    <a href="/a.pdf" class="links item" >7</a>
	    <a href="/abc.pdf" class="links item" >8</a>
	    <a href="abcdef.doc" class="links item" >9</a>
	    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
	</body>
</html>

6.伪类选择器 【掌握】

6.1 E:link 元素E未访问默认样式
6.2 E:visited 元素E访问后样式
6.3 E:hover 元素E鼠标悬浮样式
6.4 E:active 元素E鼠标点击未松开的样式
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				display: inline-block;
				width: 45px;
				height: 45px;
				background-color: #AAAACC;
				border-radius: 8px;
				margin-left: 10px;
				text-align: center;
				line-height: 45px;
				text-decoration: none;
				font-size: 20px;
				font-weight: 900;
			}
			
			/* 伪类选择器 */
			a:link {
				background-color: red;
			}
			
			a:visited {
				background-color: blue;
			}
			
			a:hover {
				background-color: yellow;
			}
			
			a:active {
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
		<a href="" class="links active item" title="test website" target="_blank" >2</a>
		<a href="sites/file/test.html" class="links item"  >3</a>
		<a href="sites/file/test.png" class="links item" > 4</a>
	</body>
</html>

总结: CSS选择器学习目标就是能够灵活地使用各种选择器选择不同的标签，并且在不使用id或者class等属性的时候也能够查找到你想要的标签,同时也要学会灵活地将不同的选择器嵌套在一起使用，掌握到这个程度就可以了。

疯魔coding君
关注
专栏目录
CSS选择器分类梳理并高亮重点
Irene1991的博客
08-14 414
CSS选择器分类梳理并高亮显示重点，优化了示例说明的语言表达。
CSS选择器分类（儿子选择器、 序选择器、下一个兄弟选择器+）
m0_71814235的博客
06-27 1948
CSS选择器分类（儿子选择器、 序选择器、下一个兄弟选择器+）
css详解
selean0621的专栏
08-21 475
#header             标题栏的ID，就是挂着空间名字的栏目#tab                  导航兰的ID，就是写着主页 | 博客 | 相册....的栏目#comm_info       其他模版的ID，就是有访问量显示和RSS的栏目#m_blog            文章列表模版的ID#m_pro              个人档案模版
【Vue教程六】插槽
qing_小诺的博客
07-15 1147
1、插槽内容 我们经常需要向一个组件传递内容，可以用 Vue 自定义的 <slot>元素： <body> <div id="app"> <alert-box> Something bad happened. </alert-box> </div> ...............
css3 基本语法
m0_61073617的博客
12-14 2535
使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。 CSS全称层叠样式表，又称风格样式表 CSS规则由两部分组成：选择器和声明 HTML引入CSS样式的方法有三种： 行内样式 注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。 <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
HTML5基本标签使用header，nav和footer
张晨光老师的播客
05-06 5664
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{ padding: 10px ... } 定义完之后呢，...
CSS选择器分类汇总图片和文档
08-11
下面是对“CSS选择器分类汇总”相关知识点的详细说明。 1. 基本选择器： - **类型选择器**：例如`h1`，`p`，通过元素名称来选择元素。 - **ID选择器**：使用`#`后跟ID名称，如`#header`，每个页面中ID应是唯一的...
CSS选择器分类（ 通配符、标签选择器、id选择器、类选择器）
m0_71814235的博客
06-27 564
CSS选择器分类（标签选择器、id选择器）
python爬虫之css选择器
09-24
#### 三、CSS选择器分类及示例 ##### 1. 基本选择器 - **类选择器**：`.class` 示例：`.intro` 描述：选择所有class属性为"intro"的元素。 - **ID选择器**：`#id` 示例：`#firstname` 描述：选择所有id属性...
表头插槽使用#header，不能使用slot=“header”
最新发布
活宝小娜的博客
09-06 71
表头插槽使用#header，不能使用slot=“header”
div#header 和 div #header的区别
进击的WEB前端-小黄毛
01-27 1541
div#header 和 div #header的区别 html>head>style type="text/css">div#header{ background-color:green;}style>head>body>div id="header">澳大利亚div>div>中国div>body>html>   上面的例子中第1div的背景为green，
html 中的 header-作用与使用
青轻飞扬
10-12 8740
// 用作跳转页面 header('location:index.php?name=zhangshan&age=18'); // 用来告诉浏览器这个文件是什么 header('Content-Type:image/jpeg'); // 实现下载功能 header('content-Disposition:attachment;filename="'
php header的使用，PHP常见header状态总结
weixin_30641465的博客
07-01 76
<?php//200 正常状态header('HTTP/1.1 200 OK');// 301 永久重定向，记得在后面要加重定向地址 Location:$urlheader('HTTP/1.1 301 Moved Permanently');// 重定向，其实就是302 暂时重定向header('Location: http://www.maiyoule.com/');// 设置页面304 ...
HTTP Header解析
两鬓已不能斑白的专栏
09-19 1万+
HTTP Header解析 HTTP Header又叫HTTP头，几乎是面试中的必考题。为了更直观地理解HTTP头的内容，我们可以使用chrome浏览器的开发者模式。如图，我们在百度一个发送一个查询请求，然后按F12进入开发者模式，点击Network，这样就能看到HTTP头的内容。 HTTP 头包括以下几个部分：通用头、响应头、请求头。其中，请求头和响应头最为重要。 以下部分内容参考了： h
四、HTTP协议Header介绍
白骨梦儿
10-16 1万+
Web API是网络应用程序接口；并不是任意的一个URL地址都可以认为是WebAPI;比如：http://www.baidu.com;因为它只返回了固定的HTML内容；而https://www.tapd.cn/20827701/releases/view/1120827701001000217#tab=tab-bug则是WebAPI;因为它可以根据不同的参数条件返回不同的信息； HTTP请求、H...
PHP中常见的header头有哪些？
郝云博客
11-08 797
// ok 正常访问header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 header('HTTP/1.1 200 OK'); //设置地址被永久的重定向 301 header('HTTP/1.1 301 Moved Permanently'); //跳转到一个新的地址 header('Location: http://php.itcast.cn/')...
HTML5 中的Header元素详解
lidiya007的博客
12-22 1万+
什么是header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。 注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。   header元素的用法 下面根据一幅图来具体看看he
HTTP Header 详解
michaelenshi的专栏
01-31 626
本文转载自http://kb.cnblogs.com/page/92320/，在此对原作者表示感谢！ HTTP（HyperTextTransferProtocol）即超文本传输协议，目前网页传输的的通用协议。HTTP协议采用了请求/响应模型，浏览器或其他客户端发出请求，服务器给与响应。就整个网络资源传输而言，包括message-header和message-body两部分。首先传递mes
CSS基础：样式表分类与选择器详解
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。 CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值