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

[网页设计]CSS知识总结(二)


CSS的选择符分成:

  1. 通配选择符

  2. 元素选择符

  3. 群组选择符

  4. 关系选择符

  5. id及class选择符

  6. 伪类选择符

  7. 属性选择符

  8. 伪对象选择符

 

1.通配选择符(*)

  * 号表示所有的对象。

  所谓通配选择符,就是指可以使用模糊指定的方式来对象进行选择,指定样式。

  例子源代码:

/* CSS代码 */*{  color:gray;}

<!-- HTML代码 --><body>  <p>这是灰色字体的p标签</p>  <span>这是灰色字体的span标签</span></body>

  效果:

这是灰色字体的p标签

这是灰色字体的span标签

  

2.元素选择符

  所谓元素选择符,指以网页中已有的标签名作为名称的选择符。

   例子源代码:

/* CSS代码 */p{  color:gray;}span{  color:brown;}

<!-- HTML代码 --><body>  <p>这是灰色字体的p标签</p>  <span>这是棕色字体的span标签</span></body>

  效果:

这是灰色字体的p标签

这是棕色字体的span标签

 

3.群组选择符

  对一组标签进行相同的样式定义;使用逗号对选择符进行分隔,对页面中需要使用相同样式的地方,只需写一次样式。

  例子源代码:

/* CSS代码 */p,span{  color:brown;}

<!-- HTML代码 --><body>  <p>这是棕色字体的p标签</p>  <span>这是棕色字体的span标签</span></body>

  效果:

这是棕色字体的p标签

这是棕色字体的span标签

 

4.关系选择符

  a.包含选择符(E  F)

   选择所有被E元素包含的F元素。

  例子源代码:

/* CSS代码 */ul li a{  color:red;}

<!-- HTML代码 --><body>  <ul>    <li>      <a href="">菜单项</a>      <ul>        <li><a href="">列表项1</a></li>        <li><a href="">列表项2</a></li>        <li><a href="">列表项3</a></li>      </ul>    </li>  </ul></body>

  此例,使用ul li a,那么所有a标签都会变红色。

  效果:

  • 菜单项
    • 列表项1
    • 列表项2
    • 列表项3

 

  b.子选择符(E > F)

   选择所有作为E元素的子元素F。

  例子源代码:

/* CSS代码 */.nav > li > a{  color:red;}

<!-- HTML代码 --><body>  <ul class="nav">    <li>      <a href="">菜单项</a>      <ul>        <li><a href="">列表项1</a></li>        <li><a href="">列表项2</a></li>        <li><a href="">列表项3</a></li>      </ul>    </li>  </ul></body>

  此例,使用.nav>li>a,那么只有.nav的li下面的a标签才会变红色。

  效果:

  • 菜单项
    • 列表项1
    • 列表项2
    • 列表项3

 

  c.相邻选择符(E + F)

    选择紧贴在E元素之后的F元素。

  例子源代码:

/* CSS代码 */p+p{color:red;}

<!-- HTML代码 --><body>  <h3>这是一个标题</h3>  <p>这是第1个p标签</p>  <p>这是第2个p标签</p>  <h3>这是一个标题</h3>  <p>这是第3个p标签</p>  <p>这是第4个p标签</p></body>

  此例,使用p+p{color:red;},选择紧贴在p标签后的p标签,那么第2个p标签和第4个p标签将会变成红色。

  效果:

  这是一个标题

  这是第1个p标签

  这是第2个p标签

  这是一个标题

  这是第3个p标签

  这是第4个p标签

 

  d.兄弟选择符(E ~ F)

   选择E元素的所有兄弟元素F。

  例子源代码:

/* CSS代码 */p~p{color:red;}

<!-- HTML代码 --><body>  <h3>这是一个标题</h3>  <p>这是第1个p标签</p>  <p>这是第2个p标签</p>  <h3>这是一个标题</h3>  <p>这是第3个p标签</p>  <p>这是第4个p标签</p></body>

  此例,使用p~p{color:red;},选择p标签的其它所有p标签,那么第2个p标签、第3个p标签和第4个p标签将会变成红色。

  效果:

  这是一个标题

  这是第1个p标签

  这是第2个p标签

  这是一个标题

  这是第3个p标签

  这是第4个p标签

 

5.id及class选择符

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

  a.id选择符(E#id)

   id选择符可以为标有特定id的HTML元素指定特定的样式。

   id选择器以“#”来定义。

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

  例子源代码:

/* CSS代码 */#content{  color:gray;}

<!-- HTML代码 --><body>  <p id="content">正文内容</p></body>

  效果:

  正文内容

 

  b.class选择符(E.class)

   不同于id选择符的唯一性,class选择符可以同时定义多个。

  例子源代码:

/* CSS代码 */.a{  color:gray;}.b{  font-weight:bold;}

<!-- HTML代码 --><body>  <p class="a b">正文内容</p></body>

  效果:

  正文内容

 

6.伪类选择符

  伪类选择符种类特别多,这里并未列出所有的伪类选择符,但都支持现代浏览器(除了IE6-8)

  这里,我举例几个常用的伪类选择符:

  源代码:

/* CSS代码 */a{  text-decoration:none;  /*改变a链接的样式*/}a:link{  color:black;  /*设置超链接a在未被访问前的样式*/}a:visited{  color:gray;   /*设置超链接a在其链接地址已被访问过时的样式*/}a:hover{  color:blue;   /*设置元素在其鼠标悬停时的样式*/}a:active{  color:red;   /*设置元素在被用户激活时的样式*/}

<!-- HTML代码 --><body>  <p><a href="###">点击我吧</a></p></body>

  效果:

  点击我吧