您现在的位置:首页 >> 前端 >> 内容

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

时间:2013/12/27 8:34:12 点击:

  核心提示:类型选择器通过类型选择器可以选择某一类型的html标签,并对其使用样式。语法:selector {property1: value; property2:value; ...}示例:htmlheads...
 类型选择器

通过类型选择器可以选择某一类型的html标签,并对其使用样式。

 

语法:

 

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;}

            p h1{ color:Blue; font-size:20px;}

        </style>

    </head>

    <body>

        <h1>这是一个h1标签</h1>

        <p>

            <h1>这是一个包含在p内的h1标签</h1>            

        </p>

    </body>

</html>

 

 

 

 

p h1{ color:Blue; font-size:20px;}

这行代码只选择了所有p元素内部的h1元素,并将颜色改为红色,字体大小改为16px,p元素外部的所有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="https://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a>

    </body>

</html>

 

Tags:CS SS S选 选择 
作者:网络 来源:不详