zoukankan      html  css  js  c++  java
  • css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结

    <div id="parent">
            <p>I'm a example</p>
            <p id="one">I'm a example</p>
            <p>I'm a example</p>
            <p>I'm a example</p>
            <p>I'm a example</p>
            <p>I'm a example</p>
            <p>I'm a example</p>
            <p name="shuai">I'm a example</p>
            <p>I'm a example</p>
            <div id="child">
                <p>I'm a example</p>
                    <p>I'm a example</p>
                    <p>I'm a example</p>
                    <p>I'm a example</p>
            <div>
        </div>

    1.选择id为parent的div下所有的p元素

    #parent p{
    color:red;
    font-size:24px;
    }

    2.选择id为parent的div下子元素p标签

    #parent>p{
    color:red;
    font-size:24px;
    }

    3.选择id为one的p标签后相邻的p标签

    #one+p{
    color:red;
    font-size:24px;
    }

    4.选择id为onep的p后面所有同级的p标签

    #one~p{
    color:red;
    font-size:24px;
    }

    5.选择parent中有id的p标签

    #parent p[id]{
    color:red;
    font-size:24px;
    }

    6.选择parent中name属性值是shuai的p标签

    #parent p[name=shuai]{
    color:red;
    font-size:24px;
    }

    7.选择parent中id以o开头的p标签

    #parent p[id^=o]{
    color:red;
    font-size:24px;
    }

    8.选择parent中id以o结尾的p标签

    #parent p[id$=o]{
    color:red;
    font-size:24px;
    }

    9.选择parent中id包含o的p标签

    #parent p[id*=o]{
    color:red;
    font-size:24px;
    }

  • 相关阅读:
    Tarjan-割点&桥&双连通
    树状数组
    loli的搜索测试-5
    思维题
    生成树
    贪心
    loli的搜索测试-4
    树链剖分
    基于AHK的上课自动签到
    用列表实现栈
  • 原文地址:https://www.cnblogs.com/czy960731/p/7479822.html
Copyright © 2011-2022 走看看