1. ID 与类

2. 层叠

3. 分组

4. 继承

5. 上下文选择器

6. 子类选择器

7. 其他选择器

8. 结构与注释

20.1 ID 与类

选择器是用于控制页面设计的样式.即 ID 选择器何类选择器.

一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简

单的认为是一个代替另一个.这种认知是及其错误的.

(1). 应用 ID

每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只

用于页面的唯一元素,如页眉,主导航条 , 布局区块等.

示例:<p id=”hightlight”>This paragraph has red text.</p>

相应的 CSS 代码:

#hightlight{

color:#FFFFFF;

}

(2). 将  ID 与选择器结合

/*适合所有 h2 标题*/

h2{

color:#333;

font-size:16px;

}

/*只适合 title 的 h2 标题*/

h2#title {

color:#eee;

}

相应的 XHTML 代码:<h2>Title Of My Article</h2>

<h2 id=”title”>Title Of My Article</h2>

(3).ID 的使用场合

对于每个 ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存

在并仅使用一次的元素不保留,

(4). 避免使用  ID 的场合

当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.

(5). 应用类

类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.

<p class=”hightlight”>his paragraph has red text.</p>

相关 CSS 代码:

.hightlight {

color:FFFFFF;

}

(6). 结合多个类和  ID

范例:

<ul id=”drinks”>

<li class=”mix”>Beer</li>

<li class=”mix”>Spirtis</li>

<li class=”hot”>Cola</li>

<li class=”hot”>Lemonade</li>

</ul>

相应的 CSS 代码:

ul#drinks {

color:FF6600;

}

.mix {

Color:#999999;

}

.hot {

Color:#333333;

}

(7). 利用类改写基本样式: : : :

p{

Color:#ff6600;

}

.bleached {

Color:#ccc;

}

相应的 XHTML 代码:

<p>This paragraph has red text.</p>

<p class=”bleached”>This paragraph has red text.</p>

(8). 直接将类链接到元素上

p.bleached {

color:red;

}

相应的 XHTML 代码:

<p class=”bleached”>This paragraph has red text.</p>

(9). 避免 , , , , 适合

对于 class,如果多次重复使用或者使用子类选择器，那么就选择 class，如果是定义

唯一性的标记，比如布局，那么用 id。

2 20.2  层叠

(1).外部链接实现层叠

<link rel=”stylesheet” type=”text/css” href=”css/one.css”>

<link rel=”stylesheet” type=”text/css” href=”css/two.css”>

<link rel=”stylesheet” type=”text/css” href=”css/three.css”>

(2).导入样式实现层叠

@import url(“one.css”)

@import url(“two.css”)

@import url(“three.css”)

注意点:必须牢记一个规则,越晚给的规则越重要.

3 20.3  分组

h1{

Font-family:隶书,宋体,楷体;

Line-height: 140%;

Color:#333;

}

h2{

Font-family:隶书,宋体,楷体;

Line-height: 140%;

Color:#333;

}

h3{

Font-family:隶书,宋体,楷体;

Line-height: 140%;

Color:#333;

}

/*分组后*/

h1,h2.h3{

Font-family:隶书,宋体,楷体;

Line-height: 140%;

Color:#333;

}

/*分组例外*/

h1{

Font-style:italic;

}

4 20.4  继承

h1 {

Color:#333;

}

<h1>This is thegreatest heading <i>in the world</i></h1>

从 BODY 继承

Body {

Margin:10px;

Font-family:隶书;

Background:#000;

Color:#fff;

} } } }

5 20.5  上下文选择器

h1{

Color: #ccc;

}

i {

Color:#000;

}

/*使用上下文选择器*/

h1 I {

Color:#000;

}

6 20.6  子类选择器

.box {

color:red;

}

.box1 {

font-weight:bold;

}

.box2 {

font-style:italic;

}

<div class="box">Box</div>

<div class="box box1">Box1</div>

<div class="box box2">Box2</div>

7 20.7  其他选择器

(1).类型选择器

p{color:black;}

a{text-decoration:underline;}

h1{font-weight:bold;}

(2).后代选择器

h2 i{

color:red;

}

li a{

text-decoration:none;

}

#main h1{

Color:red;

}

(3).伪类

a:link{color:blue;}

a:visited{color:green;}

a:hover,a:active{color:red;}

input:focus{background-color:yellow;}

(4).通用选择器

*{

Padding:0;

Margin:0;

}

(5).高级选择器

高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避

免使用这些高级选择器.

1.子选择器和相邻同胞选择器

子选择器

#nav > li {background:url(bg.gif) no-repeat left top;}

<ul id="nav">

<li>Home</li>

<li>Server

<ul>

<li>Development</li>

<li>Consultancy</li>

</ul>

</li>

<li>Contact Us</li>

</ul>

相邻同胞选择器:

h1+p{font-weight:bold;}

<h1>Main Heading</h1>

<p>First Paragraph</p>

<p>Second Paragraph</p>

2.属性选择器

<strong title=”Cascading Style Sheets”>CSS</strong>

strong[title] {border-bottom: 1px dotted #999;}

strong[title]:hover {cursor:help;background:#ccc}

8 20.8  代码注释与结构

/*body styles*/

body {

Font-size:67.5%;

}

1.添加结构性注释

/*---------------------------------------------------

Version: 1.1

Author: andy budd

Email:info@andybudd.com

Website:http:www.andybudd.com

-----------------------------------------------------*/

2.自我提示

/*

Use the star selector hack to give IEa different font size

http://www.info.co.ph

*/

布局结构：使用有意义的标记。

表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加

空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我

们可以使用 DIV+CSS 来控制布局.

11应用 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" />

<title>无标题文档</title>

<style type="text/css">

	#title{

		color: red;

	}

</style>

</head>

<body>

<p id="title">定义选择器</p>

<p id="title">定义选择器</p>

</body>

</html>

　　21 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" />

<title>无标题文档</title>

<style type="text/css">

p#title{

		color:blue;

	}

h2#title{

		color:red;

	}

</style>

</head>

<body>

<h2> ID 与选择器结合</h2>

<h2 id="title"> 柳志军同学</h2>

<p id="title"> 柳志军同学</p>

</body>

</html>

　　22 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" />

<title>无标题文档</title>

<style type="text/css">

p.title{

		color:blue;

	}

h2.title{

		color:red;

	}

</style>

</head>

<body>

<h2> ID 与选择器结合</h2>

<h2 class="title"> 柳志军同学</h2>

<p class="title"> 柳志军同学</p>

</body>

</html>

　　23 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" />

<title>无标题文档</title>

<style type="text/css">

.php{

		color:red;

	}

</style>

</head>

<body>

<p class="php"> 柳志军同学</p>

<p class="php"> 柳志军同学</p>

<p class="php"> 柳志军同学</p>

<p class="php"> 柳志军同学</p>

</body>

</html>

　　24 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" />

<title>无标题文档</title>

<style type="text/css">

#drinks{

		line-height: 200%;

		color: red;

	}

	.mix{

		font-size: 14px;

	}

	.hot{

		font-size: 20px;

	}

</style>

</head>

<body>

<ul id="drinks">

<li class="mix"> 啤酒</li>

<li class="mix"> 可乐</li>

<li class="hot"> 红茶</li>

<li class="hot"> 绿茶</li>

</ul>

</body>

</html>

　　25 上下文选择器

<!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" />

<title>无标题文档</title>

<style type="text/css">

h1 i{

		color:green;

	}

h1#sina i{

		color:yellow;

	}

h1#baidu i{

		color:blue;

	}

</style>

</head>

<body>

<h1>上下文选择器<i>部分</i>按时打算</h1>

<h1 id="sina">上下文选择器<i>部分</i>按时打算</h1>

<h1 id="baidu">上下文选择器<i>部分</i>按时打算</h1>

</ul>

</body>

</html>

　　26 子类选择器

<!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" />

<title>子类选择器</title>

<style type="text/css">

	div.box{

		color:red;

	}

		div.box1{

		font-weight: bold;

	}

	div.box2{

		font-style: italic;

	}

		div.box3{

		font-size: 30px;

	}

</style>

</head>

<body>

<div class="box">子类选择器</div>

<div class="box box1 ">子类选择器</div>

<div class="box box2 box3">子类选择器</div>

</ul>

</body>

</html>

　　27高级选择器

<!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" />

<title>子类选择器</title>

<style type="text/css">/*下面是正文*/

	ul#nav{

		list-style-type: none;

	}

	ul#nav li{

		background: url(images/7.png) no-repeat left center;padding-left: 45px;

	}

</style>

</head>

<body>

/*下面是正文*/

<ul id="nav">

	<li>高级选择器</li>

	<li>高级选择器</li>

	<li>高级选择器</li>

</ul>

</body>

</html>

　　

20, CSS 定义选择器的更多相关文章

  1. CSS定义选择器

    ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或 ...

  2. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  3. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  4. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  5. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  6. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  7. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  8. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  9. CSS 包含选择器(九)

    一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对 ...

随机推荐

  1. 实战深度学习（上）OpenCV库

    在如今人工智能的浪潮下,无数模拟机器学习和深度学习的开发者工具倍出,其中在计算机图形学和计算机视觉里面最流行的一个库就是OpenCV库了.计算机图形学和计算机视觉学在我们的自动驾驶和仿生机器人当中有着 ...

  2. idea Empty git --version output:解决

    在使用idea下的git时候发现报错 但看了一下我的git-bas位置确实没有错啊,也可以启动 后来google了才下发现原来idea的这个地方不用引用的git-bash.exe的路径,而是git.e ...

  3. 文末福利丨i春秋互联网安全校园行第1站精彩回顾

    活动背景 为响应国家完善网络安全人才培养体系.推动网络安全教育的号召,i春秋特此发起“互联网安全校园行”系列活动.旨在通过活动和知识普及提升大学生信息安全意识,并通过线下交流.技能分享.安全小活动以及 ...

  4. 吴恩达机器学习笔记57-基于内容的推荐系统（Content Based Recommendations）

    假使我们是一个电影供应商,我们有 5 部电影和 4 个用户,我们要求用户为电影打分. 前三部电影是爱情片,后两部则是动作片,我们可以看出Alice 和Bob 似乎更倾向与爱情片, 而 Carol 和 ...

  5. [Swift]LeetCode1012. 至少有 1 位重复的数字 | Numbers With 1 Repeated Digit

    Given a positive integer N, return the number of positive integers less than or equal to N that have ...

  6. Vue入门手册整理

    目录 第一章.环境搭建 第二章.目录结构 第三章.Vue调试 第四章.定义页面 附录资料 第一章.环境搭建 1.1.准备: npm: 6.9.0 (npm > 3.0) node: v10.15 ...

  7. MySQL开启远程连接权限

    对于我们刚开始安装的mysql或者mariadb来说,默认是不开启远程连接的.所以需要我们手动开启远程连接的权限.如果你是使用docker安装mysql那需要先进入容器中,这里就不讲如何进入容器了,百 ...

  8. Java面试题：小白不得不懂的斐波那契数列

    很长一段时间里,我都非常疑惑:“我写的技术文章不差啊,有内容的同时还很有趣,不至于每篇只有区区几十个人读啊?为什么有些内容简单到只有一行注册码的文章浏览量反而轻松破万?”这样的疑惑如鲠在喉啊!写技术博 ...

  9. 【Docker】(4）搭建私有镜像仓库

    [Docker](4)搭建私有镜像仓库 说明 1. 这里是通过阿里云,搭建Docker私有镜像仓库. 2. 这里打包的镜像是从官网拉下来的,并不是自己项目创建的新镜像,主要测试功能 一.搭建过程 首先 ...

  10. 编译安装mysql5.7.24踩的坑

    1.报错如下:CMake Error at cmake/boost.cmake:76 (MESSAGE):  You can download it with -DDOWNLOAD_BOOST=1 - ...