CSS选择器

最新推荐文章于 2025-03-06 12:11:45 发布

原创最新推荐文章于 2025-03-06 12:11:45 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许也可以转载。

Web笔记专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS中的四种基本选择器：标签选择器、ID选择器、类选择器及伪类选择器，并通过实例展示了这些选择器的具体应用。此外，还探讨了选择器的综合使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <title>选择器.html</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">
p{
   color: red;
}
</style>
<body>
	<p>Hello world!</p>
</body>
  -->

<!-- 第二种选择器：  id选择器 
 <style type="text/css">
 #one{
 	color: yellow;
 }
 <body>

 <a id="one">Hello World!</a>
 </body>
 -->
  <!--第三种选择器：class选择器 
  <style type="text/css">
  .one{
  color: green;
  }
  <body>
   <p>床前明月光 </p>
   <p class="one">Hello World！ </p>
   <a class="one">Hello world!</a><br>
   <a>Hello World!</a>
  </body>
-->
<!-- 第四种选择器：伪类选择器  ：选择标签的某个状态，需要配合其他选择器使用
l  未访问过
v  访问过
h	悬浮
a	激活
<style type="text/css">
a:link{
	color: pink;
}
a:visted{
	color: black;
}
a:active {
	color:green;
}
a:hover{
color:blue;
}
<body>
   <a href="www.baidu.com">Hello World!</a>
  </body>
</style>
-->



<!--  -->
<!-- 选择器综合使用 -->
<style type="text/css">
#one,.two,font{

color: green;
}

</style>
  </head>
  <body>
   <a id="one" href="www.baidu.com">Hello World!</a>
   <p class="two"> Hello World!</p>
   <font>Hello World!</font>
  </body>
</html>