css类选择器使用_css 通过类选择器-CSDN博客

本文链接：https://blog.csdn.net/xiaohuiQAQ/article/details/78115687

css类选择器

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>类选择器</title>
  <style type="text/css">
  /*根据继承，给父元素设置样式，子元素也会继承*/
	/*针对某一类标签，可以使用标签选择器*/
	p{font-size:15px;color:blue;}
	/*针对某一个元素，ID选择器*/
	#two{font-size:20px;color:green;font-weight:bold;}
	/*针对某一类元素，设置相同的样式*/
	.waring{color:red;}
	.bigText{font-size:36px;font-weight:bold;}

 </style>
 </head>
 <body>
	  <div>1. 每天告诉自己一次，『我真的很不错』</div>
	  <!--id选择器使用时在标签里加id=""-->
	  <p id="two">2. 生气是拿别人做错的事来惩罚自己</p>
	  <!--类选择器在使用时在标签里加class=""-->
	  <h1 class="waring">3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
	  <p>4. 明天的希望，让我们忘了今天的痛苦
	  5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
	  </p>
	  <p class="waring bigText">9. 发光并非太阳的专利，你也可以发光<p>
	  <div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
	  <div class="waring">12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
  
 </body>
</html>

css继承以及优先级

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>类选择器</title>
  <style type="text/css">
  /*根据继承，给父元素设置样式，子元素也会继承*/
	body{
			font-size:12px;
			color:blue;
	}
	p{
		color:green;
	}
	p{
		color:red;
	}
 </style>
 </head>
 <body>
	  <div>1. 每天告诉自己一次，『我真的很不错』</div>
	  <!--id选择器使用时在标签里加id=""-->
	  <p>2. 生气是拿别人做错的事来惩罚自己</p>
	  <!--类选择器在使用时在标签里加class=""-->
	  <h1>3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
	  <p>4. 明天的希望，让我们忘了今天的痛苦
	  5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
	  </p>
	  <p>9. 发光并非太阳的专利，你也可以发光<p>
	  <div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
	  <div>12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
  
 </body>
</html>

总结：
1.可以同时给某个元素应用多个类<p class="a1 a2"></p>,在类名与类名之间用空格分隔
2.id选择符可以多个元素使用，但最好只一个使用。
3.类名或ID名不要用数字开头，不生效。
css特点：
1.继承，子元素继承父元素的某些样式，
【某些不是全部，因为有些子元素本身就有默认值，所以就不用父元素】
2.层叠：子元素如果定义了和父元素相同的样式，会覆盖掉父元素的样式
*******后面的样式会覆盖前面的样式。

css样式的优先权:当样式有冲突时，听谁？
内联式>内嵌式>链接式>导入式@import，一般使用第二和第三个样式配合使用
css优先权：就近原则
选择符优先权：
行内>ID>类选择器class>标签选择器

特殊情况可以提升优先权：在属性值后面+!important(IE6不支持)