当前位置:首页 » php学习笔记 » css--结构伪类选择器

css--结构伪类选择器

原创 stpevenchow 35°c 2019年10月02日 23:50 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>结构伪类选择器</title>
        <style type="text/css">
            .div{
                color: red;
            }
            .div>span{
                color: pink;
                font-weight: bold;
            }

            .div1{
                color: red;
            }
            .div1>span:first-child{
                font-weight: bold;
                color: blue;            }
            .div1>span:last-child{
                color: green;
                font-weight: bold;
            }
            .ul1>li:nth-child(4){
                color: pink;
            }
            .ul1>li:nth-child(odd){
                font-weight: bold;
            }
            .ul1>li:nth-child(even){
                font-weight: bold;
                color: pink;
            }            
            .ul2>li:nth-child(3n+1){
                font-weight: bold;
                color: pink;
            }
        </style>
    </head>
    <body>
    <!--         child系列
    :first_child
    :last_child
    :nth_child
    :nth_last_child -->
        <!-- 第一个是嵌套原理来实现css得样式分类 -->
        <div class="div">
            今天开始学习结构伪类选择器,<span>这个后面会运用的比较多<span>所以得好好学好好敲代码</span></span>结构伪类选择器.png        </div>
        <!-- 第二个是结构伪类来实现css样式分类
        first-child:所有标签中的第一个标签并且该标签必须符合设定的标签类型
        last-child:所有标签中的最后一个标签,并且该标签必须符合设定得标签类型
         -->
        <div class="div1">
            昨天看了阅兵感概万千,<span>决定从今往后</span>,<!-- 如果在这里插入任何一个标签都会使last-child标签失效,同样的原理一样适用于first-child --><span>好好学习天天向上</span>
        </div>
        <!-- nth-child的用法及原理
        
        1、.ul1>li:nth-child(odd) 所有子级标签中的奇数标签,加粗,并且子级标签必须是li标签,如果在开头插入或中间插入会影响后面的效果
        2、偶数标签odd替换成even即可
        3、n+1公式,ul1中所有子级标签中,符合公式计算结果的标签,标签必须是li标签
        n:是css设定的参数,是从0开始依次执行的整数
        1:是程序员根据项目需求设定的数值
        举例,例如3n+1
        第一个计算的数值:n=0 3n+1---1    
        第一个计算的数值:n=1 3n+1---4    
        第一个计算的数值:n=2 3n+1---7    
        第一个计算的数值:n=3 3n+1---10    
        -->

        <ul class="ul1">
            <li>实验1</li>
            <li>实验2</li>
            <li>实验3</li>
            <li>实验4</li>
            <li>实验5</li>
            <li>实验6</li>
            <li>实验7</li>
            <li>实验8</li>
            <li>实验9</li>
            <li>实验10</li>
        </ul>        
        <ul class="ul2">
            <li>实验1</li>
            <li>实验2</li>
            <li>实验3</li>
            <li>实验4</li>
            <li>实验5</li>
            <li>实验6</li>
            <li>实验7</li>
            <li>实验8</li>
            <li>实验9</li>
            <li>实验10</li>
        </ul>
        
    </body>
</html>

        

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/122.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :