• css-02


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <style>
    <!-- 方法一:用id的形式单独的对每一个标签设置属性 -->
    #p1{
    font-size: 30px;
    color: green;
    }
    #p2{
    color: green;
    text-decoration: underline;
    }
    #p3{
    font-size: 30px;
    text-decoration: underline;
    }

    <!-- 方法二:创建一个类,把相同的属性放进这个类中,等标签需要修改时自己继承该类 -->
    .lg{
    font-size:30px; #为p1与p3中的30px创建了一个类,p1,p3需要用时直接继承即可
    }
    .lv{
    color:green; # 单独为p1与p2中的绿色字体创建了一个类,这样避免了需要重复编写绿色字体这行代码
    }
    .un{
    text-decoration: underline; # 为p2与p3中的下划线属性创建了一个类,p2,p3要用时可以直接继承,简化了代码
    }

    <!-- 后代选择器-->
    .father ul li p{
    color: red;
    } # 会选中father类下的ul标签中嵌套着的li标签中的p标签,精确的把'wusir'进行了定位

    <!-- 子代选择器-->
    .father2>p{
    color: red;
    } # 使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....),也即选中的是alex,不会选中wusir.

    <!-- 组合选择器-->
    div,p,a{
    color:red;
    } # 同时选中div,p和a标签

    <!-- 交集选择器-->
    div{
    font-size: 30px;
    }
    .active{
    color: green;
    }
    div.active{
    text-decoration: underline;
    } # 使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

    <!-- 属性选择器-->
    form input[type='text']{

    } #会选中form标签中所有的input标签,中type属性为'text'的那个input标签,也即type='password'的那个input不会被选中

    <!-- 伪类选择器-->

    伪类选择器一般只会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte(link,visited,hover,active)
    (注意了,span标签中也能用一个hover伪类选择器,其他的标签都不能用这些伪类选择器)
    /*没有被访问的a标签的样式*/
    .box ul li.item1 a:link{

    color: #666;
    }
    /*访问过后的a标签的样式*/
    .box ul li.item2 a:visited{

    color: yellow;
    }
    /*鼠标悬停时a标签的样式*/
    .box ul li.item3 a:hover{

    color: green;
    }
    /*鼠标摁住的时候a标签的样式*/
    .box ul li.item4 a:active{

    color: yellow;
    }

    <!-- 伪元素选择器-->
    /*设置第一个首字母的样式*/
    p:first-letter{
    color: red;
    font-size: 30px;
    display:none;# display属性会隐藏元素,但不会占位置
    visibility:hidden;# visibility属性会隐藏元素,且会占位置

    }

    /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
    p:before{
    content:'alex';
    }


    /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
    p:after{
    content:'&';
    color: red;
    font-size: 40px;
    }
    <!-- 科普属性知识-->
    .box{
    display:none;# display属性会隐藏元素,但不会占位置
    visibility:hidden;# visibility属性会隐藏元素,且会占位置
    }
    .father:hover .child{
    display:block;# 和none属性相反,当你点击它的时候就会显示元素.这种用父类嵌套子类,以求当鼠标移动到父类标签内容上时,显示出子类
    内容的方法,可比js.
    }

    .box2{
    /*当你要求这个盒子一定是块级标签,且不在页面中占位置时,可以用以下结构来实现,这个需求未来与布局有很大关系*/
    display: block; #实现当点击该标签内容时才显示内容
    visibility: hidden; #实现隐藏该盒子元素的功能
    height:0; #把visibility所占的位置高给设为0,这样就可简便使visibility所占的空间给清零

    }

    <!-- css的继承性和层叠性-->
    继承性: color,text-xxx,font-xxx,line-xxx的属性是可以继承下来的.盒模型的属性属性是不可以继承下来的.
    a标签有特殊情况: 设置a标签的字体颜色,一定要选中a标签,不能使用继承性.

    层叠性: 与权重有关,谁的权重越大就会显示谁的样式
    如何看权重: 数数选择器 行内 > id > class > 标签,选择器为id的权重最大,它规定的样式必定会覆盖其他选择器规定的元素.

    继承来的属性权重为0,跟选中的标签没有可比性.
    #father1 #father2 #father3{
    color:red;
    } # 通过继承性使得p标签中内容为红色
    #father1 .box2 .box3 p{
    color:green;
    } # 通过精确定位到p标签,使得p标签中内容为绿色
    结果为:绿色
    因为第一个red颜色,是p标签继承过来的属性,其权重默认为0.第二个为精确定位,权重为121,因此权重最大,显示绿色.

    如果都是继承来的属性,就近原则,谁更深选择谁
    如果都一样深,则再去比权重.
    如果权重又都一样,则以后设置的为主.


    </style>
    </head>
    <body>
    <!-- 可把标签中想要修改的相同属性放进一个类中,这样在调用时可以简化你的代码-->
    <p id="p1" class="lg lv">alex</p> #继承了lg与lv俩类的属性
    <p id="p2" class="lv un">日天</p> #继承了lv与un俩类的属性

    <!--后代选择器-->
    <div class="father">
    <p>alex</p>
    <ul>
    <li>
    <p>wusir</p> #通过后代选择器对wusir进行了精确定位
    </li>
    </ul>
    </div>

    <!--子代选择器-->
    <div class="father2">
    <p>alex2</p>
    <div class="content">
    <p>wusir</p>
    </div>

    </div>

    <!--组合选择器-->
    <div class="father3">alex</div>
    <p>日天</p>
    <a>wusir</a>

    <!--交集选择器-->
    <div class="active">alex</div>

    <!--属性选择器-->
    <form action="">
    <input type="text">
    <input type="password">
    </form>

    <!--继承来的属性,权重为0-->
    <div class="box1" id="father1">
    <ul class="box2" id="father2">
    <li class="box3" id="father3">
    <p class="box4" id="child">猜猜我的颜色</p>
    </li>
    </ul>
    </div>

    </body>
    </html>
  • 相关阅读:
    HTML和XHTML知识总结
    理解margin-left:-100%
    git clean的用法
    vue路由传参的三种基本方式
    vertical-align属性
    纯CSS制作各种图形(多图预警)
    css伪元素:before和:after用法详解
    前端注册登录的业务流程
    Vue-cli 中为单独页面设置背景图片铺满全屏的方法
    vscode 开启对 webpack alias(文件别名) 引入的智能提示
  • 原文地址:https://www.cnblogs.com/gongteng/p/13567432.html
Copyright © 2020-2023  润新知