与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。

子元素选择器使用大于号">"做为连接符。

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器

子元素选择器语法

element>element{属性:值;}

例如:

div>p{

background-color:yellow;

}

父元素与子元素必须用>隔开,从而表示选中某个元素下的子元素

子元素选择器实例

div>p{

background-color:yellow;

}

Welcome to My Homepage

My name is Donald

I live in Duckburg.

I will not be styled.

My best friend is Mickey.

div>p表示选中div元素下的直接P元素,实例中满足这一要求的只有

I live in Duckburg.

这一个元素。

可能有人会问

I will not be styled.

这个P元素也在div元素里面啊,为什么没有被选中,因为这个元素是div的后代元素(在这里P相当于是div元素的孙子辈,而不是儿子辈),并不是div的子元素。所以大家要明白什么是后代元素和子元素。

后代元素:后代元素是指包含在自定元素里面的所有元素,这里要特别注意,是有所的元素。

子元素:子元素是指某一元素的儿子元素,他们之间只有一代的关系,多代关系不能算子元素。

css直接子元素怎么用,CSS 子元素选择器使用实例相关推荐

  1. html如何更改子元素文字颜色,CSS更改父级悬停上的子元素字体颜色

    我试图让它如此:当将鼠标悬停在td上时,跨度内部变为白色,并且td的背景变为蓝色.但是,没有一个类似的问题似乎对我有帮助.表例如CSS更改父级悬停上的子元素字体颜色 第一行: Account Hold ...

  2. js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置?,css,前端 - phpStudy...

    父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构 如图img加上float 子元素div显示正常. 不加float div显 ...

  3. 父元素没有高度,子元素高度失效

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  4. 父元素开启相对定位而子元素开启绝对定位问题

    在写css样式时,发现总是用到各种定位,其中父元素开启相对定位而子元素开启绝对定位这个问题弄明没白. 借鉴大佬的博客: https://blog.csdn.net/weixin_41796631/ar ...

  5. js基础知识(二十五)--DOM查询的其他方法、获取元素的后代和子元素

    一.DOM查询的其他方法 在document提供了一些直接获取元素的方法 document.body获取到页面的body元素 document.documentElement获取页面html中的根元素 ...

  6. 浅谈设置父元素透明度不影响子元素透明度

    浅谈设置父元素透明度不影响子元素透明度 筱葭 2017-03-15 10:50:00  11970  收藏 2 展开 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素o ...

  7. CSS中如何设置父元素透明度不影响子元素透明度

    css中经常会遇到设置了父元素的透明度,后会直接影响到子元素的透明度. 例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明 ...

  8. 【CSS篇】父元素设置min-height,子元素height 100%失效问题

    问题描述 当父元素设置了min-height后,子元素设置height为100%,发现子元素的height 100%失效,即无法根据父级的高度自适应,而是根据自身内部元素撑开高度,若子元素设置了确定的 ...

  9. 令子元素垂直居中(并且子元素的高度不固定)

    父元素规定行高line-height和高度height:子元素使用display:inline-block.vertical-align: middle; html文件: <div class= ...

最新文章

  1. PyTorch 重磅更新,不只是支持 Windows
  2. 【Java 虚拟机原理】Java 引用类型 ( 强引用 | 软引用 | 弱引用 | 虚引用 | 静态变量 )
  3. Editplus的扩展程序的删除
  4. XML 和 JSON 的使用场景
  5. circle后面是什么意思 python_python小课堂16 - 函数篇
  6. Maven中使用本地JAR包
  7. MSP430F5529 DriverLib 库函数学习笔记(四点五)printf打印输出
  8. LeetCode MySQL 1321. 餐馆营业额变化增长(over窗口函数)
  9. 中国五大顶级域名9月第一周新增3.2万 美国净减7.6万个
  10. 耗时6个月,整理了30款免费高评分软件,完爆付费
  11. ReportMachine通过嵌套表达式计算某个值。
  12. 最小生成树详细讲解(Prime算法+Kruskalsuanfa)
  13. 必备技能!聊聊二维码扫码登录的原理
  14. 南通大学杏林学院计算机专业,南通大学杏林学院代码
  15. Linux下deb包和rpm包区别
  16. matlab 画qq图,科学网—[转载]R语言绘制QQ图 - 刘朋的博文
  17. 1046: 数值统计
  18. 何为非侵入式负荷分解
  19. 云服务器搭建开发环境
  20. Ubuntu20.04使用摸索(二)——蓝牙耳机连接

热门文章

  1. java分割汉字_Java分割中英文,并且中文不能分割一半?
  2. Jackson ObjectMapper readValue过程
  3. jsp获得文件的绝对路径
  4. linux输入ls后不显示_零基础学习之Linux基础命令小结
  5. centos7ubuntu搭建Vulhub靶场(推荐Ubuntu)
  6. Linux下导出MySQL为SQL文件_在linux命令下导出导入.sql文件的方法
  7. flask ajax 文件上传,python flask使用ajax请求上载文件。文件为空
  8. DVWA设置mysql_dvwa安装、配置、使用教程(Linux)
  9. wireshark网卡权限_网络分析系列之六_Wireshark安装
  10. 爱特php文件管理器2.8_查找「超级蜘蛛池开发者中心 抠:44564876易」安卓应用 - 豌豆荚...