分享更有价值
被信任是一种快乐

css3层次选择器怎么用

文章页正文上

本篇内容主要讲解“css3层次选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3层次选择器怎么用”吧! 用法:1、后代选择器选择元素的后代元素,语法“元素 元素{css代码}”;2、子选择器选择元素的所有子元素,语法“元素>元素{css代码}”;3、相邻兄弟选择器选择元素同级目录的下一个元素;4、通用兄弟选择器选择元素同级目录下所有后面的标记。本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。层次选择器通过HTML的DOM元素之间的层次关系获取元素,其主要的层次关系包括后代,父子,相邻兄弟和通用兄弟几种关系,通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下:IE7以及以上版本的浏览器包括其他各类浏览器都支持层次选择器。(IE6不支持)下面通过一个HTML文件说明各类层次选择器的使用方式:1234
567
8
9
10显示效果如下:其DOM树结构如下:后代选择器:后代选择器(E F)也称为包含选择器,作用就是可以选择某元素的后免费云主机、域名代元素。例如“E F”, E为祖先元素,F为后代元素,表达的意思就是E元素的所有后代F元素,这里的F元素不管是E的子元素,孙辈元素,或者更深层次的关系,都将被选中。换句话说,不管F在E中有多少层级关系,F元素都将被选中。下面使用后代选择器改变其背景颜色,在上述HTML元素CSS代码的最后增加如下样式:显示效果如下:子选择器:子选择器智能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F表示选择了E元素下所有子元素F。这与后代选择器不一样,后代选择器中,F是E的后代,而在E>F中F仅仅是E的子元素而已。下面代码用来改变body下的子元素p的背景色:显示效果如下:相邻兄弟选择器:相邻兄弟选择器可以选择紧邻在另一个元素后面的元素,它们具有一个相同的父元素。换句话说E和F是同辈元素,F元素在E元素后面,并且相邻。下面代码用来改变class为active的p元素的相邻兄弟元素背景颜色,为了方便起见,为上述HTML元素的第一个p元素增加class属性,如下:1然后在其CSS代码最后增加如下样式:显示效果如下:通用兄弟选择器
用于选择某元素后面的所有兄弟元素,它们和相邻兄弟元素选择器类似,需要在同一个父元素之中,也就是说E元素和F元素是同辈元素,并且F元素在E元素之后。在上述HTML的CSS代码最后增加如下样式:显示效果如下:到此,相信大家对“css3层次选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: jquery能不能给多个元素一起绑定事件

这篇文章主要介绍“jquery能不能给多个元素一起绑定事件”,在日常操作中,相信很多人在jquery能不能给多个元素一起绑定事件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery能不能给多个元素一起绑定事件”的疑惑有所帮…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册