CSS学习（八）——定义选择器

最新推荐文章于 2024-03-12 20:43:39 发布

交易程序猿

最新推荐文章于 2024-03-12 20:43:39 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/codemonkeysama/article/details/51339545

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ID定义型与class定义型排版样式

(1) 对于ID定义型，每个ID在页面中只能用一次。尽管一个ID在页面内多次使用也能实现效果，但是这样写不规范。如果同一个样式页面内多次使用，应该用class定义型。

(2) ID可与标记定义型结合使用，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		h2#title{color:red;}
	</style>
<title>定义选择器</title>
</head>
<body>
	<h2 id="title">能实现效果</h2>
	<p id="title">无法实现效果</p>
</body>

上面例子中，h2#title的意思是只有应用于属性名称h2的title才起效果。

(3) class定义型可以与ID定义型混合使用，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		ul#list{color:red;}
		.style1{color:blue;}
		.style2{color:green;}
	</style>
<title>定义选择器</title>
</head>
<body>
  <ul id="list">
  	<li class="style1">类目一</li>
  	<li class="style2">类目二</li>
  	<li>类目三</li>
  </ul>
</body>

(4) class定义型也可以与标记定义型结合使用。例如，CSS代码：p.style{color:red;} HTML代码：<p class="style">定义型混用</p>

类似地，如果将.style应用于其他属性名称，例如<div class="style">定义型混用</div> 这里的.style是不起作用的。

(5) class定义型支持同时引用多种样式，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.setting{color:red;}
	.setting1{font-size:40px;}
	.setting2{font-style:italic;}
</style>
<title>定义选择器</title>
</head>
<body>
  <p class="setting setting1">定义选择器学习</p>
  <p class="setting setting2">定义选择器复习</p>
</body>

层叠

当使用外部排版样式时，如果同个html文档中引用多个层叠样式表文档，且层叠样式表的内容优先级一样，则位置越靠下的文档优先级越高。也即多个层叠样式表文档的属性设定值发生冲突时，以位置靠下的文档的内容为准。例子：

第一个层叠样式表文档，标题：css1.css

p{color:red;font-size:50px;font_weight:bold}

第二个层叠样式表文档，标题：css2.css

p{color:green;font-size:50px;font_weight:bold}

HTML文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css1.css" />
<link rel="stylesheet" type="text/css" href="css2.css" />
<title>定义选择器</title>
</head>
<body>
  <p>层叠样式</p>
</body>

因为css2.css在css1.css的下方，因此文档内容的颜色会设置为绿色。

分组

在使用行内、class、ID或混用的的定义型时，如果多个属性的设定值相同，则可以将它们写在一起。例如：<style type="text/css">h1,h2,h3{color:red;font-size:50px;}</style>

如果其中某一个或某几个存在不同的设定值，可以再单独写出来。

上下文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	p i{color:red;font-size:50px;}
	div i{color:green;font-size:40px;}
</style>
<title>定义选择器</title>
</head>
<body>
  <p>定义选择器<i>学习</i></p>
  <div>定义选择器<i>复习</i></div>
</body>

在这段代码中，p i{}和div i{}中分别定义了<p></p>和<div></div>中标记<i></i>的属性设定值。这样写的效果是不同的标记内的<i>标记赋予了不同的属性，比较简洁。注意，如果要设定标记<p></p>和<div></div>的属性，需要另外再写。

这个功能同样支持在标记定义型与ID（或class）定义型混用时使用。比如：p#setting i{}