选择器

来源：互联网发布：mac ant安装编辑：程序博客网时间：2024/04/26 09:34
<!DOCTYPE html><!--<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">--><html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        /**************************** 基本选择器 ***************************/        /* 通配选择器 */        *{margin:0;padding:0;}        /* 元素选择器 */        ul{background:grey;}        /* ID选择器 */        #first{background:lime;color:#000;}        /* Class选择器 */        .item{background:green;font-weight:bold;}        /* 群组选择器 */        #first, .item{border-bottom:1px solid red;}        /**************************** 层次选择器 ***************************/        #selector2{width:300px;}        #selector2 div{margin:5px;padding:5px;border:1px solid #ccc;}        /* E F后代选择器 */        #selector2 div div{background:orange;}        /* E>F子选择器 */        #selector2 > div{background:green;}        /* E+F相邻兄弟选择器 */        #selector2 .active + div{background:lime;}        /* E~F通用兄弟选择器 */        #selector2 .active ~ div{background:red;}        /**************************** 伪类选择器 ***************************/        /* CSS3伪类选择器分6种：动态伪类选择器，目标伪类选择器，语言伪类选择器，UI状态伪类选择器，结构伪类选择器，否定伪类选择器 */                /* 动态伪类选择器(设置请遵循"爱恨原则"LoVe/Hate,即：link-visited-hover-active) */        #selector3 .btn{display:inline-block;padding:5px;background:grey;line-height:normal;text-align:center;color:white;text-decoration:none;border:0;cursor:pointer;}        /* E:link链接伪类选择器,选择匹配元素E，且定义了超链接，未被访问过 */        #selector3 .btn:link{background:green;}        /* E:visited链接伪类选择器，选择匹配元素E，且定义了超链接，已被访问过 */        #selector3 .btn:visited{background:red;}        /* E:hover用户行为伪类选择器，选择匹配元素E，且鼠标悬停其上 */        #selector3 .btn:hover{background:blue;}        /* E:active用户行为伪类选择器，选择匹配元素E，且被激活 */        #selector3 .btn:active{background:orange;}        /* E:focus用户行为伪类选择器，选择匹配元素E，且获取焦点 */        #selector3 .btn:focus{background-color:yellow;}        /* 目标伪类选择器,E:target选择链接的目标元素 */        #selector4 .accordionMenu{color:#424242;padding:10px;width:500px;}        #selector4 .accordionMenu h2{margin:5px 0;position:relative;}        #selector4 .accordionMenu h2 a{background:#8f8f8f;display:block;padding:10px 10px;text-decoration:none;}        #selector4 .accordionMenu :target h2 a{background:#2288dd;color:#fff;}        #selector4 .accordionMenu p{height:0;padding:0 10px;overflow:hidden;}        #selector4 .accordionMenu :target p{height:100px;}        #selector4 .highLight ul > li:target{background:yellow;}        /* 语言伪类选择器,E:lang(language)匹配指定language的元素 */        :lang(en){quotes:'"' '"';}        :lang(en) #selector5 p{color:red;}        :lang(fr){quotes:'<' '>';}        :lang(fr) #selector5 p{color:green;}        /* UI元素状态伪类选择器 */        /* E:checked选中状态伪类选择器，选择匹配选中的单复选按钮表单元素 */        #selector6 input:checked{width:50px;}        /* E:enabled启用状态伪类选择器，选择匹配所有启用的表单元素 */        #selector6 input:enabled{background:green;}        /* E:disabled不可用状态伪类选择器，选择匹配所有禁用的表单元素 */        #selector6 input:disabled{background:gray;}        /* 结构伪类选择器 */        #selector7 ul{width:400px;}        #selector7 ul li{display: inline-block;width:20px;height:20px;line-height:20px;text-align:center;margin:2px;color: #fff;background: #000;}        /* E:first-child选中父元素的第一个子元素 */        #selector7 ul > li:first-child{background:green;}        /* E:last-child选中父元素的最后一个子元素 */        #selector7 ul > li:last-child{background: blue;}        /* E:root选择匹配元素E所在文档的根元素(HTML文档中，根元素始终为html) */        #selector7 ul:root{background:red;}        /* E F:nth-child(n)选择父元素E的第n个子元素F(n可以是1,2,3...;even,odd;公式2n+1,-n+5,n的起始值为1) */        #selector7 ul > li:nth-child(3){background:yellow;}        #selector7 ul > li:nth-child(2n+1){background:pink;}        #selector7 ul > li:nth-child(odd){background:orange;}        /* E F:nth-last-child(n)选择元素E的倒数第n个子元素F */        #selector7 ul>li:nth-last-child(3){background:red;}        /* E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素 */        #selector7 div > p:nth-child(2){color:blue;}        #selector7 div > p:nth-of-type(2){color:red;}        /* E:nth-last-of-type(n)选择父元素内具有指定类型的倒数第n个E元素 */        /* E:first-of-type选择父元素内具有指定类型的第一个E元素 */        /* E:last-of-type选择父元素内具有指定类型的最后一个E元素 */        /* E:only-child选择父元素只包含一个子元素，且该子元素匹配E元素 */        #selector7 .post>span:only-child{color:yellow;}        /* E:only-of-type选择父元素只包含一个同类子元素，且该子元素匹配E元素 */        /* E:empty选择没有子元素的元素，而且该元素也不包含任何文本节点 */        #selector7 #results:empty{width:30px;height:20px;background:yellow;}        #selector7 table{border-spacing:0;}        #selector7 table td{border:1px solid #000;}        #selector7 table tr:first-child td:first-child{border-radius:6px 0 0 0;}        #selector7 table tr:first-child td:last-child{border-radius:0 6px 0 0;}        #selector7 table tr:last-child td:first-child{border-radius:0 0 0 6px;}        #selector7 table tr:last-child td:last-child{border-radius:0 0 6px 0;}        #selector7 table tr:nth-child(odd){background:#ccc;}        /* 否定伪类选择器 */        /* :not()用来定位不匹配该选择器的元素 */        #selecotr8 :not(.hello){color:red;}        /* 伪元素选择器 */        /* ::first-letter选择文本块的第一个字母 */        #selecotr9 .p1::first-letter{color:red;font-size:24px;}        /* ::first-line选择文本块的第一行 */        #selecotr9 .p2::first-line{color:blue;}        /* ::before,::after不是指存在于标记中的内容，而是可以插入额外内容的位置，配合content属性，可为伪元素生成内容 */        #selecotr9 a::after{content:"(" attr(href) ")";color:red;}        /* ::selection设置选中文字样式 */        #selecotr9 ::selection{color:pink;background:#000;}        /* 属性选择器 */        /* E[attr]选择匹配具有属性attr的E元素，其中E可省略 */        #selecotr10 a[href]{text-decoration:none;color:red;font-weight:bold;}        /* E[attr=val]选择匹配具有属性attr的E元素，且attr值为val(区分大小写) */        #selecotr10 a[href=hello]{color:blue;}        /* E[attr|=val]选择匹配具有属性attr的E元素，且attr值具有val或以val打头 */        #selecotr10 a[href|=hello]{color:yellow;}        /* E[attr~=val]选择匹配具有属性attr的E元素，且attr值有多个空格分隔开，其中一个为val */        #selecotr10 a[href~=hello]{color:pink;}        /* E[attr*=val]选择匹配具有属性attr的E元素，且attr值包含val */        #selecotr10 a[href*=world]{color:green;}        /* E[attr^=val]选择匹配具有属性attr的E元素，且attr值以val打头 */        #selecotr10 a[href^=wor]{color:gray;}        /* E[attr$=val]选择匹配具有属性attr的E元素，且attr值以val结束 */        #selecotr10 a[href$="6"]{color:deepskyblue;}    </style></head><body>    <ul>        <li id="first">1</li>        <li class="item">2</li>        <li class="item">3</li>        <li>4</li>    </ul>    <div id="selector2">        <div>1</div>        <div class="active">2</div>        <div>3</div>        <div>4            <div>5</div>            <div>6</div>        </div>        <div>7            <div>8                <div>9                    <div>10</div>                </div>            </div>        </div>    </div>    <div id="selector3">        <a href="javascript:void(0);" class="btn">View project on GitHub</a>    </div>    <div id="selector4">        <div class="accordionMenu">            <div class="menuSection" id="brand">                <h2><a href="#brand">Brand</a></h2>                <p>Lorem ipsum dolor...</p>            </div>            <div class="menuSection" id="promotion">                <h2><a href="#promotion">Promotion</a></h2>                <p>Lorem ipsum dolor sit amet...</p>            </div>            <div class="menuSection" id="event">                <h2><a href="#event">Event</a></h2>                <p>Lorem ipsum dolor sit amet...</p>            </div>        </div>        <div class="highLight">            <a href="#high2">High light</a>            <ul>                <li id="high1">High light 1.</li>                <li id="high2">High light 2.</li>            </ul>        </div>    </div>    <div id="selector5">        <p>Hello:           <q cite="http://www.wwf.org">Welcome</q>           we hope they succeed.        </p>    </div>    <div id="selector6">        <input type="radio" name="chooseColor" />        <input type="checkbox" />        <input type="text" />        <input type="text" disabled />    </div>    <div id="selector7">        <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>            <li>10</li>            <li>11</li>            <li>12</li>            <li>13</li>            <li>14</li>            <li>15</li>            <li>16</li>            <li>17</li>            <li>18</li>            <li>19</li>            <li>20</li>        </ul>        <div>            <h3>标题</h3>            <p>第一个段落</p>            <p>第二个段落</p>        </div>        <p class=".post">            <span>第一个段落</span>            <span>第二个段落</span>        </p>        <p class=".post">            <span>只有一个段落</span>        </p>        <div id="#results"></div>        <table>            <tr>                <td>No</td>                <td>Title</td>                <td>Content</td>            </tr>            <tr>                <td>1</td>                <td>Title1</td>                <td>Content1</td>            </tr>            <tr>                <td>2</td>                <td>Title2</td>                <td>Content2</td>            </tr>        </table>    </div>    <div id="selector8">        <div>Hello</div>        <div class="hello">Hello</div>        <div>Hello</div>    </div>    <div id="selecotr9">        <p class="p1">Hello world!</p>        <p class="p2">Hello <br />word!</p>        <a href="http:www.baidu.com">Goto</a>    </div>    <div id="selecotr10">        <a>0</a>        <a href="hello">1</a>        <a href="  hello  ">2</a>        <a href="  hello world  ">3</a>        <a href="helloworld">4</a>        <a href="worldhello">5</a>        <a href="hello world6">6</a>    </div></body></html>
0 0