CSS复合选择器

BlizCp

于 2020-11-24 18:23:14 发布

阅读量184

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/BlizCp/article/details/110090173

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、标签指定式选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器</title>
	<!--
		标签指定式选择器又称交集选择器,由俩个选择器构成,
		其中一个为标记选择器,第二个为class选择器或id选择器
	-->
	<style type="text/css">
		p{color: blue;}
		.special{color: green;font-size: 18px;}
		p.special{color: red;font-size: 16px;}
	</style>
</head>

<body>
	<p>通过标记选择器指定字体为蓝色的普通文本。</p>
	<h3 class="special">通过类选择器指定的标题文本,设置字号为18像素,颜色为绿色</h3>
	<p class="special">通过类选择器指定的标题文本,设置字号为16像素,颜色为红色</p>
</body>
</html>

2、后代选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
	<!--
		后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,
		内层标记写在后面，中间用空格分隔.
		当标记发生嵌套时,内层标记就成为外层标记的后代
		后代选择器可以添加多个元素,如需添加只需在元素之间加上空格即可
	-->
	<style type="text/css">
		p strong{color: red;font-size: 18px;}  /*后代选择器*/
		strong{ color: blue; font-style: italic;}
	</style>
</head>

<body>
	<p>这是一段在段落文本中<strong>嵌套strong标记定义的文本(红色).</strong></p>
	<strong>这是在嵌套之外由strong标记定义的又一段文本(蓝色).</strong>
</body>
</html>

3、并集选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
	<!--
		并集选择器是各个选择器通过逗号链接而成,任何形式的选择器(包括标记、class类、id选择器等)
		都可以作为并集选择器的一种。
		如果某些样式选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
	-->
	<style type="text/css">
		h2,h3,p{ font-size: 18px;}     /*不同标记组成的并集选择器*/
		h3,.special,#one{font-family: "微软雅黑";color: red;text-decoration: underline;} /*标记、类、id组成的并集选择器*/
	</style>
</head>

<body>
		<h2>二级标题,默认18像素文本效果.</h2>
		<h3>三级标题,显示楷体、红色、下划线效果.</h3>
		<p class="special">段落文本1,显示楷体、红色、下划线效果.</p>
		<p>段落文本2，默认18像素文本效果</p>
		<p id="one">段落文本3，显示楷体、红色、下划线效果.</p>
</body>
</html>

BlizCp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复合选择器

1、标签指定式选择器<!doctype html><html><head><meta charset="utf-8"><title>标签指定式选择器</title>  <style type="text/css"> p{color: blue;} ..
复制链接

扫一扫