赞
踩
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{text-decoration:none} a:link{color:red} a:visited{color:blue} </style> </head> <body> <a href="#aa">link1</a> <a href="#bb">link2</a> <a href="#cc">link3</a> </body> </html>
页面效果:
可以看见未访问的(:link)是红色,访问后的(:visited)变成蓝色。
注意:隐私与:visited选择器,只有(color,background-color,border-color)才能被应用到已访问的链接
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{text-decoration:none} #box{width:100px;height:100px;background:red} #box:target{width:200px;height:200px;background:blue} </style> </head> <body> <a href="#box">点击放大</a> <div id="box"></div> </body> </html>
页面效果:
可以看见,当我们点击链接的时候id为box的div长、宽、颜色都发生了变化。
注意:使用:target绑定链接和元素的时候,链接的片段标识符(#后面的信息)必须和被绑定元素的id值相等。
注意:link :visited :target是作用于链接元素的!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单伪类</title> <style> input{display:block;margin-top:20px} input:enabled{background:red} input:disabled{background:blue} input:focus{background:green} input:checked{width:50px;height:50px} </style> </head> <body> <input type="text" disabled="disabled"> <input type="text"> <input type="text"> <input type="text"> <input type="checkbox"> </body> </html>
页面效果:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态伪类</title> <style> div:hover{background:red} div:active{background:blue} div{width:100px;height:100px;background:green} </style> </head> <body> <p>鼠标经过div变红,激活div变蓝</p> <div></div> </body> </html>
页面效果:
注意::hover :active基本可以用于所有的元素。
因此特别注意:由于a标签的:link和:visited可以覆盖了所有相同样式的a标签的状态,所以当:link,:visited,:hover,:active同时出现在a标签身上并且有一样的属性时 :link和:visited不能放在最后!!!
比如:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{text-decoration:none} a:hover{color:green} a:link{color:red} a:visited{color:blue} </style> </head> <body> <a href="#a1">link1</a> <a href="#a2">link2</a> <a href="#a3">link3</a> </body> </html>
页面效果:
可以看见鼠标经过元素颜色并没有变绿,我们把a:hover{color:green}放在后面试试:
<style>
a{text-decoration:none}
a:link{color:red}
a:visited{color:blue}
a:hover{color:green}
</style>
页面效果:
可以看见现在的效果才是正确的。
结构性伪类一共分两种:
1.#box el:nth-child(index) 匹配#box中第index的子元素 这个子元素必须是el.
2.#box el:nth-of-type(index) 匹配#box中第index的el子元素.
除此之外:nth-child和:nth-of-type有一个很重要的区别:
nth-of-type以元素为中心!!!
注意:在css中index是从1开始记数的,而不是从0开始。
index存在的变量只有n、even、odd3种。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0} li{list-style:none} #aa li:last-child{border:1px solid red} #aa li:first-child{border:1px solid blue} #aa li:nth-child(3){border:1px solid green} #aa li:nth-last-child(3){border:1px solid black} #bb p:only-child{background:red} </style> </head> <body> <ul id="aa"> <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> </ul> <ul id="bb"> <p>123</p> <!-- <li></li> --> </ul> </body> </html>
页面效果:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;list-style:none} #aa li:nth-of-type(3){border:1px solid red} #aa li:nth-last-of-type(3){border:1px solid blue} #aa li:first-of-type{border:1px solid green} #aa li:last-of-type{border:1px solid yellow} #aa li:nth-of-type(even){color:red} #aa li:nth-of-type(odd){color:blue} #aa span:only-of-type{background:red} span{float:left;width:100px;height:100px} </style> </head> <body> <ul id="aa"> <p>p1</p> <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> <p>p2</p> <span>span</span> </ul> </body> </html>
页面效果:
selector为不执行样式的元素或者选择器。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #aa div{border:1px solid;width:100%;height:100px;background:red} #aa div:empty{background:blue} #bb > .bb:not(:last-child){border:1px solid red} #bb > .bb:not(div){color:blue} </style> </head> <body> <p>empty:</p> <div id="aa"> <div></div> <div>div1</div> <div></div> <div>div2</div> </div> <p>not:</p> <div id="bb"> <div class="bb">div</div> <p class="bb">p</p> <span class="bb">span</span> <h3 class="bb">h3</h3> <h1 class="bb">h1</h1> </div> </body> </html>
页面效果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。