css上下文选择器

家族: 祖宗,父辈,兄弟同辈关系

1.祖先元素: 包括多级后代的元素;

2.父级元素: 仅包括一级子元素的元素;

3.相邻元素: 拥有同一个父级的元素;

1.后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素

立即学习“前端免费学习笔记(深入)”;

  语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔

  格式: 祖先 目标 {声明}

2.子选择器:先找到父级元素,再选择他下面所有直接后代元素

语法: 父级 > 目标元素 {样式声明}

3.相邻选择器: 先确定同胞元素的起始点,选择后面的所有的指定元素

上下文选择器.art p {/*color:red;*/}.art > p {/*color: green;*/}.art h1+p {/*只会将h1后面紧邻的p变色*//*color:blue;  */}.art p+p {clor: red;}

创想鸟

永久免费的在线教学网站

将公益进行到底

为了情怀,为了梦想,为了更多像我这样的PHP爱好者

如何学习前端

一定要多动手多写笔记进行总结

原来大家是这样学习的呀~~


  • 1列表项
  • 2列表项
  • 3列表项
  • 4列表项
  • 5列表项

以上就是css上下文选择器的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610773.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:41:32
下一篇 2025年12月24日 01:41:42

相关推荐

  • CSS表格设置实例

    4.CSS表格设置 /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td { border: 1px solid #333; } /*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/ table { /*折叠表格线*/ border-collapse: c…

    好文分享 2025年12月24日
    000
  • CSS背景设置

    背景设置的五个样式规则     1. 背景颜色: background-color     2. 背景图片: background-image     3. 背景图片的重复方式: background-repeat     4. 背景图片的定位方式: background-position 立即学习…

    好文分享 2025年12月24日
    000
  • CSS控制列表

    属性描述 list-style简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image将图象设置为列表项标志。 list-style-position设置列表中列表项标志的位置。 list-style-type设置列表项标志的类型。 立即学习“前端免费学习笔记(深入)”;…

    好文分享 2025年12月24日
    000
  • 关于webpack项目混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,内容挺不错的,现在分享给大家,也给大家做个参考。 前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将…

    好文分享 2025年12月24日
    000
  • 关于CSS编程的OOCSS和SMACSS设计模式的介绍

    这篇文章主要介绍了浅谈css编程的oocss和smacss设计模式,作者分析了这两种设计css的不同思路,需要的朋友可以参考下 真心觉得写出 CSS 并不难,但是要写出可被维护的 CSS 比其他程式语言都还难。所幸已经有许多大师级的人物,提出许多设计模式和思维,借由站在巨人的肩膀上可以让事情事半功倍…

    好文分享 2025年12月24日
    000
  • CSS制作提示框 ‘正在加载请。。。。。’的方法

    这篇文章主要介绍了关于css制作提示框 ‘正在加载请。。。。。’的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 最近做项目遇到这样的需求,页面加载数据比较慢,一直没有反应,下面小编给大家带来了基于CSS制作提示框 ‘正在加载请。。。。。’功能,需要的朋友参考下吧  需求:   …

    2025年12月24日
    000
  • CSS 使用Sprites技术实现圆角的效果

    这篇文章主要介绍了关于css 使用sprites技术实现圆角的效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 使用CSS Sprites技术画圆角,简单的讲就是把一个圆做在一张图上,定义4个p,每个p取图的一个角做背景,下面看具体实现方法。 首先来简单说一下什么是Sprites,…

    2025年12月24日
    000
  • css中关于定位属性position为fixed的使用介绍

    这篇文章主要介绍了关于css中关于定位属性position为fixed的使用介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed,下面有个…

    好文分享 2025年12月24日
    000
  • CSS透明opacity和IE各版本透明度滤镜filter的用法

    css3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持css3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解css透明opacity和ie各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。 CSS3的透明度属性opacity想必大家都已经用…

    好文分享 2025年12月24日
    000
  • css浏览器不兼容原因的分析

    这篇文章主要介绍了关于css浏览器不兼容原因的分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 浏览器的不兼容,大家肯定都是深恶痛绝的,往往我们只是去做修补,却忘了更重要的事情,那就是追溯根源,避免类似的不兼容再次出现。 在下不才,归纳几点html编码要素,望能指点各位:1.文字本…

    好文分享 2025年12月24日
    000
  • 关于CSS中权值、层叠和重要性(!important)的分析

    下面为大家带来一篇浅谈css 权值 层叠 重要性(!important)。内容挺不错的,现在就分享给大家,也给大家做个参考。 1、特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{co…

    好文分享 2025年12月24日
    000
  • 关于CSS中视窗单位和百分比单位的使用

    这篇文章主要介绍了详解css中视窗单位和百分比单位的使用,是css入门学习中的基础知识,需要的朋友可以参考下 视窗(Viewport)单位 视窗(Viewport)单位是相对单位,意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单…

    2025年12月24日 好文分享
    000
  • 通过优先级对比验证CSS控制样式的三种方式

    这篇文章主要介绍了关于通过优先级对比验证css控制样式的三种方式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式 好了,直入主题,大家都知道,CSS的中文名叫做层…

    2025年12月24日 好文分享
    000
  • 关于CSS实现禁止鼠标点击事件的代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 event.preventDefault() 该方法将通知 …

    好文分享 2025年12月24日
    000
  • CSS中如何使用负margin值来调整居中位置

    这篇文章主要介绍了css中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下 这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加…

    2025年12月24日
    000
  • CSS使用盒模型实例

    下面为大家带来一篇css使用盒模型实例分析。内容挺不错的,现在就分享给大家,也给大家做个参考。 盒子是CSS中的基础概念,我们需要使用它来配置元素的外观以及文档的整体布局。 1. 为元素应用内边距 应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距,或者使用 padd…

    2025年12月24日 好文分享
    000
  • 关于CSS制作的三角形和圆形小按钮的代码

    这篇文章主要介绍了一波css制作的三角形和圆形小按钮示例,都采用了灰色的常见按钮样式设计,需要的朋友可以参考下 参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。以下是成果,兼容主流浏览器,包括ie6。 *{margin:0; padding:0; list-style:non…

    2025年12月24日
    000
  • 关于CSS 平级和儿子级样式的写法

    这篇文章主要与大家分享了css 平级和儿子级样式的写法,比较适合初学者,正在学习css 的朋友可以参考下 input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。 input:checked+ol>li:中的大于是指当inoput 拥有了chec…

    好文分享 2025年12月24日
    000
  • CSS制作图形变形弹出的效果

    这篇文章主要介绍了一个css制作图形变形弹出效果的示例分享,弹出窗的大小可以使用jquery来修改,需要的朋友可以参考下 弹出窗体是网页常用的一个交互设计,在这个注重交互动画体验的时代,网页弹窗也可以来点新鲜的点子,比如今天分享的CSS 变形Modal Window。 当用户点击按钮时,按钮将会变成…

    2025年12月24日
    000
  • 对于CSS浮动float和定位position的解析

    本文针对css浮动float、定位position进行学习理解,通过实例帮助大家掌握css浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信