CSS3之复杂选择器、内容生产、多列、CSS Hack

最新推荐文章于 2025-05-27 12:39:32 发布

原创最新推荐文章于 2025-05-27 12:39:32 发布 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #web前端

CSS3高级应用专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解了CSS中的复杂选择器、内容生成、多列布局等高级特性，并介绍了如何利用CSS Hack进行跨浏览器兼容性处理。

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

1、复杂选择器
2、内容生成
3、多列
4、CSS Hack
==========================================
1、复杂选择器
1、兄弟选择器
兄弟：平级元素
兄弟选择器：只能向后找元素，不能向前找元素
<div>
<p></p>
<span></span>
<div></div>
</div>
1、相邻兄弟选择器
1、作用
紧紧挨着的元素称之为相邻元素
2、语法
选择器1+选择器2{}
ex:
1、div+span
匹配紧紧挨着div元素后面的span元素
2、#d1+span
匹配id为d1的元素后紧紧挨着的span元素
3、#d1+.important
匹配紧紧挨着 id为d1的元素后面的 class为important的元素
2、通用兄弟选择器
1、作用
通用:向后匹配所有
2、语法
选择器1~选择器2{}
ex:
1、#d1~span
匹配 #d1 后面所有的 span元素
2、#d1~.important
匹配 #d1 后面所有class为important元素
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，进行元素的匹配
ex:匹配页面中所有的文本框
2、语法
[属性]
1、[attr]
attr:表示任意属性名称
作用：匹配页面中所有附带attr属性的元素
ex:
1、[id]
匹配页面中所有附带id属性的元素
2、[title]
匹配页面中所有附带title属性的元素
2、elem[attr]
elem:表示任意元素
作用：匹配页面中所有附带attr属性的elem元素
ex:
1、p[id]
匹配页面中所有附带id属性的p元素
2、img[title]
匹配页面中所有附带title属性的img元素
3、[attr1][attr2]
作用:匹配即具备attr1属性同时也具备attr2属性的元素
ex:
1、div[id][class]
匹配即具备id属性同时也具备class属性的div元素
4、[attr=value]
[attr="value"]
[attr='value']
匹配具备attr属性并且值为value的元素
ex:
1、匹配页面中所有的文本框
input[type="text"]
5、[class~=value]
多类选择器中使用
class属性值是以空格隔开的值列表，value是值列表中的独立的值
只要class属性值中，包含value选择器，就能够匹配出来
6、[attr^=value]
^= : 以...作为开始
匹配 attr 属性值是以 value 字符作为开始的元素
<div class="col-5"></div>
<div class="col-3"></div>
ex:
1、[class^="col-"]
匹配 class 属性值是以 col- 字符作为开始的元素
7、[attr$=value]
匹配 attr 属性值是以 value 字符作为结束的元素
ex:
1、[class$="users"]
匹配 class 属性值是以 users 字符作为结束的元素
8、[attr*=value]
*=:包含
匹配 attr 属性值中包含 value 字符的元素
ex：
1、[class*="cols"]
3、伪类选择器
1、目标伪类
1、作用
匹配被激活的 html锚元素(锚点)
2、语法

:target 或选择器:target

点击第一章出现第一章相关文字，点击第二章出现第二章的相关文字，第一章的消失

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			#NO1,#NO2{
				display:none;
			}
			#NO1:target,#NO2:target{
				display:block;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#NO1">第一章</a>
			<a href="#NO2">第二章</a>
		</div>
		<div id="NO1">第一章 ：倚天屠龙记</div>
		<div id="NO2">第二章 ：倚天杀猪记</div>
	</body>
</html>

2、元素状态伪类
1、作用
匹配元素可用，禁用，被选中的状态
2、语法
1、:enabled
匹配页面中每个已启用的元素(表单元素)
2、:disabled
匹配页面中每个被禁用的元素(表单元素)
3、:checked
匹配每个被选中的元素(radio,checkbox)
3、结构伪类
1、:first-child
匹配属于其父元素中的首个子元素
2、:last-child
匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配属于其父元素中的第n个子元素
ex:
td:nth-child(2)

nth-child(1) == :first-child
4、:empty
匹配没有子元素(包括文本)的元素
ex:
<div>Hello World</div> : 非空
<div> </div>:非空

<div>
</div>:非空

<div></div>:empty
5、:only-child
匹配属于其父元素中的唯一子元素
<div>
<p></p> :only-child
</div>
4、否定伪类
匹配非指定选择器的每个元素
语法：
:not(selector)
将满足 selector 选择器的元素排除在外
ex:
1、控制除第一行以外的所有行的第一列的背景颜色为红色
#tbl tr:not(:first-child){}
4、伪元素选择器
1、伪类 VS 伪元素
伪类：匹配到的是完整的元素
伪元素：匹配到的是元素中的某部分内容
2、语法
1、:first-letter 或 ::first-letter
匹配某元素中的首字符
2、:first-line 或 ::first-line
匹配某元素中的首行
3、::selection
匹配被用户选取的部分
3、: 与 ::
1、:
在css中表示的是伪类选择器
在css2中还可以表示伪元素选择器
2、::
在css3中，:只表示为类选择器
在css3中，::只表示伪元素选择器
2、内容生成
1、作用
允许通过css的方式，动态的像某元素的内容区域生成或插入一部分数据
2、语法
1、伪元素选择器
1、:before 或 ::before
匹配某元素的内容区域之前
<div>(:before)This is a div</div>
2、:after 或 ::after
匹配某元素的内容区域之后
<div>This is a div(:after)</div>
2、属性
属性:content
取值:
1、字符串：普通文本
2、url() ：插入一副图像
3、计数器
3、计数器
1、属性：counter-reset
作用：声明/复位一个计数器
counter-reset:名称值;
注意：
1、值可以省略，省略的话，默认为0
2、允许一次性声明多个计数器以及值
counter-reset:名1 值1 名2 值2;
ex:
counter-reset:c1 c2;
counter-reset:c1 0 c2 10;
3、在哪声明计数器？
不能放在使用计数器的元素中声明
2、属性：counter-increment
作用：用于设置某个计数器每次出现的增量值
语法：
counter-increment:名增量值;
注意：
1、增量值可以省略，默认为1
2、增量值可以是正，也可以是负
正：递增
负：递减
3、可同时设置多个计数器增量，空格隔开
counter-increment:c1 1 c2 -1;
4、在哪声明计数器的增量？？？
哪个元素使用计数器，在哪个元素中声明增量
3、函数：counter()
作用：使用计数器生成的值
语法：
配合着内容生成一起来用
content:counter(计数器名);
content:"第"counter(名)"章、";
4、练习
1、Web基础知识
1.1 基础知识1
1.2 基础知识2
1.3 基础知识3
2、HTML快速入门
2.1 入门1
2.2 入门2
3、网页中的文本
3.1 文本1
3.2 文本2
3.3 文本3
声明两个计数器：
1、c1，控制外层数字计数器

2、c2，控制内层数字计数器

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			/*1、声明计数器*/
			body{
				counter-reset:c1 0;
			}
			/*2、设置计数器增量*/
			h1{
				counter-increment:c1 1;
				/*声明 c2 计数器*/
				counter-reset:c2 0;
			}
			/*3、使用计数器*/
			h1:before{
				content:"第"counter(c1)"章、";
			}
			/*4、使用 c1 计数器的值*/
			p:before{
				content:counter(c1)"."counter(c2);
			}
			/*5、设置 c2 计数器的增量*/
			p{
				counter-increment:c2 1;
			}
		</style>
	</head>
	<body>
		<h1>Web 基础知识</h1>
		<p>基础知识1</p>
		<p>基础知识2</p>
		<p>基础知识3</p>
		<h1>HTML 快速入门</h1>
		<p>入门1</p>
		<p>入门2</p>
		<p>入门3</p>
		<h1>网页中的文本</h1>
		<p>文本1</p>
		<p>文本2</p>
		<p>文本3</p>
	</body>
</html>

3、多列
1、分隔列
将一段文本拆成几列
属性：column-count
取值：数字(无单位)
ex:
column-count:3;
2、列间隔
指定每两个列之间的间隔距离
属性：column-gap
取值：距离值
ex:
column-gap:15px;
3、列规则
指定每两个列之间的分隔线的宽度，样式，颜色
属性：column-rule
取值：width style color;
4、浏览器兼容性
IE10+,Opera 支持多列
Firefox : -moz-
Chrome & Safari : -webkit-
4、CSS Hack
1 、原则 & 原理
原则：根据不同的浏览器编写不同的css
原理：根据样式的优先级来实现兼容性的处理
2、CSSHack 的解决方式
1、CSS类内部Hack
1、实现
通过 css 属性增加前缀或为属性值增加后缀的方式来匹配不同的浏览器
2、选择器Hack

3、HTML头部引用Hack

CSS Hack
1、头部引用Hack
通过 HTML 条件注释的方式，判断浏览器的类型及版本，
选择性的执行某些内容
1、语法

1、版本
6~10
如果省略版本号，则判断是否为IE浏览器
2、条件
1、省略不写
判断是否为IE，或是否为指定版本的IE浏览器
ex：
1、
判断是否为IE浏览器
2、
判断是否为IE7浏览器
2、gt
判断浏览器是否大于指定版本
ex:
1、<!>

3、gte
判断浏览器是否大于等于指定版本
ex:
1、
判断是否大于等于IE6版本
4、lt
判断浏览器是否小于指定版本
5、lte
判断浏览器是否小于等于指定版本
6、！
判断浏览器是否为条件以外的浏览器
<注：标准的css，在任何浏览器中均能正常显示的css代码>