选择器_选择器优先级 - CSDN
精华内容
参与话题
  • 选择器的种类

    2019-06-25 20:08:52
    选择器的种类有六种: 1.标签选择器 2.id选择器 3. class选择器 4.后代选择器 标签嵌套多层关系(包含一层)   5.子代选择器 标签嵌套只有一层关系 6.交集选择器 不能把标签写在后面 如 。app ...

    选择器的种类有六种:

    1.标签选择器  

    2.id选择器

    3.  class选择器

    4.后代选择器          标签嵌套多层关系(包含一层)

     

          

    5.子代选择器        标签嵌套只有一层关系

     

    6.交集选择器     不能把标签写在后面  如 。app

     

    转载于:https://www.cnblogs.com/yangxueyan/p/9622168.html

    展开全文
  • CSS3选择器(全部)

    千次阅读 2018-10-19 15:38:16
    CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。 1,基本选择器 (1)标签选择器(类型选择器)  统一...

    CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。

    1,基本选择器

    (1)标签选择器(类型选择器)

                统一定义常用标签的基本样式。

    ​
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world.</title>
        <style>
             p{ /*标签选择器*/
    
                   font-size:15px;
    
                   color:#00796b;
    
             }
        </style>
    </head>
    <body>
    <p>山下兰芽短浸溪,松间沙路净无泥。</p>
    </body>
    </html>
    
             
    
    ​

    (2)类选择器

    类选择器能为相同对象定义不同的样式,为不同的对象定义相同的样式,以“.”前缀开头,然后接一个自定义的类名,例如:.myfont。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            p { /*标签选择器*/
                font-size: 25px;
                color: #00396b;
            }
    
            .myfont { /*类选择器*/
                font-size: 18px;
                font-weight: bold;
                color: #00796b;
            }
        </style>
    </head>
    <body>
    <p>william</p>
    <p class="myfont">山下兰芽短浸溪,松间沙路净无泥。</p>
    <p class="myfont">几处早莺争暖树,谁家新燕啄春泥。</p>
    <div class="myfont">随意春芳歌,王孙自可留。</div>
    </body>
    </html>
    

    (3)ID选择器

    ID选择器以“#”开头,然后接一个自定义的ID名。HTML所有的标签都支持ID选择器,只要在标签中定义id属性就行了。ID选择器一般是用来定义HTML框架结构的布局效果,因为元素ID都是唯一的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            #poetry{
                font-size: 25px;
                margin: auto;
                text-align: center;
                color: #00796b;
            }
        </style>
    </head>
    <body>
    <div id="poetry">水面清圆,一一风荷举。</div>
    </body>
    </html>

     

    (4)通配选择器(通配符)

    如果所有的元素都需要定义相同的样式效果就用通配选择器,通配选择器以“*”表示。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                font-size: 25px;
                margin: auto;
                text-align: center;
                color: #00796b;
            }
        </style>
    </head>
    <body>
    <div>山下兰芽短浸溪,松间沙路净无泥。</div>
    <span>随意春芳歌,王孙自可留。</span>
    <p>水面清圆,一一风荷举。</p>
    </body>
    </html>

     

    2,组合选择器

    (1)包含选择器

    包含选择器通过空格标识符来表示,前面一个选择器表示父节点,而后面的选择器表示子节点。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                margin: auto;
                text-align: center;
            }
            #man p{
                color: #00796b;
                font-size: 20px;
                font-weight: bold;
            }
            #woman p{
                color: pink;
                font-weight: 100;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
    <div id="man">
        <p>李白</p>
        <p>白居易</p>
    </div>
    <div id="woman">
        <p>刘莉</p>
        <p>李梅梅</p>
    </div>
    
    </body>
    </html>

    (2)子选择器

    子选择器以“>”表示,子选择器是指定父元素包含下的子元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                margin: auto;
                text-align: center;
            }
            #man>p{
                color: #00796b;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <div id="man">
        <p>李白</p>
        <p>白居易</p>
    </div>
    </body>
    </html>

    (3)相邻选择器

    相邻选择器通过“+”分隔符进行定义,TA指定的元素关系是兄弟关系。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                margin: auto;
                text-align: center;
            }
            h1+p{
                color: #00796b;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <div id="man">
        <h1>李白</h1>
        <p>白居易</p>
    </div>
    <div id="woman">
        <h1>李清照</h1>
        <p>唐琬</p>
    </div>
    </body>
    </html>

    (4)兄弟选择器

    兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点,以“~”表示。 

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                margin: auto;
                text-align: center;
            }
            h1~p{
                color: #00796b;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <div id="man">
        <span>hello</span>
        <h1>李白</h1>
        <p>白居易</p>
        <p>白居</p>
        <p>白易</p>
        <p>白嵩</p>
        <p>白豪</p>
    </div>
    </body>
    </html>

    (5)分组选择器

    分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            *{
                margin: auto;
                text-align: center;
            }
            span,h1,h2,p,b{
                color: #00796b;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <div id="man">
        <span>hello</span>
        <h1>李白</h1>
        <h2>白居易</h2>
        <p>白居</p>
        <b>白易</b>
    </div>
    </body>
    </html>

    3,属性选择器

    CSS3在CSS2的基础上新增了3个属性选择器,分别是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三个新增的选择器和已定义的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同构成强大的HTML属性过滤器。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            * {
                margin: auto;
                text-align: center;
            }
    
            /*E[attr]*/
            [id] {
                color: #00796b;
            }
    
            [title] {
                font-size: 35px;
                color: #00796b;
                font-weight: 100;
            }
    
            [title][href] {
                color: darkolivegreen;
                text-decoration: none;
            }
    
            /*E[attr="value"]*/
            [href="#well"] {
                font-size: 27px;
                color: red;
                text-decoration: none;
            }
    
            [href="#pick"] {
                font-size: 22px;
                color: green;
                text-decoration: none;
            }
    
            /*E[attr~="value"]*/
            [class~="important"] {
                font-size: 35px;
                color: blue;
            }
    
            /*E[att^=value]只要属性值里有这个value就行*/
            [class^="one"] {
                font-size: 12px;
                color: #999999;
            }
    
            /*E[att$=value]只要属性值的后缀是value就选中*/
            [class$="in"] {
                font-size: 32px;
                color: darkorange;
            }
    
            /*E[att*=value] 只要属性值里包含value就选中*/
            [class*="go"] {
                font-size: 15px;
                color: darkmagenta;
            }
    
            /*E[attr|="value"] 只要属性值是value或者以value-开头就选中*/
            [class|="demo"] {
                font-size: 35px;
                color: #00799b;
            }
        </style>
    </head>
    <body>
    <!--E[attr]-->
    <span id="down">李白乘舟将欲行</span>
    <span title="hello">几处早莺争暖树</span>
    <p title="world">谁家新燕啄春泥</p>
    <a title="like" href="www.good.wang">益州疲敝</a>
    <!--E[attr="value"]-->
    <a href="#well">月出于东山之上</a>
    <a href="#pick">徘徊于斗牛之间</a>
    <!--E[attr~="value"]-->
    <p class="important warning">苟富贵</p>
    <p class="important">勿相忘</p>
    <!--E[att^=value]-->
    <p class="one">国破山河在,城春草木深。</p>
    <p class="two">感时花溅泪,恨别鸟惊心。</p>
    <p class="onesteep">烽火连三月,家书抵万金。</p>
    <p class="twoland">白头搔更短,浑欲不胜簪。</p>
    <!--E[att$=value]-->
    <p class="oldok">好雨知时节,当春乃发生。</p>
    <p class="oldyeh">随风潜入夜,润物细无声。</p>
    <p class="oldmain">野径云俱黑,江船火独明。</p>
    <p class="newmain">晓看红湿处,花重锦官城。</p>
    <!--E[att*=value]-->
    <p class="dremgo">明月松间照,清泉石上流。</p>
    <p class="maingo">空山新雨后,天气晚来秋。</p>
    <p class="gohome">竹喧归浣女,莲动下渔舟。</p>
    <p class="oldgodemo">随意春芳歌,王孙自可留。</p>
    <!--E[attr|="value"]-->
    <p class="demo">山不在高</p>
    <p class="demo-R">有仙则名</p>
    <p class="Ademo">水不在深</p>
    <p class="MdemoM">有龙则灵</p>
    </body>
    </html>

    4,伪类选择器

    伪类选择器包括伪类和伪对象选择器,伪类选择器以“:”作为前缀标识符。冒号前后没有空格,否则将会被视为类选择器。

    单纯式用法:div:hover{background-color:red;}

    混合式用法:div.selected:hover{background-color:green;}

    (1)动态伪类选择器

    锚点伪类选择器:E:link(未被访问过)     和    E:visited(已被访问过)。

    行为伪类选择器:E:active(点击时)、E:hover(鼠标滑过时)、E:focus(元素获得焦点时)。

            /*链接没被访问时为黑色*/
            .demo a:link{
                color: black;
            }
            /*链接被访问后为灰色*/
            .demo a:visited{
                color: gray;
            }
            /*鼠标放在连接上时显示为蓝色*/
            .demo a:hover{
                color: blue;
            }
            /*鼠标点击时激活链接那一下显示为绿色*/
            .demo a:link{
                color: green;
            }

     

    (2)结构伪类选择器

    结构伪类选择器是CSS3新设计的选择器,TA利用HTML的树状结构实现元素选择,可以减少class属性和id属性的定义。

    ①:first-child:选择一个元素的第一个子元素。(不支持ie6)。

    比如我们这里的这个demo,你想让列表中的第一个"li"具有与其他"li"有不同的样式,我们就可以使用:first-child来实现。

    .demo li:first-child{border:1px dashed #666666;background-color:lightgray}

    ②:last-child:选择一个元素的最后一个子元素。

    让列表中的最后一个"li"具有与其他"li"有不同的样式。

    .demo li:last-child{border:1px dashed #666666;background-color:lightgray}

    ③:nth-child():选择某个元素的一个或多个特定的子元素。[:nth-child(-3)是错误的写法 ,不支持ie6~ie8 ]。

                            :nth-child(length);/*参数是具体数字*/
    			:nth-child(n);/*参数是n,n从0开始计算*/
    			:nth-child(n*length)/*n的倍数选择,n从0开始算*/
    			:nth-child(n+length);/*选择大于或等于length的元素*/
    			:nth-child(-n+length)/*选择小于或等于length的元素*/
    			:nth-child(n*length+1);/*表示隔几选一*/
    			//上面length为整数,n表示一个从0开始的自然数。
    .demo li:nth-child(n){border:1px solid #999999;background-color:lightblue;}
    /*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
    .demo li:nth-child(2n){border:1px solid #999999;background-color:lightblue;}
    /*选中0,2,4,6,8...*/
    .demo li:nth-child(2n-1){border:1px solid #999999;background-color:lightblue;}
    /*选中0,1,3,5,7...*/
    .demo li:nth-child(n+5){border:1px solid #999999;background-color:lightblue;}
    /*选中5,6,7,8,9...*/
    .demo li:nth-child(-n+5){border:1px solid #999999;background-color:lightblue;}
    /*选中5,4,3,2,1*/
    .demo li:nth-child(3n+1){border:1px solid #999999;background-color:lightblue;}
    /*选中1,4,7,10...*/

    ④:nth-last-child():选中某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始计算。(不支持ie6~ie8)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            div{
                margin: auto;
                text-align: center;
            }
            li:nth-last-child(2n){
                background-color: #0055cc;
                list-style: none;
            }
        </style>
    </head>
    <body>
    <div>
        <ul>
            <li>宋公明</li>
            <li>李靖宇</li>
            <li>周伯通</li>
            <li>法拉第</li>
            <li>胖大海</li>
            <li>胖大海</li>
        </ul>
    </div>
    </body>
    </html>

    ※如果元素个数为奇数,TA选中的就是偶数,反之选中的是奇数。

    ⑤:nth-of-type():选择指定的元素。(不支持ie6~ie8)。

    :nth-of-type()的用法和:nth-child的用法是一样的,不同的是:nth-of-type()指定了元素的类型。

    ⑥:nth-last-of-type():选择指定的元素,从元素的最后一个开始计算。(不支持ie6~ie8)。

    :nth-last-of-type()的用法和:nth-last-child()的用法是一样的,不同的是:nth-last-of-type()指定了元素的类型。

    ⑦:first-of-type:选择一个上级元素下的第一个同类子元素。(不支持ie6~ie8)。

    和:first-child类似,不同的是指定了元素的类型,用的不多。

    ⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。

    和:last-child类似,不同的是指定了元素的类型,用的不多。

    ⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。

    ⑩:only-of-type:选择一个上级元素的唯一一个同类型的子元素。(不支持ie6~ie8)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            .dream p{background-color: #cccccc}
            .dream p:only-child{background-color: #0055cc;color:#fff;}
            .dream p:only-of-type{background-color: green;color: #fff}
        </style>
    </head>
    <body>
    <div class="dream">
        <p>凌晨梦见脚趾头被人用针扎</p>
        <p>醒了之后才知道是猫在用爪子挠我</p>
        <p>夏天就这样结束了</p>
    </div>
    <div class="dream">
        <p>迷人的不是那张脸,而是那张脸上的最好看的笑容</p>
    </div>
    <div class="dream">
        <span>凌晨梦见脚趾头被人用针扎</span>
        <p>醒了之后才知道是猫在用爪子挠我</p>
        <div>夏天就这样结束了</div>
    </div>
    </body>
    </html>

    Ⅺ:empty:选择的元素里面没有任何内容。(不支持ie6~ie8)。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            .get:empty{
                width: 888px;
                height: 666px;
                border: 5px dashed #0055cc;
            }
        </style>
    </head>
    <body>
    <div class="get">hello</div>
    <div class="get"></div>
    </body>
    </html>

    (3)否定伪类选择器(不支持ie6~ie8)。

    :not()表示否定伪类选择器,TA可以排除掉特定元素,TA和jQuery中的:not选择器用法一模一样。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            div{
                margin: auto;
                text-align: center;
            }
            li{color:red;}
            li:not(.warning){
                list-style: none;
                font-size: 28px;
                color:green;
            }
        </style>
    </head>
    <body>
    <div>
        <ul>
            <li>can i help you?sir.</li>
            <li class="warning">what f**k is this?</li>
            <li>sorry!i don`t know</li>
            <li>it`s look like snake.</li>
        </ul>
    </div>
    </body>
    </html>

    ※上面的HTML中就用否定伪类选择器过滤掉了那句脏话,所以它是红色的。

    (4)状态伪类选择器(不支持ie6~ie8)。

    状态伪类选择器主要是针对表单设计的,状态伪类选择器就是控制UI元素状态的,可不可用,选没选中,获取或失去焦点,锁定、待机等。

    ①:enabled伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:enabled选择器只匹配文本框,不匹配按钮。

    <form>
       <input type="text"/>
       <input type="button" disabled="disabled">
    </form>

              ②:disabled伪类表示匹配指定范围内所有不可用UI元素。例如,下面的表单,input:disabled选择器只匹配按钮,不匹文本框。

    <form>
       <input type="text"/>
       <input type="button" disabled="disabled">
    </form>

             ③:checked伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:checked选择器只匹配按钮,不匹配复选框。

    ​<form>
       <input type="checkbox"/>
       <input type="radio" checked="checked">
    </form>

    (5)目标伪类选择器(不支持ie8及其以下的浏览器不支持目标伪类选择器)。

    目标伪类选择器是形如E:target,TA匹配E的所有元素,并且匹配元素被相关的URL指向,目标伪类选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才被执行。

    <!DOCTYPE html>
    <html lang="en">
    <head>
           
        <meta charset="UTF-8">
            <title>hello world.</title>
        <style>
            div:target{
                font-size: 32px;
                background-color: #00765b;
                margin: auto;
                text-align: center;
            }
    
        </style>
    </head>
    <body>
    <div>
        <div id="demo1">春眠不觉晓,</div>
        <div id="demo2">处处闻啼鸟。</div>
    </div>
    </body>
    </html>

    ※当在浏览器中打开这个文件,在URL后面附加”#demo1“,以锚点方式链接到<div id="demo1">时,该元素的样式就会发生相应的变化。

     

    展开全文
  • 这30个CSS选择器,你必须熟记(上)

    万次阅读 多人点赞 2019-10-30 09:41:22
    关注前端达人,与你共同进步CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需...
        
    640?wx_fmt=png

    关注前端达人,与你共同进步


    640?wx_fmt=png


    CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般,几秒钟就能得到一个想要的效果,是不是很酷呢。

    CSS为我们提供了选择器,这个酷酷的魔法工具,让我们随意能够操作网页元素的样式,CSS选择器众多,我们不可能一次性学完,但是这30个CSS选择器我们必须熟练记忆,可能有的同学觉得没必要学这么多,掌握了id、class、后代选择器就够了,这算完事了吗?如果是这样你就错过了很多灵活运用CSS的机会,虽然这些新属性很多都属于CSS3,但是我们掌握这些新属性后还是有很大的好处的。

    从本篇文章起,我给大家归纳了常用的30个CSS选择器,希望通过我的总结,你能够喜欢上这些常用的选择器,废话不多说,我们这篇文章将介绍前10个。

    在介绍之前,我们先理解下文档结构树的父子关系

    在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器。如下图所示,我们用树形结构来表示一个文档结构。

    640?wx_fmt=png

    如上图所示,相邻的两个节点(层级是连续的),他们之间是父子关系。如果两个元素之间跨越两个层级以上,它们是祖辈和后代的关系。

    1、*:通用选择器

    针对初学者来说,我们还是从简单的开始学起,首先我们来认识下通用选择器,然后再逐步深入学习其它高级的选择器,加入我们想让文档中的每个元素都显示成红色,我们可以这么做:

    * {color:red;}

    通用选择器,可以匹配页面所有的元素。 许多开发者可能会用这个技巧如下代码所示让元素居中,在开发测试阶段固然是好的,但是我不建议这么做,因为这样做会给浏览器增加很大的负担。

    * {
    margin: 0;
    padding: 0;
    }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    2、#X:ID选择器

    ID选择器的开头使用#号,但是你在使用的时候,需要谨慎。

    问问自己:是否真的需要使用ID选择器来定义样式

    id选择器比较局限,不能重用。因此需要慎重考虑。

    #container {
    width: 960px;
    margin: auto;
    }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    3、.X:类选择器

    类选择器的开头用.(点)进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式,好比按组进行归类,同一类的样式统一定义。

    .error {
    color: red;
    }

    如果把两个类串在一起,选择的就是同时具有两个类名的元素,类名的顺序则无所谓,比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    4、X Y:后代选择器

    后代选择器,英文名称:descendant selector,本文的开头我们学习了什么是后代元素,比如我们要选择在li元素中包含a标签的链接(不是所有的链接),取消下划线的默认样式,我们可以这样代码实现:

    li a {
    text-decoration: none;
    }

    经验分享: 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的,后代元素的层级问题,可能会很深。

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    5、X:元素选择器

    假如你想针对Html预定义的标签,比如类似:p,h3,em,a这些标签,我们可以快速为某类标签定义样式。如下段代码所示:

    a { color: red; }
    ul { margin-left: 0; }

    浏览器兼容性:

    • IE6+

    • Firefox

    • Chrome

    • Safari

    • Opera

    6、X:visited and X:link :链接伪类选择器

    :link 伪类来定义所有还没有点击链接的样式,:visited 伪类定义我们曾经点击过或者访问过的链接样式,示例代码如下:

    a:link { color: red; }
    a:visted { color: purple; }

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    7、 X + Y:紧邻同胞选择器

    若想选择同一个父元素中,相邻的同级别的元素,我们可以使用紧邻同胞选择器(adjacent selector)。如若想把紧跟在h1元素的段落上外边距去掉,你可以这么写:

    h1 + p { margin-top:0 }

    640?wx_fmt=png

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    8、 X > Y:子元素选择器

    有时候我们并想选择所有的后代元素,而是想缩小范围,只选择一个元素的子元素,比如我们只想选择 #container>ul 定义id为container的div里的ul元素,而不是曾经更深的后代元素比如li里的ul。

    html文档结构:

    <div id="container">
    <ul>
    <li> List Item
    <ul>
    <li> Child </li>
    </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    </ul>
    </div>

    css代码如下:

    div#container > ul {
    border: 1px solid black;
    }

    文档选择树形结构:

    640?wx_fmt=png

    代码效果:

    640?wx_fmt=png

    浏览器兼容性:

    • IE7+

    • Firefox

    • Chrome

    • Safari

    • Opera

    9、 X ~ Y:后续同胞选择器

    后续同胞选择器使用 ~ 表示,选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像,但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子,我们选择所有ul后面的P元素。

    html文档结构:

       <div id="container">
    <ul>
    <li> List Item
    <ul>
    <li> Child </li>
    </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    </ul>

    <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    </div>

    css代码如下:

    ul ~ p {
    color: red;
    }

    文档选择树形结构:


    640?wx_fmt=png

    代码效果:

    640?wx_fmt=png

    浏览器兼容性:

    IE7+ Firefox Chrome Safari Opera

    10、 X[title]:简单属性选择器

    如果想选择具有某个属性的元素,而不管属性的值是什么,我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配,没有title属性的标签不会受到影响。你可以这么写代码:

    a[title] {
    color: green;
    }

    浏览器兼容性:

    IE7+ Firefox Chrome Safari Opera

    小节

    今天的内容就和大家分享到这里,CSS选择器是CSS的基础和重要内容,虽然简单,但是灵活掌握可不容易,接下来的文章,我将和大家继续分享CSS选择器的剩余内容。


    专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

    长按关注"前端达人"

    640?wx_fmt=gif
    640?wx_fmt=jpeg


    展开全文
  • HTML常用选择器

    千次阅读 2018-11-18 19:45:26
    元素选择器、id选择器、类选择器(class)、选择器分组(并集选择器)、通配选择器、复合选择器(交集选择器)。 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素。 语法:标签名{} &amp;nbsp...

    常用选择器

    在HTML中常见选择器有:
    元素选择器、id选择器、类选择器(class)、选择器分组(并集选择器)、通配选择器、复合选择器(交集选择器)。
    元素选择器
    作用:通过元素选择器可以选择页面中的所有指定元素。
    语法:标签名{}
      例如:

    p{
         color: darkmagenta;
     }
    

    id选择器
    作用:通过元素的id值选中唯一的元素。
    语法:#id属性值{}
      例如:

    #p1{
        font-size: 20px;
    }
    

    注意:一个HTML中id不允许重复
    类选择器
    作用:通过元素的class属性值选中一组元素。
    语法:.class属性值{}
    class属性值和id属性值相似,只不过class属性值可以重复。
      例如:

    .p2{
        color: aquamarine;
    }
    

    选择器分组(并集选择器)
    作用:通过选择器分组可以同时选中多个选择器对应的元素。
    语法:选择器1,选择器2,选择器n{}
      例如:

    #p1,.p2,h1{
        background-color: blue;
    }
    

    通配选择器
    作用:选中页面中的所有元素。
    语法:*{}

    *{
        color: yellow;
    }
    

    复合选择器(交集选择器)
    作用:可以选中同时满足多个选择器的元素。
    语法:选择器1选择器2选择器n{}
      例如:

    span.p3{
        color: yellow;
    }
    
    展开全文
  • CSS3选择器大全

    万次阅读 2018-08-16 13:49:26
    1.CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; ...
  • HTML各类选择器

    万次阅读 2018-06-11 21:29:44
    基本选择器:1.通配选择器(*)2.元素选择器(eg:p)3.类选择器(.class)4.ID选择器(#..)高级选择器:1.后代选择器(E(空格)F)2.子代选择器(E&gt;F)3.兄弟选择器(E+F)4.通用选择器(E~F)结构伪类选择...
  • 三种选择器 1. number one id选择器 <body> <div id="wraper"> 我的名号叫wraper,是id选择器内容 </div> </body> <style> *{ /* 这里的*号为通配符,不在叙说*/ margin: 0...
  • 选择器

    2019-08-05 21:13:33
    选择器允许单线程操作多个通道。如果你的程序中有大量的链接,同时每个链接的IO带宽不高的话,这个特性将 会非常有帮助。比如聊天服务器。 下面是一个单线程中Selector维护3个Channel的示意图: 要使用Selector的...
  • css选择器& 选择器的优先级

    千次阅读 2018-06-08 08:40:28
    一、选择器1.元素选择器 语法,作用给元素名为你设置的那个元素的元素名设置样式 元素名 { 样式列表 } 2.id选择器。通过元素的 id 属性给id赋值, #开始加上id名称。id名称在整个页面里是唯一的 id选择器语法 #...
  • CSS的四种基本选择器和四种高级选择器

    万次阅读 多人点赞 2019-03-10 21:42:44
    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 CSS的选择器分为两大类:基本选择题和扩展选择器。 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的...
  • html选择器

    2019-05-11 11:23:40
    选择器 (权重:写在后面的优先) 类选择器选择器命名:不建议写特殊字符,不以数字开头,常用选择器 <style type="text/css"> <!--类选择器命名:不建议写特殊字符,不以数字开头,常用选择器--> ...
  • 什么是选择器

    2018-03-12 15:53:27
    什么是选择器?每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如右侧代码...
  • jQuery 选择器

    万次阅读 多人点赞 2019-02-28 20:48:46
    一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成...
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...
  • Android自定义DataTimePicker(日期选择器

    万次阅读 多人点赞 2014-08-23 15:40:14
    Android自定义DataTimePicker(日期选择器) 笔者有一段时间没有发表关于Android的文章了,关于Android自定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中。本篇博客给大家分享的是自定义一个日期选择器,...
  • 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 看下相应的属性: 具体的来看看代码,布局:<view
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...
  • jQuery之属性过滤选择器

    万次阅读 2012-03-11 19:40:49
    查询到的元素进行过滤,属性过滤选择器包含了在中括号"[]"中,而不是以冒号开头,通常使用"选择器[属性过滤选择器]"语法格式,可以根据是否包含指定属性或者 根据属性值从查询到的元素中进行筛选。
  • 1. 温馨提示:Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版 2. 直接步入主题,先看下需求要实现的功能 就是一个级联联动效果,但是他是每一级都能够选择,可以看到既可以选商品组,还能选择商品组下面...
  • css高级选择器和基本选择器

    千次阅读 多人点赞 2019-07-05 17:17:10
    ID选择器>类选择器>标签选择器 1.层次选择器 *相邻兄弟选择器,只对后面的兄弟有作用,对前面的兄弟没效果。 *相邻兄弟选择器,E+F E不会产生效果效果 2.结构伪类选择器 使用E F:nth-child(n)和E F:...
1 2 3 4 5 ... 20
收藏数 2,429,354
精华内容 971,741
关键字:

选择器