ID选择器与Class类选择器区别

最新推荐文章于 2024-05-20 18:40:16 发布

菲菲会灰

最新推荐文章于 2024-05-20 18:40:16 发布

阅读量9.8k

点赞数 9

分类专栏：前端开发文章标签： ID选择器 Class选择器

本文链接：https://blog.csdn.net/weixin_43734012/article/details/84318614

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

class和id选择器得区别：class选择器的值不是唯一的，我可以在多个标签共用一个class名
ID选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<!--
			ID选择器：要给添加样式标签添加一个id属性
			特点：id属性的值是唯一的
			css中id选择器以#号来定义
		-->
		<style>
			#menu{
				background-color: #808080;/*背景颜色*/
				color: white;/*字体颜色*/
				font-size: 36px;/*字体大小*/
				width: 300px;
				font-family: "宋体";
			}
			#test{
				color: red;
			}
		</style>
	</head>
	<body>
		<header>
		<!--nav 导航标签-->
       <nav id="menu">
           <ul>
               <li>新闻资讯</li>
               <li>娱乐天地</li>
               <li>体育竞技</li>
               <li>文化传媒</li>
           </ul>
       </nav>
   </header>
    <main>
        <div id="test">
            <p>5万把共享雨伞不到一天全部“消失”</p>
            <article>
                <section>
                    <h2>国内新闻</h2>
                    <p>嫦娥七号顺利发射成功!</p>
                <ction>
                <section>
                    <h2>国际新闻</h2>
                    <p>国际油价大幅度上涨。每桶价格提高80美分。</p>
                <ction>
            </article>
        </div>
        
    </main>
	</body>
</html>

效果图 Class选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<!--
			类选择器：给要添加样式得元素添加一个属性叫class
			在css中类选择器以"."开头
			class和id选择器得区别：class选择器的值不是唯一的，我可以在多个标签共用一个class名
		-->
		<style>
			.test1{
				color: blue;
				font-weight: bold;
			}
			.test2{
				background-color: aquamarine;
			}
			.test3{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<ul >
			<li class="test1 test2">新闻</li>
			<li>视频</li>
			<li>体育</li>
			<li>娱乐</li>
		</ul>
		<p class="test1 test3">中国突然作出这样得决定 澳大利亚懵了</p>
	</body>
</html>

效果图
不足之处,请多指教!

菲菲会灰

关注

9
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
ID选择器与Class类选择器区别

class和id选择器得区别：class选择器的值不是唯一的，我可以在多个标签共用一个class名ID选择器：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;ID选择器&lt;/title&gt; &lt;!-- ID选择器：要给添
复制链接

扫一扫