• css中的选择器


    参考自:  http://www.w3school.com.cn/cssref/css_selectors.asp

      在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

      "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)

       

            

      

      对于:first-clild及相关的选择器的理解。

      首先:表示伪类,其次我们需要知道:first-child一定使用在子元素上的,:也可以看作过滤的意思,那么这个选择器的使用就必须就是 父元素 子元素:first-child (其他类似)下面举例说明:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>:first-child</title>
        <style>
            .parent-ele p:first-child {
                color: red;
            }
    
            .parent-ele p:last-child {
                color: blue;
            }
    
            .parent-ele p:nth-child(2) {
                color: green;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="parent-ele">
            <p>这是第一个段落</p>
            <p>这是第二个段落</p>
            <p>这是第三个段落</p>
            <p>这是第四个段落</p>
            <p>这是第五个段落</p>
        </div>
    </body>
    </html>

      最终的效果如下所示:

      css3中新增了一个伪元素选择器 ::selection ,这个选择器的作用是作用于用户选中的文本,官网介绍。

      使用方法如下:

    ::selection
    {
    color:#ff0000;
    }
    
    ::-moz-selection
    {
    color:#ff0000;
    }

      该属性所有的浏览器都支持,知识ff需要使用-moz-前缀。

      例子如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>selection</title>
        <style>
            ::selection {
                color: red;
                background-color: blue;
            }
            ::-moz-selection {
                color: red;
                outline: 10px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="text">
            lild及相关的选择器的理解。 首先:表示伪类,其次我们需要知道:first-child一定使用在子元素上的,:也可以看作过滤的意思,那么这个选择器的使用就...在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3
        </div>
    </body>
    </html>

    最后的效果如下:

    下面的这个例子是重复的:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>testChild</title>
        <style>
            .wrap p:first-child {
                color: red;
            }
            .wrap p:last-child {
                color: blue;
            }
            .wrap p:nth-child(2) {
                /*这里的n是从1开始的,所以这里2就是指子元素中的第二个*/
                color: green;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
        </div>
    </body>
    </html>

    最终的效果如下:

    下面的例子是:nth-child(2n) 的使用方法(注意:在这里第一个元素是1而不是0)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>testChild</title>
        <style>
            .wrap p:nth-child(2n) {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
        </div>
    </body>
    </html>

    最终的结果如下所示:

    注意:nth-child(2n)的效果和nth-child(even)的效果是相同的。   都是偶数的子元素被选中。 而nth-child(odd)是奇数的子元素被选中。

    不难想象nth-child(3n+1)和nth-child(3n+2)的作用,如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>testChild</title>
        <style>
            .wrap p:nth-child(3n+1) {
                color: red;
            }
            .wrap p:nth-child(3n+2) {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
            <p class="son">p元素</p>
        </div>
    </body>
    </html>

    效果如下:

    即虽然元素的第一个是序号1,但是其中的n值还是可以取0的。

  • 相关阅读:
    我所经历的大文件数据导出(后台执行,自动生成)
    snowflake ID生成器
    docker搭建php环境
    全局唯一随机邀请码实现方式
    sitemap xml文件生成
    浏览器输入一个地址的过程分析
    DNS解析全过程分析
    nginx编译安装on mac
    nginx image_filter 配置记录
    ImageMagick简单记录
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6394492.html
Copyright © 2020-2023  润新知