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 ...
随机推荐
- kendoui-在线文本编辑器
文本编辑器用过很多,fckeditor是我之前用的最多的,但是问题也有很多,诸如安全问题,浏览器兼容问题..所以最近也一直在找替代产品,正好在研究kendo,所以就尝试了下kendo提供的edit控件 ...
- hadoop HDFS 写入吞吐量
最近一个项目 在大把大把的使用hadoop-HDFS,关于HDFS 的优势网上都快说烂了,这里不再说了,免得被.. 呵呵 废话少说,开整 1.场景描述: 服务器A 监听 服务器B分发任务socket. ...
- grep in linux
1.作用linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.grep全称是Global Regular Expression Print,表示全局正 ...
- Com进程通信(Delphi2007)
相关资料: 1.http://my.oschina.net/u/582827/blog/2847662.http://www.cnblogs.com/findumars/p/5277561.html3 ...
- Android实例-调用系统APP(XE10+小米2)
相关资料:群号383675978 实例源码: unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, Sys ...
- Test Spring el with ExpressionParser
Spring expression language (SpEL) supports many functionality, and you can test those expression fea ...
- delphi 窗口最大化后控件的大小变化怎么设置
设置按钮的Anchors属性.可以通过此属性设置其边界是否随父类一起变化.默认akleft+aktop即左边界和上边界随窗口变化,也就是说如果窗口位置移动了,按钮将保持其left和top边界与窗口的距 ...
- 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式(二)
本文转载自 http://blog.csdn.net/cutesource/article/details/6192145 下面再来看看Tomcat是如何使用NIO来构架Connector这块的. 先 ...
- php把时间格式化
如题,把如 2013-6-12 12:00 格式化为 2013-6--12 可以先将时间转换下,然后重新将时间格式化显示: echo date("Y-m-d", strtotime ...
- MFC 视图、文档、框架(通讯)
CMainFrame * pMainWnd=(CMainFrame*)AfxGetApp()->m_pMainWnd;//主框架 CChildFrame * pChild = (CChildFr ...