CSS(二)：CSS选择器

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>

2.id及class选择器

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 >红色段落</p>  <p>段落</p>  <p >红色段落</p></div>

3.伪类选择器

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>

原标题：CSS(二)：CSS选择器

关键词：CSS