zoukankan      html  css  js  c++  java
  • CSS3结构类选择器补充

    :empty 没有子元素(包括文本节点)的元素

    :not  否定选择器

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li:not(:last-of-type){color:red;}
    </style>
    </head>
    <body>
        <ul>
            <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>
        </ul>
    </body>
    </html>

     css权重与权值

    行内样式 1000

    id选择器 100

    类、伪类、属性选择器 10

    元素、伪元素 1

    通配符 0

    权重相同时根据就近原则

    伪元素选择器,::

    ::first-line 选取文本的第一行,只能用于块级元素

    ::first-letter  选取文本的第一个字,只能用于块级元素

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{width:100px;}
        p:first-line{color:red;}
        p:first-letter{background-color: #abcdef;font-size:20px;}
    </style>
    </head>
    <body>
        <p>这是一段用于测试的文本哦~~~~~~~~~~~~~~~~~~~~</p>
    </body>
    </html>

    ::before 在指定元素内部的前面插入,且为行级元素

    ::after 同理

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:before{
            content:"这是before文本+";
            color:orange;
        }
    </style>
    </head>
    <body>
        <p>文本</p>
    </body>
    </html>

     可以转为块级元素

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:before{
            content:"这是before文本+";
            color:orange;
            display: block;
        }
    </style>
    </head>
    <body>
        <p>文本</p>
    </body>
    </html>

     ::after 常用于清除浮动

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header{background:#abcdef;}
        .left{float: left;width:50%;}
        .right{float: left;width:50%;}
        header:after{
            display: block;
            content:"";
            clear:both;
        }
    </style>
    </head>
    <body>
        <header>
            <div class="left">左边</div>
            <div class="right">右边</div>
        </header>
    </body>
    </html>

     ::selection 选中文本的效果

    IE9以上支持,火狐需要加 -moz 前缀

    <!DOCTYPE html>
    <html lang="en" manifest="index.manifest">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p::selection{color:orange;}
    </style>
    </head>
    <body>
        <p>这是一段文本哦</p>
    </body>
    </html>

  • 相关阅读:
    1.23学习总结:文件流
    vue-router重写push方法,解决相同路径跳转报错,解决点击菜单栏打开外部链接
    手把手教Electron+vue,打包vue项目,打包成桌面程序。
    后台获取的map集合封装json
    VUE同级组件之前方法调用
    字节跳动今日头条-抖音小程序序html富文本显示解决办法
    别总写代码,这130个网站比涨工资都重要
    vue 组件之间的自定义方法互相调用
    swiper轮播图出现疯狂抖动(小程序)
    vue通过地址下载文件
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12251758.html
Copyright © 2011-2022 走看看