CSS三种基本选择器介绍及应用

最新推荐文章于 2022-03-05 08:03:26 发布

King·Forward

最新推荐文章于 2022-03-05 08:03:26 发布

阅读量2.4k

点赞数

分类专栏： JavaWeb 文章标签： css class stylesheet html javascript div

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8020333

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
	<!-- 
		选择器
			就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择要作用样式的哪个容器
		选择器有三种：
			1，html标签选择器，使用的就是html的标签名。
			2，class选择器，其实是使用的标签中的class属性。
			3，id选择器，其实是使用的标签中的id属性。
		每一个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作，
		在定义当中，多个标签的class属性值可以相同，而id却要唯一，因为JavaScript中经常用。
	
	
	 -->
	
	
	
	
    <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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <style type="text/css">
  	/*span.haha{
  		color: red;
  	}
  	div.haha{
  		color:red;
  	}*/
  	/*可以像上面一样单独调用，但代码重复，建议用下面的方式*/
  	.haha{
  		color:red;
  	}
  	div{
  		color:yellow;
  	}
  	#div1{
  		color:blue;
  	}
  /*
  	上面三种选择器都作用与同一个标签的话，因为标签选择器范围最大，然后是class选择器次之，
  		id选择器最小，所以，以作用范围小的为准！！！
  */
  </style>
  <body>
    <span class="haha">span-------aaaaaaaaaaaaaaaaaa</span>
    <span>span-------bbbbbbbbbbbbbbb</span>
    <hr/>
    <div id="div1" class="haha">div----cccccccccccccccccccc</div>
    <div>div----dddddddddddddddddddddd</div>
    <hr/>
    <p class="haha">p---------eeeeeeeeeeeeeeeeeee</p>
    <p>p---------ffffffffffffffffff</p>
  </body>
</html>

King·Forward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS三种基本选择器介绍及应用

基本选择器 <!-- 选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择要作用样式的哪个容器选择器有三种： 1，html标签选择器，使用的就是html的标签名。 2，class选择器，其实是使用的标签中的class属性。 3，id选择器，其实是使用的标签中的id属性。每一个标签都定义了class属性和id属性，用于对标签进行标识，方
复制链接

扫一扫