20, CSS 定义选择器
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 定义选择器的更多相关文章
- CSS定义选择器
ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- 用Less CSS定义常用的CSS3效果函数
定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS 包含选择器(九)
一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对 ...
随机推荐
- 微信小程序学习笔记(一)
1.新添加页面,找到app.json,在pages中加入写的路径会自动生成文件 2.页面跳转方式,传参数: wx.navigateTo({ url: '../home/home?title=' + a ...
- Java精确测量代码运行时间
Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- [Swift]LeetCode907. 子数组的最小值之和 | Sum of Subarray Minimums
Given an array of integers A, find the sum of min(B), where B ranges over every (contiguous) subarra ...
- Java中 Linux下安装Redis
1.连接上虚拟机之后,选择/usr/local目录,将redis-4.0.6.tar.gz放入/usr/local目录. 1.1:使用Xftp将redis-4.0.6.tar.gz放入/usr/loc ...
- PyPI可以使用的几个国内源
参考 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣(dou ...
- scala调用Linux命令行
在 scala 里面存在 调用 Linux 命令行的函数: import scala.sys.process._ 执行的方法也不难: import scala.sys.process._ /** * ...
- 1.MySQL(一)
数据库简介 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库 RDBMS 即关系数据库管理系统(Relational Database Management System) 1.特 ...
- Vue轻松入门,一起学起来！
我们创建一个项目,这个项目我们细说Vue. 一.如何在项目中添加模块 我们通过npm 进行 安装 模块. 首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装 ...
- 深入理解Spring IOC工作原理
为什么会出现spring,spring出现解决了什么问题? 1.分析普通多层架构存在的问题 JSP->Servlet->Service->Dao 层与层之间的依赖很强,属于耦合而且是 ...