您的位置：首页 > Web前端 > CSS

CSS选择器

2016-06-28 18:17 323 查看

CSS选择器

选择器：是CSS中的一个概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

  用户只需要通过选择器，就可以对不同的HTML标签进行控制，赋予各种样式的声明，即可实现各种效果。

  主要分为标记选择器，类别选择器，ID选择器。

  标记选择器

  一个HTML页面由很多不同的标记组成，标记选择器就是声明哪些标记采用哪种CSS样式。

比如，通过h1选择器来声明页面中所有的<h1>标记的CSS风格。

<span style="font-size:24px;"><style>
h1{
color:red;
font-size:25px;
}
</style>
</span>

  每一个CSS选择器都包含选择器本身，属性和值，其中属性和值可以设置多个，从而实现对同一个标记，设置多种样式风格。

  类别选择器

  标记选择器一旦声明，页面中所有的该标记都会产生相应的变化，如果希望对其中的某个标记进行设置，就需要类别选择器。

类别选择器的名称，由用户自定义，属性和值跟标记选择器一样。

<span style="font-size:24px;"><html>
<head>
<title>
class选择器
</title>
<style type="text/css">
<!--
.one{
color:red;
font-size:18px;
}
.two{
color:green;
font-size:20px;
}
.three{
color:cyan;
font-size:22px;
}
-->
</style>
</head>

<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
<p class="three">class选择器3</p>
<h3 class="two">h3同样适用</h3>
</body>
</html>
</span>

此外，类别选择器还有一种直观的使用方法，就是直接在标记声明后结类别名称，以此来区别该标记。

在HTML标记中，可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。

这在实际制作网页的时候很有用，可以减少代码的长度。

<span style="font-size:24px;"><html>
<head>
<title>
同时使用两个class
</title>
<style type="text/css">
<!--
.one{
color:blue;
}
.two{
font-size:22px;
}
-->
</style>
</head>

<body>
<h4>一种都不使用</h4>
<h4 class="one">只是用第一种样式</h4>
<h4 class="two">只是用第二种样式</h4>
<h4 class="one two">同时使用两种样式，同时使用</h4>
<h4></h4>
</body>
</html>
</span>

  ID选择器

  使用方法和class选择器基本相同，区别，ID选择器只能在HTML页面中使用一次，其针对性更强。

  在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。

  在很多浏览器中，ID选择器也可以用于多个标记，但是，将ID选择器用于多个标记是错误的，因为，每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用，

  如果一个HTML中，有两个相同的id的标记，那么将会导致JavaScript在查找id时出错，例如函数：getElementById()。

  正因为JavaScript等脚本语言，也能调用HTML中设置的id，因此，ID选择器一直被广泛的使用。

<span style="font-size:24px;"><html>
<head>
<title>
同时使用两个class
</title>
<style type="text/css">
<!--
#one{
font-weight:bold;
}
#two{
font-size:30px;
color:#009900;
}
-->
</style>
</head>

<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器3</p>
</body>
</html>
</span>

网站建设者，应该养成良好的习惯，一个id最多只能赋予一个HTML标记。

最后一行没有任何的效果显示，意味着ID选择器不支持类别选择器，那样的多风格同时使用，这是错误的写法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航