css学习笔记（二）

zhang_liang_ran

浏览: 6483 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+html+div+css

CSS HTML

css中的选择器selector

选择器分为：html标签选择器、class选择器、id选择器、关联选择器、组合选择器、伪元素选择器
1.html标签选择器
例：
<html>
   <head>
        <style>
            
        </style>
   </head>
   <body>
       <p>
           html标签选择器
        </p>
   </body>
</html>
2.class选择器
第一种情况：关联class例：
在test.css中
p.A{color:red;background:green;...}
在a.html中
<html>
   <head>
        <link rel="Stylesheet" href="test.css" type="text/css">
   </head>
   <body>
       <p class="A">
           class选择器
        </p>
   </body>
</html>

第二种情况：独立class例：
在test.css中
.A{color:red;background:green;...}
作用于所有class为A的html标签元素
在a.html中
<html>
   <head>
        <link rel="Stylesheet" href="test.css" type="text/css">
   </head>
   <body>
       <p class="A">
           class选择器
        </p>
       <div class="A">
          独立class选择器
        </div>
   </body>
</html>

3.id选择器

例：
在test.css中
#B{color:blue;background:green;...}
在a.html中
<html>
   <head>
        <link rel="Stylesheet" href="test.css" type="text/css">
   </head>
   <body>
       <p id="B">
           id选择器
        </p>
   </body>
</html>

4.关联选择器
例：
在a.html中
<html>
   <head>
       <style>
            
        </style>

   </head>
   <body>
       <p>
           关联选择器
            <em>关联选择器</em>
        </p>
   </body>
</html>

5.组合选择器
例：
在a.html中
<html>
   <head>
      <style>
         
        </style>
   </head>
   <body>
       <h1>组合选择器</h1>
       <h2>
          组合选择器
        </h2>
       <p>
           组合选择器
        </p>

   </body>
</html>

6.伪元素选择器
用于同一html标签元素的各种状态的样式设置
格式为：
html元素：伪元素{color:red;background:green;...}
html元素.class选择器名:伪元素{color:red;background:green;...}
一般常用的伪元素有：
A：active{color:red;background:green;...}链接点击时
A:hover{color:red;background:green;...}鼠标放到链接上时
A:link{color:red;background:green;...}正常链接
A:visited{color:red;background:green;...}访问后的链接
P:first-line{color:red;background:green;...} 段落首行
P:first-letter{color:red;background:green;...}首行首字母

分享到：

CSS学习笔记（三） | css学习笔记（一）

2009-11-07 02:24
浏览 692
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论