css笔记08：id选择器之父子选择器
1.父子选择器
（1）01.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" />
<title>选择器</title>
<link rel="stylesheet" href="my.css" type="text/css"/>
</head> <body>
你好，北京！
<span class="style1">新闻1</span>
<span class="style1">新闻2</span>
<span class="style1">新闻3</span>
<span class="style1">新闻4</span>
<span class="style1">新闻5</span>
<!--父子选择器使用-->
<span id="style2">这是一则<span>非常重要</span>的新闻</span><br />
<span id="style2">这是一则<span>非常<span>重要</span></span>的新闻</span><br /> <a href="#">goto sohu</a><br />
<a href="#">goto sina</a><br />
</body>
</html>
（2）my.css
@charset "utf-8";
/* CSS Document */ /*html的选择器*/
body {
color:orange;
} a:link {
color:black;
text-decoration:none;
} a:hover {
text-decoration:underline;
} a:visited {
color:red;
} /*.style1 就是类选择器*/
.style1 {
font-weight:bold;
font-size:20px;
background-color:pink;
color:black;
} /*#style2就是id选择器*/ #style2 {
font-size:30px;
background-color:silver;
color:black;
} /*#style2 span 就是父子选择器, #style2是父,span是子*/
#style2 span {
font-style:italic;
color:red;
} /*#style2 span 就是父子选择器, #style2是父,span是子,也包含层次关系*/
#style2 span span{
font-size:50px;
}
效果图：
总结：这里子选择器的标签是必须存在，就是<span>不能改成别的不存在的标记;这里#style2 span也包含层次关系，比如也可以写成#style2 span span
这样三层以上 很少使用。
父子选择器使用于id选择器和class选择器！！！
css笔记08：id选择器之父子选择器的更多相关文章
- 晨读笔记：CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- CSS选择器之基本选择器总结
一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...
- 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- jquery选择器之层级选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- html 选择器之属性选择器
属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
随机推荐
- angularJS笔记
1.MVC ng-app: html表头处,每个htnl文件只能有一个ng-app ng-controller :js文件中定义 ng-model:只要引用了angularJS就可以使用 js文件代码 ...
- 【Spark学习】Apache Spark for 第三方Hadoop分发版
Spark版本:1.1.1 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4137979.html
- HDU 5656 CA Loves GCD （数论DP）
CA Loves GCD 题目链接: http://acm.hust.edu.cn/vjudge/contest/123316#problem/B Description CA is a fine c ...
- [iOS基础控件 - 6.11.1] - 控制器 & 控制器view
A.控制器的创建 控制器常见的创建方式有以下几种通过storyboard创建 直接创建 ViewController *vc = [[ViewController alloc] init]; ...
- hdu2248
纷菲幻剑录 之 十年一剑 Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- POJ 3169 Layout (spfa+差分约束)
题目链接:http://poj.org/problem?id=3169 差分约束的解释:http://www.cnblogs.com/void/archive/2011/08/26/2153928.h ...
- hash_map vs unordered_map vs map vs unordered_set
hash_map vs unordered_map 这两个的内部结构都是采用哈希表来实现.unordered_map在C++11的时候被引入标准库了,而hash_map没有,所以建议还是使用unord ...
- 关于TCP主动关闭连接中的wait_timeout
首先我们先来回顾一下tcp关闭连接的过程: 假设A和B连接状态为EST,A需要主动关闭: A发送FIN给B,并将状态更改为FIN_WAIT1, B接收到FIN将状态更改为CLOSE_WAIT,并回复A ...
- cloudstack4.2+xenserver6.0.2 详细配置攻略
搭建一台安装了XenServer的服务器 搭建一台安装了CloudStack的服务器用以管理云平台 可以使用CloudStack云平台进行虚拟机管理 使用远程桌面访问windows虚拟机 由于最近实验 ...
- plsql developer导入导出数据库方法
导出步骤: 1 tools ->export user object 选择选项,导出.sql文件 2 tools ->export tables-> Oracle Export 选择 ...