<!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>
选择器
最新推荐文章于 2024-01-14 11:54:30 发布