六、子选择器

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ </style>
</head>
<body>
<p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>

子选择器

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

如代码编辑器中的代码:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

来试试,把文字内容的“我还是一个胆小如鼠的小女孩”这一句话加入红色边框。效果图如下:

在代码编辑器的第8行输入代码:

.first>span{border:1px solid red;}

因为这是边框样式的缩写形式,他们是一个整体,所以在整体后面(也就是red后)加一个分号即可。。
border:1px solid red;
相当于
border-width:1px; //边框宽度
border-style:solid; //边框风格
border-color:red; //边框颜色 >这个“选择指定标签元素的第一代子元素”就是让样式只作用于它的孩子,不作用于他的孙子。 像案例里面“<p class="first"><span>我还是一个<span>胆小如鼠</span>的小女孩</span></p>”外面的span才是“p class="first"”的孩子, “<span>胆小如鼠</span>”虽然用是span包的,但它是“p class="first"”的孙子, 它包在前一个span的里面(就是它孩子的里面),所以样式对它不起作用。 如果把“>”改为空格,就会发现两个span都有边框了。空格用于元素的所有后代的。 空格是适用于所有对应元素,而>则是适用于下一代,并且可以连续使用,即.first>span>span 感觉如果将编程比喻成一场战争,而不同的语言就是代表不同的兵种,兵种之下就是一群有着自己个性的士兵, 我们学习的html和css还有js就是三个不同的兵种了,它们的标签语言代表了一群有着不同个性的士兵, 现在我们作为统帅,要学会的就是让他们之间相互配合,接着就是不同兵种不同个性的士兵需要我们去沟通用不同的方式去和他们交流, 随着时间的前进,这些沟通的方式演变成了不同的套路,而我们现在要学会的就是使用这些套路去让它们帮我们赢得战争,如此而已! 如果将我们比作统帅,选择器就是发布命令的方法,作为统帅当然是希望将命令发布到每个士兵(标签)手中, 让他们能够按照我们的命令去执行任务,所以才会有这么多的选择器,让统帅的命令通过选择器进行不同范围的发布。要发布命令的范围大小取决去你使用的选择器哦。

七、包含(后代)选择器

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;} .food>li{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
</style>
</head>
<body>
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul> </body>
</html>

包含(后代)选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如代码编辑器中的代码:

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,

或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。

后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

来试一试:修改一下代码

把代码编辑器中第9行代码修改一下:

.food>li修改为.food li看一下效果。

总结一下:类选择器,ID选择器的区别,是类选择器使用无数次,而id选择器只使用一次,

子选择器是指第一个后代,,而后代选择器是包含所有后代,

包含选择器用空格,而子选择器用>。

八、通用选择器

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red;} </style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,

如使用下面代码使html中任意标签元素字体颜色全部设置为红色:

* {color:red;}

来试试,把代码编辑器中的标题“勇气”和两段文字的字号都设置为20px

1.在编辑器的第7行,把* {color:red;}代码删除

2.在编辑器的第7行,输入*{font-size:20px;}

九、伪类选择符

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{
color:red; }
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时,我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,

比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。

这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符:

到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了

(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。

其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

来试试,为代码编辑器中第一段文字“胆小如鼠”加入鼠标滑过文字字号设置为20px。

你是否输入像下面的代码:

a:hover

{color:red;

font-size:20px;

}

标签选择器,标签名{},作用于所有标签。

类选择器, .class{},在标签内定义class="",属图形结构。

ID选择器,#ID{}, 在标签内定义id="",有严格的一一对应关系。

子选择器, .span>li{},作用于父元素span类下一层的li标签。

包含选择器,.span li{},作用于父元素span下所有li标签。

通用选择器,*{},匹配所有html的标签元素。
伪类选择符:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。 a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
first-child 仅支持IE

十、分组选择符

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

分组选择符

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}

它相当于下面两行代码:

h1{color:red;}
span{color:red;}

来试试

1、把代码编辑器中的第一段全部文字颜色设置为绿色同时把第二段文字中的“简单”文字颜色设置为绿色

1.在编辑器的第7行,删除h1,span{color:red;}这一行以前的代码。

2.在编辑器的第7行,输入下面代码:

.first,#second span{color:green;}

.first是一个选择器,将整个first累都设置成绿色
#second span 是第二个选择器,将ID为second的元素下的所有后代span元素设为绿色
通过分组选择符(,)将两个选择器压缩为一组 用到了id选择器和类选择器及包含选择器

从零开始学习html(八)CSS选择器——下的更多相关文章

  1. 【前端学习】【CSS选择器】

    CSS选择器     CSS选择器 CSS(Cascading Style Sheets)是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择器能轻松地对某个元素添加样式而不改动HTM ...

  2. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  4. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  5. Html学习之八(CSS选择器的使用--属性选择器)

    一.前缀属性选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 从零开始学习jQuery (八) 插播:jQuery实施方案

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播,  用于介绍我在本公司的j ...

  7. Html学习之七(CSS选择器的使用--基础选择器优先级问题)

    二.基础选择器的综合使用 优先级顺序:id选择器>class选择器>元素选择器.也就是说,如果这三种选择器同时为某一个元素设定样式,那么冲突的部分按优先级的顺序依次决定. <!DOC ...

  8. 前端学习(三)css选择器(笔记)

    字体样式:    color:red:    font-size:12px:    font-weight:bold/normal;    font-style:italic/normal;    f ...

  9. Html学习之六(CSS选择器的使用--基础选择器的使用)

    一.基础选择器 1.id选择器 2.class选择器 3.元素选择器 <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. WPF 开机注册自启动及设置确保以管理员运行

    最近用到开机自启动设置,在此记录下设置自启动的步骤,如果对各位有需要可以借阅,之前设置管理权限解释在创建解决方案是将VS以管理员方式打开,这种方法可以实现,但是个人还是偏向与本文的方式,不多说啥了,下 ...

  2. Linux下Clamav 杀毒软件安装使用文档

    一.安装Clamav杀毒工具 0.安装Clamav需要的依赖包 yum install libxml* openssl* -y 1.创建clamav组 groupadd clamav 2.创建clam ...

  3. MarkDown基础语法记录

    基础语法记录,其中有一些博客园暂不支持 <!--标题--> # 一级标题 # ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 一级标题 ...

  4. JavaScript防篡改对象

    不可扩展对象 默认情况下,所有对象都是可扩展的,使用Object.preventExtensions()方法可以改变这一行为. var person = { name: "Hiram&quo ...

  5. C语言函数部分

    一.变量的作用域 1.概念:变量起作用的范围. 2.局部变量与全局变量: ①局部变量: 概念:在函数内部或某个控制块的内部定义的变量(理解“局部”) 作用域:函数内部 作用:增强了函数模块的独立性 ② ...

  6. FastDFS单节点安装

    百度百科:https://baike.baidu.com/item/fastdfs/5609710?fr=aladdin 相关软件包: 链接:https://pan.baidu.com/s/11nO2 ...

  7. REX:EOS资源租赁平台详解

    关键字:REX,资源交易,资源租赁,系统费用,bancor,成熟期,EOS,eosio.system,voting EOSIO 智能合约在v1.6.0版本增加了一个system合约使用的例子,可提供E ...

  8. leetcode — remove-nth-node-from-end-of-list

    /** * Source : https://oj.leetcode.com/problems/remove-nth-node-from-end-of-list/ * * Created by lve ...

  9. php使用memcached缓存总结

    1. 查询多行记录,以sql的md5值为key,缓存数组(个人觉得最好用的方法) $mem = new Memcache(); $mem->connect('127.0.0.1',11211); ...

  10. python的Web框架,会话保持及Form表单

    会话 从打开浏览器访问到关闭浏览器,这就是一次会话. cookie 技术 cookie是保存在浏览器的,安全度比较低. # 设置cookie范式,在view中设置 def index(request) ...