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 ...
随机推荐
- Downloading the Google Cloud Storage Client Library
Google Cloud Storage client是一个客户端库,与任何一个生产环境使用的App Engine版本都相互独立.如果你想使用App Engine Development server ...
- 在WinForm编程中犯的一些错误
1.一直以为,MouseClick事件在鼠标点击时发生,MouseDoubleClick事件在鼠标双击时发生.那么在单击鼠标时会调用MouseClick事件处理程序,双击鼠标时会调用MouseDoub ...
- 实际例子描述和分析“猎豹抢票跨站推荐功能有票刷不到”的疑似bug
前言 快过年了,又到了一年抢票时.今年douba和douma计划要带着doudou回姥姥家.昨天在家用抢票软件居然发现了一个bug,那就是在猎豹抢票中跨站推荐的车票几天里一直是没有,但是在12306手 ...
- openstack配置增加
控制节点nova配置增加 vif_plugging_is_fatal = Falsevif_plugging_timeout = 0scheduler_default_filters = AllHos ...
- linux 下终端复用软件推荐——tmux
使用过些linux终端,比如Tilda.Terminator. 之前最经常用的是Terminator,其可以上下左右分屏,比较方便,但其有个缺点是经常无故崩溃. 后来遇到Tmux,根据网上的设置配置了 ...
- iOS 中的UIWindow
使用Xcode新建一个工程后,Xcode会自动新建一些文件,其中有AppDelegate.h,AppDelegate.m,ViewController.h,ViewController.m,Main. ...
- 基于 Paramiko 的 SSH 通讯类
# -*- coding: UTF-8 -*-import paramikoimport time################################################### ...
- Minesweeper PC/UVa IDs: 110102/10189, Popularity: A,Success rate: high Level: 1
#include<cstdio> #include<iostream> #include<string> #include<algorithm> #in ...
- PostgreSQL的initdb 源代码分析之五
接前面,继续分析: putenv("TZ=GMT") 设置了时区信息. find_other_exec(argv[0], "postgres", PG_BACK ...
- DuiLib（四）——控件绘制
duilib的所有控件均绘制在唯一的真实窗口之中,本篇就具体看下这个绘制的过程.所有的绘制过程均在WM_PAINT消息处理过程中完成.由窗口及消息篇可以看到,窗口消息处理最终流到了CPaintMana ...