CSS选择器详解(一)常用选择器

当前位置 : 首页 > 网页制作 > CSS > CSS选择器详解(一)常用选择器

CSS选择器详解(一)常用选择器

来源: 作者: 时间:2016-01-28 09:27
类型选择器通过类型选择器可以选择某一类型的html标签,并对其使用样式。语法:selector {property1: value; property2:value; }示例:html head style type=text css
 类型选择器
通过类型选择器可以选择某一类型的标签,并对其使用样式。
 
语法:
 
selector {property1: value; property2:value; ...}
示例:
 
 
<html>
    <head>
        <style type="text/css">            
            h1 { color:Red; font-size:30px;}            
        </style>
    </head>
    <body>
        <h1>这是一个h1标签</h1>        
    </body>
</html>
 
 
 
h1 { color:Red; font-size:30px; }
这行代码选择了h1标签,并将h1元素的颜色改为红色,字体大小改为20px. 类型选择器也可以使用嵌套的形式来选择类型,这种方式也被称为后代选择器
 
示例:
 
 
<html>
    <head>
        <style type="text/css">            
            h1 { color:Red; font-size:30px;}
            div h1{ color:Blue; font-size:20px;}
        </style>
    </head>
    <body>
        <h1>这是一个h1标签</h1>
        <div>
            <h1>这是一个包含在div内的h1标签</h1>            
        </div>
    </body>
</html>
 
 
 
 
div h1{ color:Blue; font-size:20px;}
这行代码只选择了所有div元素内部的h1元素,并将颜色改为红色,字体大小改为16px,div元素外部的所有h1都不会受到影响。
 
 
 
  类选择器
通过类选择器可以选择class相同的html标签,并对其使用样式。
 
语法:
 
.selector { property1: value; property2: value; ...}
示例:
 
 
<html>
    <head>
        <style type="text/css">            
            .error-message { color:Red; line-height:2px;}            
        </style>
    </head>
    <body>
        <h3 class="error-message">Error Message:</h1>
        <p class="error-message">description</p>        
    </body>
</html>
 
 
 
.error-message { color:Red; line-height:2px;}    
这行代码选择了所有类为error-message的元素,并将其颜色改为红色,行间距改为2px.
 
 
 
  ID选择器
ID选择器可以选择ID为某值的特定元素,并对其使用样式。
 
语法:
 
#selector { property1: value; property2:value; ...}
示例:
 
 
<html>
    <head>
        <style type="text/css">            
            #title { color:Gray;}            
        </style>
    </head>
    <body>
        <h1 id="title">Title</h1>    
    </body>
</html>
 
 
 
#title { color:Gray;}        
这行代码选择id为title的元素,并将其颜色改为Gray.
 
 
 
Tips:
 
有时页面会出现很多包含类或ID的元素,而它们之间的差异仅仅是出现在页面中的位置不同,不要给这些元素指定不同的类或ID,应将一个类或ID赋给它们的父元素,然后使用后代选择器定位它们。
 
 
  伪类
 
有时我们需要根据文档结构之外的其它条件对元素应用样式,伪类用于向某些选择器添加特殊效果。
 
 
 
语法:
selector : pseudo-class {property1: value; property2:value;}
 
 
示例1:
 
<html>
    <head>
        <style type="text/css">            
            a:link{color: Red;}        
            a:hover{color: Green;}
            a:visited{color: Blue;}
        </style>
    </head>
    <body>
        <a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a>
    </body>
</html>
 
Tag:
网友评论

<