css笔记08:id选择器之父子选择器
2015-07-06 11:04
666 查看
1.父子选择器
(1)01.html
(2)my.css
效果图:
总结:这里子选择器的标签是必须存在,就是<span>不能改成别的不存在的标记;这里#style2 span也包含层次关系,比如也可以写成#style2 span span
这样三层以上 很少使用。
父子选择器使用于id选择器和class选择器!!!
(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中的颜色及长度
- css字体属性(font)
- Google HTML/CSS代码风格指南(中文版)
- CSS属性选择器
- css笔记07:通配符选择器
- css积累
- css3 图片翻转效果
- CSS3实现10种Loading效果
- CSS 去除图片上下的间距或者间隙
- 2天驾驭DIV+CSS (技巧篇)(转)
- CSS:谈谈栅格布局
- Css 解决各种兼容问题
- CSS笔记1
- scss 在mac下编译
- Emmet:HTML/CSS代码快速编写器
- 详解CSS选择器、优先级与匹配原理
- (七十)Xcode5及以上对于状态栏和导航栏样式的设定方法
- (七十)Xcode5及以上对于状态栏和导航栏样式的设定方法
- Selenium_WebDriver登录模拟鼠标移动切换窗口等操作练习(cssSelector初练手)_Java
- IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表