标签总结

最新推荐文章于 2023-05-07 23:36:37 发布

Continuous_Ice

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量242

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/sinat_29453959/article/details/52484761

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第8章 css选择器

学自imooc

8-4 ID选择器

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>id选择器</title>
<style type="text/css">
<strong>#stress</strong>{
    color:red;
}
<strong>#setGreen</strong>{
    color:green;
}
   
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩</p>
    <p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span></p>
</body>
</html>

8-5类和ID选择器的区别

学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：

相同点：可以应用于任何元素
不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，

上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有

这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的：

<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上

课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这

个<span style="color:#FF0000;"><span id="stress"></span>勇气</span>来回答老师提出的问题。</p>

同一个id不能用第二次！

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，

ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

下面的代码是 不正确的

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="<span style="color:#FF0000;">stressid bigsizeid</span>">三年级</span>下学期时，我们班上了一节公开课...</p>