CSS选择器(二)

本文介绍了CSS中的派生选择器、后代选择器、属性选择器等关键概念及其使用方法,通过实例展示了如何精确控制页面样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 派生选择器(或后代选择器)。
派生选择器用于选取元素内部的元素。

实例

选择并设置位于 <div> 元素内部的每个 <p> 元素的样式:

  1. div  p

  2. background-color:yellow;
  3. }
复制代码

网页中常用的标签种类不是很多,而一个标签可能会被用在网页的各个地方,并且标签选择器的范围一般是比较大的,而使用类别比较麻烦。那如何给网页中不同位置的同一个标签定义不同样式?例如美食网中左侧列表与右侧列表不同。
例5:
定义方法:
  1. #left ul{}
  2. #right ul{}
复制代码


  • 指定标签。
加强标签选择器的精确度。
如h1.abc{}表示针对所有引用class=abc的h1进行定义,注意区别于h1 .abc

实例

为.red类,指定a标签。

  1. <font face="微软雅黑">a.red{color:red;}
  2. <a href="#" class="red">红字</a><!--红色-->
  3. <b  class="red">红字</b><!--无效,因为.red指定了a标签--></font>
复制代码


  • 通配选择器。
可以使用模糊指定的方式来对对象进行选择。

* 选择器选取所有元素。

* 选择器也能选取另一个元素中的所有元素:

如#content *{ font-size:14px} 指#content下的所有子元素字体大小都为14px;
如*{ color:#ff0000}表示,所有的HTML标签内的文字颜色都为红色。

  • 子选择器。

用于选取带有特定父元素的元素。

*注释:如果元素不是父元素的直接子元素,则不会被选择。<=IE6不支持


实例

选取父元素是 <div> 元素的每个 <p> 元素,并设置其背景色:

  1. div>p

  2. background-color:yellow;
  3. }
复制代码

  • 属性选择器。

依据标签属性来选择标签元素,<=IE6不支持

实例


  1. HTML:
  2. <h1>标题</h1>
  3. <h1 title="head">标题</h1>
  4. <h1 title="head2" align="center">标题</h1>
复制代码
  1. CSS:
  2. h1[title]{color:red}/*第二个第三个h1字体为红色*/
  3. h1[title="head"]{color:green}/*第二个h1字体为绿色*/
  4. h1[title="head2"][align="center"]{color:blue}/*第三个h1字体为蓝色*/
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值