CSS复合选择器与元素显示模式详解-CSDN博客

本文链接：https://blog.csdn.net/JAVAWEB_/article/details/107702403

本文详细介绍了CSS中的复合选择器，包括后代选择器、子选择器、并级选择器和链接伪类选择器，以及元素的显示模式，如块元素、行内元素和行内块元素。此外，还提到了转换元素显示模式的方法和实用工具Snipaste的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复合选择器

复合选择器可以更准确、更高效的选择目标元素(标签)
由两个或多个基础选择器，通过不同的方式组合而成
复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

又称包含选择器，可以选择父元素里面子元素
语法:
元素1 元素2 {样式声明}
例如：
ul li {样式声明;}//选择ul里面所有的li标签元素

元素1和元素2 中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可 ul li a{}
元素1 和元素2 可以是任意基础选择器

子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选新儿子
语法：
元素1>元素2{样式声明}
表示选择元素1里面的所有直接后代(子元素)元素2
例如：
div>p {样式声明} //选择 div里面所有最近一级p 标签元素

元素1 和元素2中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管，他也可以叫亲儿子选择器

并级选择器

可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1,元素2 {样式声明}
例如：
ul,div {样式声明} //选择ul和div标签元素

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

链接伪类选择器

a:link				//选择所有未被访问的链接
a:visited			//选择所有已被访问的链接、
a:hover				//选择鼠标指针位于其上的链接
a:active			//选择活动链接(鼠标按下未弹起的链接)

注意事项
为了确保生效，请按照LVHA顺序声明:link-visited-hover-active
平时开发里会写

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	
	<style>
		a{
			color: #333;
			text-decoration: none;
		}
		a:hover{
			color: #368;
			text-decoration:underline;
		}
	</style>
</head>
<body>
		<a href="#">2020年8月1日头条</a>
</body>
</html>

:focus 伪类选择器
用于选取获得焦点的表单元素。主要针对表单元素
input:focus{
background-color:yellow;
}

选择器	作用	特征	使用情况	隔开符以及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只先亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav,p,header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover 实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

元素显示模式

HTML 元素一般分为块元素和行内元素两种元素

块元素

独占一行，可以对其设置高度、宽度、外边距，默认宽度是父级的100%,里面可以放很多标签
常见的有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签最典型的块元素

行内元素

一行可以显示多个，高、宽设置无效，默认宽度是本身内容的宽度，行内元素只能容纳文本或其他行内元素，（但是a里面可以放块级元素，但是a要转换）
常见的有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等其中<span>标签是最典型的行内元素

行内块元素

一行可以显示多个，默认宽度是它本身内容的宽度，高、宽、外边距及内边距都可以控制
常见的有<img/>,<input/>,<td> 它们同时具有块元素和行内元素的特点

元素模式	元素排列	设置样式	默认宽度	包含
块圾元素	一行只能放一个块级元素	可以设置高宽	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个	不可以直接设置宽高	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽高	它本身内容的宽度

元素显示模式转换

转换为块元素： display:block;
转换为行元素：display:inline;
转换为行内块元素：display:inline-block;

小工具snipaste

一个简单强大的截图工具，可以将截图贴到屏幕上
常用快捷键

F1 打开截图，同时测量大小，设置箭头，书字文字等
F3 在屏幕顶显示
点击图片，alt可以取色(shift可以切换取色模式)
ESC取消图片显示

下载地址：https://zh.snipaste.com/

案例
在这里插入图片描述

<style type="text/css">
			a {
				display: block;
				width: 230px;
				height: 40px;
				background-color: #838789;
				color: #FFF;
				text-decoration: none; 
				text-indent: 2em;
				line-height: 40px;
			}
			a:hover{
				background-color: #ff6f00;
			}
		</style>
	</head>
	<body>
			<a href="#">手机 电话卡</a>
			<a href="#">电视 盒子</a>
			<a href="#">笔记本 平板</a>
			<a href="#">出行 穿戴</a>
			<a href="#">智能 路由器</a>
			<a href="#">健康 儿童</a>
			<a href="#">耳机 音响</a>
		</ul>
	</body>