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结构中第一个对象能够包含第二个对 ...
随机推荐
- python语法_模块_time_datetime_random
模块:可以被公共调用的. time import time print(time.time()) 时间戳方式显示时间. time.sleep(3) 休眠3秒 time.clock() 计算cpu执行时 ...
- 使用bind提供域名解析服务搭建
正向解析实验 1.安装bind服务 2．在/etc目录中找到该服务程序的主配置文件,然后把第11行和第17行的地址均修改为any 3.正向解析参数如下: 4.编辑数据配置文件,从/var/named目 ...
- 【RL-TCPnet网络教程】第20章 RL-TCPnet之BSD Socket客户端
第20章 RL-TCPnet之BSD Socket客户端 本章节为大家讲解RL-TCPnet的BSD Socket,学习本章节前,务必要优先学习第18章的Socket基础知识.有了这些基础知 ...
- Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- [Swift]LeetCode593. 有效的正方形 | Valid Square
Given the coordinates of four points in 2D space, return whether the four points could construct a s ...
- [Swift]LeetCode743. 网络延迟时间 | Network Delay Time
There are N network nodes, labelled 1 to N. Given times, a list of travel times as directededges tim ...
- Python基础综合运用——搭建名片管理系统
综合应用 —— 名片管理系统 目标 综合应用已经学习过的知识点: 变量 流程控制 函数 模块 开发 名片管理系统 系统需求 程序启动,显示名片管理系统欢迎界面,并显示功能菜单 ************ ...
- 【Storm篇】--Storm并发机制
一.前述 为了提高Storm的并行能力,通常需要设置并行. 二.具体原理 1. Storm并行分为几个方面: Worker – 进程一个Topology拓扑会包含一个或多个Worker(每个Worke ...
- qt 窗口鼠标穿透
Qt 不规则窗体 – 鼠标点击穿透 qt实现鼠标穿透,如果要被穿透窗口只有一层,也即没有嵌套窗口,直接只用对子窗口使用setAttribute (Qt::WA_TransparentForMouseE ...
- 从零开始学习PYTHON3讲义（三）写第一个程序
<从零开始PYTHON3>第三讲 本页面使用了公式插件,因博客主机过滤无法显示的表示抱歉,并建议至个人主页查看原文. 我见过很多初学者,提到编程都有一种恐惧感,起源是感觉编程太难了.其 ...