开发者社区> 西北野狼> 正文

前端学习 --Css -- 子元素的伪类

简介: :first-child 寻找父元素的第一个子元素,在所有的子元素中排序; :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序; :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序; :first-of-type 寻找指定类型中的第一个子元素 :last...
+关注继续查看
  1. :first-child 寻找父元素的第一个子元素,在所有的子元素中排序;
  2. :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序;
  3. :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序;
  4. :first-of-type 寻找指定类型中的第一个子元素
  5. :last-of-type 寻找指定类型中的最后一个子元素
  6. :nth-of-type 寻找指定类型中的指定子元素

    可以使用even,来找到偶数的子元素

    可以使用odd,来找到奇数的子元素

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*:first-child 寻找父元素的第一个子元素,在所有的子元素中排序;*/
            P:first-child{
                color: #ADFF2F;
            }
            /*:last-child 寻找父元素的最后一个子元素,在所有的子元素中排序;*/
            P:last-child{
                color: #008000;
            }
            /*:nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序;*/
            P:nth-child(3){
                color: #FFFFFF;
                background-color: #000000;
            }
            /*:first-of-type 寻找指定类型中的第一个子元素*/
            h3:first-of-type{
                color: red;
            }
            /*:last-of-type 寻找指定类型中的最后一个子元素*/
            h3:last-of-type{
                color: green;
            }
            /*:nth-of-type 寻找指定类型中的指定子元素*/
            h3:nth-last-of-type(2){
                color: yellow;
            }
            
            /*可以使用even,来找到偶数的子元素
            可以使用odd,来找到奇数的子元素*/
            h4:nth-last-of-type(even){
                color: red;
            }
            
            h4:nth-last-of-type(odd){
                color: green;
            }

        </style>
    </head>
    <body>
        <p>有时关切是问,有时关切是不问。</p>
        <h3>----我是分割线1----</h3>
        <p>这样水波不兴,你好我也好。</p>
        <h3>----我是分割线2----</h3>
        <p>山还是山,水还是水,生活和工作终会照旧。</p>
        <h3>----我是分割线3----</h3>
        <p>希望观念的改变能留得长久些:敬天悯人,相信人心</p>
        <h3>----我是分割线4----</h3>
        <br/>
        <br/>
        <br/>
        
        <h4></h4>
        <h4>你眼睛的面积一定小于湖  </h4>
        <h4>你也很少哭  </h4>
        <h4>为什么坐在你面前 </h4>
        <h4>就像站在湖边</h4>
        <h4>细细的雾水就扯地连天 </h4>
    </body>
</html>

效果图:

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端学习 -- 颜色
颜色单位: 在CSS可以直接使用颜色的单词来表示不同的颜色 红色:red 蓝色:blue 绿色:green 也可以使用RGB值来表示不同的颜色 - 所谓的RGB值指的是通过Red Green Blue三元色,通过这三种颜色的不同的浓度,来表示出不同的颜色。
520 0
Python编程语言学习:仅需一行代码构造特殊列表之重复元素列表、等差数字列表等之详细攻略
Python编程语言学习:仅需一行代码构造特殊列表之重复元素列表、等差数字列表等之详细攻略
45 0
【CSS】获取元素的z-index值以及各种值的意义
js可以获取其元素的z-index值: $("document").ready(function(){ var a = $('.row').css('z-index'); alert(a); }); 对于值的解读: 值 描述 auto 默认。
1053 0
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能。
751 0
前端学习 -- Css -- 样式的继承
像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承, 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式。 但是并不是所有的样式都会被子元素所继承,比如:背景相关的样式都不会被继承 边框相关的样式 定位相关的 DOCTYP...
695 0
前端学习 -- 长度单位
长度单位  像素 px  - 像素是我们在网页中使用的最多的一个单位, 一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。 - 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。
626 0
+关注
西北野狼
擅长Android ,J2EE开发 博客园地址:http://www.cnblogs.com/androidsuperman/p/7834762.html github地址: https://github.com/soyoungboy
463
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载