简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

CSS 子选择器(六)_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:46:20
原创
1303 人浏览过

一、子选择器

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素。

二、简单例子

<!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 type="text/css" rel="stylesheet" href="css/demo5.css"/></head><body><div>  <p>这是个段落   <a href="#">这是超连接</a>   </p></div></body></html>
登录后复制

@charset "utf-8";/* CSS Document *//*设置div下的p元素的样式*/div>p{    font-size:14px;    color:#0000FF;    }/*设置p元素下的a元素的样式*/p>a{    font-size:16px;    color:#FF0000;    text-decoration:none;}/*错误的写法 div 与a不是父子关系时，是取不到的*/div>a{    font-size:20px;    color:#FF0000;    text-decoration:none;}
登录后复制

子选择器很少用到，一般使用包含选择可以不受父子关系影响的选择

以下写法包含选择器

div a{    font-size:20px;    color:#FFFF00;    text-decoration:none;}
登录后复制

 

相关标签：
CSS 子选择器(六)
来源：php.cn
上一篇：【CSS】响应式图片_html/css_WEB-ITnose 下一篇：html中设置滚动条的样式_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用JS控制播放质量 有什么方法可以使用Javascript控制视频的播放质量吗？更准确地说，我想使用JavaScript选择视频质量。就像我希望在chrome或firefox中加载浏览器时自动以108...
来自于 2024-04-04 00:21:55
0
1
384
具有未知选择器和子项的 Javascript 事件委托 我有一个动态选择器（linkTrigger），它应该捕获元素上的点击。我不知道linkTrigger可能是什么，也不知道它是否会有一些孩子。当我使用jQuery时，一切都很好。如果...
来自于 2024-04-03 23:39:19
0
1
420
如何使用CSS选择器来定位包含特定属性或标签的div元素？ 我正在使用一个生成网站的POS系统。大部分代码是专有的，因此我无法编辑很多内容。我有一个输出的类别列表，其中一些图像作为类别浮动。我想隐藏主页上列出的前3个。我尝试使用div:nt...
来自于 2024-04-03 22:25:59
0
1
277
如何检查CSS类选择器的宽度属性？一个例子是.label{} 这是我对css代码的评论，其中我为.label选择了270的宽度：如果您使用浏览器的开发人员工具检查.label元素，您可能会注意到它实际上是288像素宽，而不是270像素。这是因...
来自于 2024-04-01 17:45:11
0
1
338
尝试溢出 HTML <pre><code> 标签而不是换行时，Flex 间距被破坏 我将CSS应用到precode选择器，以便制作样式代码块，就像您在GitHub或其他地方看到的那样。我使用Flexbox进行布局，并且在“框”div内并排有两个“面板”div，其中...
来自于 2024-04-01 12:22:06
0
1
296
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！