后代选择器与子选择器

一:后代选择器

<!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>
  <title> style</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">
p span,h1 span,.test ul li{color:red;}
</style>
 </head>
 <body>
<h1><span>花千骨</span>大结局</h1>
<div class="test">
<ul><li>OK</li></ul>
<ul><li>OK</li></ul>
<ul><li>OK</li></ul>
<ul><li>OK</li></ul>
</div>
<ul><li>OK</li></ul>

<p>人间帝王轩辕郎、无所不知所不能东方彧卿(其实他就是超脱六界之外的异朽君)、妖魔两界圣君杀阡陌那时都是爱花千骨的,都希望白子画能够善待花千骨。
</p>

<p>白子画的善待是八十一根消魂钉,普通仙一根消魂钉就死去活来。花千骨受了17根,又被白子画用断念剑看了近百剑,<span>花千骨心里那个痛苦不言而喻</span>。而后,花千骨扔到地牢。白子画替她承受了剩下的消魂钉。
<b><span>白子画</span></b>在霓漫天的告知下,白子画的师兄摩严得知花千骨居然悖逆天理爱上白子画,用绝情水泼到花千骨的喉咙里,脸上,于是花千骨又瞎又哑又毁容,被发配到了几乎不可能走出来的蛮荒之地。
</p>
<span>花千骨又瞎又哑又毁容</span>
 </body>

</html>

后代选择器
p空格span{color:red;}
含义:针对p标签中的span标签定义样式。
注意:选择器之间用空格隔开。


二:子选择器

子元素选择器
定义的方法
P>span {CSS规则}
只针会p标签中的span一级有效。

<!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>
  <title> style</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">
p > span{color:red;}
.class > b{color: blue;font-size: 30px}
</style>
 </head>
 <body>
<p class="class"> <b>人间帝王轩辕郎</b>、无所不知所不能东方彧卿(其实他就是超脱六界之外的异朽君)、妖魔两界圣君杀阡陌那时都是爱花千骨的,都希望白子画能够善待花千骨。
</p>

<p>白子画的善待是八十一根消魂钉,普通仙一根消魂钉就死去活来。花千骨受了17根,又被<span>白子画用断念剑看了近百剑</span>,花千骨心里那个痛苦不言而喻。而后,花千骨扔到地牢。白子画替她承受了剩下的消魂钉。
<b><span>白子画</span></b>
在霓漫天的告知下,白子画的师兄摩严得知花千骨居然悖逆天理爱上白子画,用绝情水泼到花千骨的喉咙里,脸上,于是花千骨又瞎又哑又毁容,被发配到了几乎不可能走出来的蛮荒之地。
</p>

<span>花千骨又瞎又哑又毁容</span>
 </body>

</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值