你的位置:首页 > 网页设计

[网页设计]CSS(二):CSS选择器

1.关系选择器

关系选择符可以分为:

选择器名称描述
E  F      包含选择器    选择所有被E元素包含的F元素。
E > F子选择器选择所有作为E元素的子元素F。
E + F相邻选择器选择紧贴在E元素之后F元素。
E ~ F兄弟选择器选择E元素所有兄弟元素F。

 

 

 

 

 

 

 

包含选择器:

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>