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>

  • 相关阅读:
    BackgroundWorker原理剖析
    委托异步调用时BeginInvoke的陷阱处理
    线程静态在对象缓存中的妙用
    值得珍藏的.NET源码,不保存就没机会了
    .NET 4.5.1 参考源码索引
    .NET 4.5 参考源码索引
    .NET 4.0 参考源码索引
    WWF3.5SP1 参考源码索引
    WCF3.5 SP1 参考源码索引
    .NET 3.5.1 参考源码索引
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12251758.html
Copyright © 2011-2022 走看看