CSS(二)：CSS选择器

时间：2016-08-10 12:25:03 阅读：207 评论：0 收藏：0 [点我收藏+]

标签：

1.关系选择器

关系选择符可以分为：

包含选择器：

div p{
    color:red;
}

<div>
    <p>红色</p>
</div>

子选择器：

div > p{
    color:red;
}

<div>
    <p>红色</p>
</div>

相邻选择器：

p + a{
    color:red;
}

<div>
    <p>段落</p>
    <a href="#">红色链接</a>
</div>

兄弟选择器：

p ~ a{
    color:red;
}

<div>
    <p>段落</p>
    <a href="#">红色链接</a>
</div>

id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。

在网页中，每个id名称中只能使用一次，不得重复。

#selector{
    color:red;
}

<div>
    <p id="selector">红色段落</p>
    <p>段落</p>
    <p>段落</p>
</div>

.selector{
    color:red;
}

<div>
    <p class="selector">红色段落</p>
    <p>段落</p>
    <p class="selector">红色段落</p>
</div>

E:link：

设置超链接a在未被访问前的样式。

a:link{
    color:black;
}

<a href="#">未被访问时为黑色</a>

E:visited：

设置超链接a在其链接地址已被访问过时的样式。

a:visited{
    color:blue;
}

<a href="#">访问过后为蓝色</a>

E:hover：

设置元素在其鼠标悬停时的样式。

a:hover{
    color:red;
}

<a href="#">鼠标悬停时为红色</a>

E:active：

设置元素在被用户激活 (在鼠标点击与释放之间发生的事件)时的样式。

a:active{
    color:orange;
}

<a href="#">链接被激活时为橘色</a>

E:focus：

设置元素在成为输入焦点 (该元素的onfocus事件发生)时的样式。

/* input标签获得焦点时字体为红色 */
input:focus{
    color:red;
}

<input type="text">

E:first-child：

选中父元素的第一个子元素E。

li:first-child{
    color:red;
}

<ul>
    <li>列表1：红色</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

E:last-child：

选中父元素的最后一个子元素E。

li:last-child{
    color:red;
}

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3：红色</li>
</ul>

标签：

原文地址：http://www.cnblogs.com/nervdy/p/5756060.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行