返回顶部

CSS标签选择器&类选择器

基本选择器包括标签选择器、类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成

标签选择器


示例:

    <style type="text/css">
        p{
            font-size:12px;
            color:red;
         }
    </style>

类选择器

标签选择器虽然方便,但是也存在缺陷,因为每个标签选择器所定义的样式不仅仅影响某一个特定对象,而且会影响到页面中所有同名的标签。
类选择器可以为网页对象定义不同的样式类,实现不同元素拥有相同的样式、相同的元素拥有不同的样式。
类选择器以一个"."为前缀开头,让后跟随一个自定义的类名
如图:

示例1:

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			color: aqua;
		 }
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<p>问君能有几多愁,恰似一江春水向东流</p>
	<p>剪不断,理还乱,是离愁,别是一番滋味在心头</p>
	<p>独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p>
</body>
</html>

运行结果:

示例2:

示例3:

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			color: aqua;
		 }
		.font18px{font-size: 18px;}
		.underline{text-decoration: underline;}
		.italic{font-style: italic;}
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<p class="underline">问君能有几多愁,恰似一江春水向东流</p>
	<p class="font18px">剪不断,理还乱,是离愁,别是一番滋味在心头</p>
	<p class="italic">独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p>
</body>
</html


类选择器可以精确控制界面中的每一个对象样式,而不管这个对象属于是什么类型的标签,同一个类样式可以被多个对象引用,也不管这个对象是属于什么类型的标签。
通过类选择器指定的标签范围,能够更精确的控制页面元素的样式,避免类样式对于所有元素的影响。

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			color:brown;
		 }
		.font18px{font-size: 18px;}
		.underline{text-decoration: underline;}
		.italic{font-style: italic;}
		p.font18px{/*指定段落的类样式*/font-size: 24px;}
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<div class="font18px">问君能有几多愁,恰似一江春水向东流</div>
	<p class="font18px">剪不断,理还乱,是离愁,别是一番滋味在心头</p>
	<p class="italic">独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p>
</body>
</html>

posted @ 2019-11-24 15:28  violet-evergarden  阅读(3417)  评论(0编辑  收藏  举报