CSS——选择器

来源：互联网发布：淘宝怎么使用农村淘宝编辑：程序博客网时间：2024/05/16 01:02

CSS中的一个重点内容就是选择器，下面介绍几个选择器；

1、标签选择器

构成：
标签名称｛

｝
举例：

<html><head>    <title>CSS选择器1</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <style type="text/css">    a{        color:blue;    }    </style></head> <body>    <a>----Welcome to CSS World----!</a></body></html>

2、id选择器

假设现在页面上有两个a标签，让第一个标签变为蓝色，第二个标签颜色不变。我们就可以为第一个a标签设置一个id。
构成：
＃标签id｛
｝
注意:使用id时，要保证id的值在页面上是唯一的。
举例：

<html><head>    <title>CSS选择器2</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- -->    <style type="text/css">    #one{        color:yellow;    }    </style></head> <body>    <a id="one">----Welcome to CSS World----!</a><br/>    <a>----Welcome to CSS World----!</a></body></html>

3、class选择器

假设现在有四个标签，我想让第一个和第三个标签颜色变化。
构成：
.标签class｛
｝
注意：页面上的class可以有多个相同。
举例：

<html><head>    <title>CSS选择器3</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- -->    <style type="text/css">    .one{        color:yellow;    }    </style></head> <body>    <p class="one">我是中国人！</p>    <p>我爱我的祖国！</p>    <a class="one">----Welcome to CSS World----!</a><br/>    <a>----Welcome to CSS World----!</a></body></html>

4、伪类选择器

选择标签的某个状态，需要配合其他的选择器来使用。
l ->link    未访问过
v ->visited    访问过
h ->hover    悬浮
a ->active    激活，点击

构成：
标签:状态｛
｝
举例：

<html><head>    <title>CSS选择器4</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <style type="text/css">    a:link{        color:yellow;    }    a:visited{        color:blue;    }    a:hover{        color:green;    }    a:active{        color:pink;    }    </style></head> <body>    <a href = "结合方式1.html" target="_blank">点我</a><br/></body></html>

5、组合选择器

构成：

#标签id,.标签class,font｛｝

举例：

<html><head>    <title>CSS选择器5</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- -->    <style type="text/css">    #one,.two,font{        color:yellow;    }    </style></head> <body>    <a id="one">点我</a><br/>    <p class="two">hello</a><br/>        <font>hi</font></body></html>

0 0