CSS3初学篇章_2(伪类选择符)
id与class选择符
id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用。
id选择符以"#"定义
class选择符以"."定义
#id{ color:red; } .class{ color:blue; } <p id="id">id选择符</p> <p class="class">class选择符</p>
伪类选择符
/*设置超链接a在未被访问前的样式*/ a:link{ color:black; } /*设置超链接a在其连接地址已被访问过时的样式*/ a:visited{ color: #ccc; } /*设置鼠标悬停在元素上时的样式*/ a:hover{ color:red; } /*设置元素在被用户激活时的样式(在鼠标点击后不释放时)*/ a:active{ color: blue; }
.s{ color:red; }
/*匹配不含有s选择符的元素p*/ p:not(s){ color:blue; } <p class="s">111</p> <p>222</p>
效果图:
/*匹配父元素的第一个*/ ul li:first-child{ color: red; } /*匹配父元素的最后一个*/ ul li:last-child{ color: blue; } /*匹配父元素的倒数第二个*/ ul li:nth-last-child(2){ color:green; } /*匹配父元素的第二个*/ ul li:nth-child(2){ color:purple; }
<ul> <li>列表第1行</li> <li>列表第2行</li> <li>列表第3行</li> <li>列表第4行</li> <li>列表第5行</li> </ul>
效果图:
E:only-child
匹配父元素仅有的一个子元素E
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
li:only-child { color: #f00; } <ul> <li>只有唯一一个子元素</li> </ul>
/*匹配同类型中的第一个同级兄弟元素p*/ p:first-of-type{ color:red; } /*匹配同类型中的最后一个同级兄弟元素p*/ p:last-of-type{ color:blue; } /*匹配同类型中的第n个同级兄弟元素p*/ p:nth-of-type(2){ color:purple; } /*匹配同类型中的倒数第n个同级兄弟元素p*/ p:nth-last-of-type(2){ color:green; } /*匹配同类型中的唯一的一个同级兄弟元素small*/ small:only-of-type{ color:#ccc; }
<p>第1个p标签</p> <p>第2个p标签</p> <p>第3个p标签</p> <p>第4个p标签</p> <p>第5个p标签</p> <small>唯一的small</small>
E:focus
设置元素在成为输入焦点时的样式。(该元素的onfocus事件发生)
input:focus{ outline: solid 2px red; } <input type="text" />
E:empty
匹配没有任何子元素(包括text节点)的元素E。
p:empty { height: 25px; width:25px; background: #ccc; } <p><!--没有东西的p--><p> <p>有东西的p<p>
E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
input:checked{ width: 30px; } <input type="radio" name="1"/>1 <input type="radio" name="1"/>2 <input type="radio" name="1"/>3
E:enabled
匹配用户界面上处于可用状态的元素E。
E:disabled
匹配用户界面上处于禁用状态的元素E。
li { padding: 3px; } input[type="text"]:enabled { border: 1px solid #090; background: #fff; color: #000; } input[type="text"]:disabled { border: 1px solid #ccc; background: #eee; color: #ccc; }
<ul> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="可用状态" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> <li><input type="text" value="禁用状态" disabled="disabled" /></li> </ul>
E:target
匹配相关URL指向的E元素。
URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。
a:target{ color: red; } <a href="#n1" id="n1">链接1</a> <a href="#n2" id="n2">链接2</a> <a href="#n3" id="n3">链接3</a>