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>