CSS学习(八)——定义选择器

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{}

时间: 2024-07-29 12:45:11

CSS学习(八)——定义选择器的相关文章

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value

CSS学习笔记(1):选择器

一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> &

08.css学习-伪类选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/* 伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的(a表示对a标签作用). 注意: 1. a:hover 必须被置于 a:link 和 a:visited 之后 2. a:active 必须被置于 a:hover 之后 */ a:link{color:#F00} /* 没有被点

css学习_css复合选择器

css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器(可以选择到所以的子孙后代 :中间用空格隔开) .class h3{color:red} d.子元素选择器(中间用 大括号  >; 选的是儿子,孙子啥的不算) div>span{color:red;} e.属性选择器(用中括号表示) a[title]{color:red;} input[type=

前端学习(14)~css学习(八):定位属性

CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 相对定位 相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调). 格式: position: relative; left: 50px; top: 50px; 相对定位的举例: <!do

css学习笔记——属性选择器

本笔记参考资料来自——妙味课堂 [attribute]只使用属性名,但没有确定任何属性值 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

20, CSS 定义选择器

1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的. (1). 应用 ID 每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条 ,

CSS学习(2)Id和Class选择器

id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用. class 选择器 class 选择器用于描述一组元素的样式,clas