css选择的样式（二）：css选择器、css继承、层叠和优先级

本文链接：https://blog.csdn.net/qq_42012782/article/details/116332088

一、css选择器

css规则由两部分组成：选择器、声明。
css选择器：标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器；

标签选择器：以HTML标签作为选择器；

类选择器：只要通过class属性引用类选择器设置的样式，那该标签引用相应样式；

ID选择器：为HTML标签添加Id属性：<p id="a"></p>；
通过ID选择器来为具有此ID的元素设置css规则：#a{color：red}。；

全局选择器：所有标签设置样式*{color:blue; }；

群组选择器:集体统一设置样式；

后代选择器：
p em{color: blue;}/*p标签中的em*/
h1.special em{color: orange;}/*class为special的h1标签中的em*/

代码：

<!DOCTYPE html>
<html>
<head>
	<title>css选择器</title>
	<style type="text/css">
		/*通过标签选择器设置样式，那使用该标签的内容都引用该样式*/
		p{
			color: red;
			
		}
		/*类选择器：只要通过class属性引用类选择器设置的样式，那该标签引用相应样式*/
		.special{
			color: blue;
			font-size: 50px;
		}
		/*可对不同类型元素的同一个名称的类选择器设置不同的样式规则
		p.special{}(只有设置了class为special的<p>标签，才可以引用该样式)*/
		p.special{font-size: 30px;}
		.one{
			text-decoration: underline;
		}
		/*Id选择器*/
		#two{
			color: green;
		}
		#three{
			font-size: 50px;
		}
		h1{font-size: 50px;}
		/* 群组选择器:集体统一设置样式*/
		/*class和id的值区分大小写*/
		#three,h1{font-size: 50px}
		/*全局选择器：所有标签设置样式
          *{
	        color:blue;
          }
		*/
		/*后代选择器*/
		p em{color: blue;}/*p标签中的em*/
		h1.special em{color: orange;}/*class为special的h1标签中的em*/
		
	</style>
</head>
<body>
<!-- css规则由两部分组成：选择器、声明-->
<!-- css选择器：标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器-->
<!--标签选择器：以HTML标签作为选择器-->

     <h1 class="special"><em>css</em>是什么</h1><!--<em>倾斜标签-->
     <p><em>css</em>层叠样式</p>
     <!-- 同一个元素可以设置多个类，之前有空格隔开-->
     <p class="special one">用于定义HTML内容在浏览器中的显示样式</p>
     <p><em>css</em>样式由选择器和声明组成</p>
     <!--ID选择器：为HTML标签添加Id属性：<p id="a"></p>；
     	通过ID选择器来为具有此ID的元素设置css规则：#a{color：red}。-->
     <div>
     	<h1 id="two"><em>css</em>使用方法</h1>
     	<ul id="three">
     		<li>行内样式</li>
     		<li>内部样式</li>
     		<li>外部样式</li>
     		<li>导入样式</li>
     	</ul>
     	<h1><em>css</em>选择器</h1>
     	<ul>
     		<li>类型选择器</li>
     		<li>ID选择器</li>
     		<li>class选择器</li>
     		<li>后代选择器</li>
     	</ul>
     </div>

</body>
</html>

效果：

二、css伪类选择器

伪类：伪类选择器定义特殊状态下的样式；无法用标签、id、class、及其他属性实现

链接伪类：
       链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态。
       激活的链接的伪类（：active）；
       已访问的连接伪类（：visited）；
       未访问链接的伪类（：link）；
       鼠标悬停状态的伪类（：hover）；

链接伪类的编写顺序：
       :link > :visited > :hover > :active
       说明：
       1、a:hover必须置于a:link和a:visited之后，才有效；
       2、a:active必须置于a:hover之后，才有效；
       3、伪类名称对大小写不敏感

代码知识：

<!DOCTYPE html>
<html>
<head>
	<title>css伪类选择器</title>
	<!--伪类：伪类选择器定义特殊状态下的样式；无法用标签、id、class、及其他属性实现-->
	<style type="text/css">
		/*链接伪类的编写顺序：
		:link > :visited > :hover > :active
		说明：
		1、a:hover必须置于a:link和a:visited之后，才有效；
		2、a:active必须置于a:hover之后，才有效；
		3、伪类名称对大小写不敏感*/
		a:link{color: blue;}/*未访问状态*/
		a:visited{color: gray;}/*已访问状态*/
		a:hover{color: green;}/*鼠标悬浮状态*/
		a:active{color: orange;}/*激活状态*/
        /* 伪类:hover和:avtive不单单用于a标签，还用于其他元素。
		   1.:hover用于访问的鼠标经过某个元素时；
		   2.:active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）*/
		p:hover{color: red;}
		p:active{font-size: 20px;}
        /*对链接添加不同的效果，可以使用class类*/
		a.one:link{color: blue;}/*未访问状态*/
		a.one:visited{color: gray;}/*已访问状态*/
		a.one:hover{color: green;}/*鼠标悬浮状态*/
		a.one:active{color: orange;}/*激活状态*/

		a.two:link{color: green;}/*未访问状态*/
		a.two:visited{color: blue;}/*已访问状态*/
		a.two:hover{color: gray;}/*鼠标悬浮状态*/
		a.two:active{color: red;}/*激活状态*/

		/*对链接添加不同的效果，可以使用后代选择器*/
		p a:link{color: blue;}/*未访问状态*/
		p a:visited{color: gray;}/*已访问状态*/
		p a:hover{color: green;}/*鼠标悬浮状态*/
		p a:active{color: orange;}/*激活状态*/
		div a:link{color: blue;}/*未访问状态*/
		div a:visited{color: gray;}/*已访问状态*/
		div a:hover{color: green;}/*鼠标悬浮状态*/
		div a:active{color: orange;}/*激活状态*/
	</style>
</head>
<body>
	<!--链接伪类：
		链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态。
		激活的链接的伪类（：active）；
		已访问的连接伪类（：visited）；
		未访问链接的伪类（：link）；
		鼠标悬停状态的伪类（：hover）；
	-->
	<p><a href="http://www.baidu.com" target="_blank" class="one">css使用方法</a></p>
	<br/>
	<div>
	<a href="http://www.baidu.com" target="_blank" class="two">css选择器</a></div>

    <p>百度</p>
</body>
</html>

效果：

三、css继承和层叠

css层叠：
       1、可以定义多个样式；
       2、不冲突时，多个样式可以层叠为一个；
       3、冲突时，按不同样式规则优先级来应用样式。

继承的好处：
1、父元素设置样式，子元素可以继承部分属性；
2、减少css代码；

代码知识：

<!DOCTYPE html>
<html>
<head>
	<title>css继承和层叠</title>
<!-- 继承的好处：
1、父元素设置样式，子元素可以继承部分属性；
2、减少css代码；
 -->
	<style type="text/css">
		p{color: red;}/*整个p标签里面的内容都会变成红色，即span标签继承了父标签p的样式*/
		/*div{font-size: 12px;
			border: 1px solid red;}*/
		/*body,table,tr,td{font-size: 12px;}*/
		h1{color: red;}
		h1{color:blue;}/*当样式冲突蓝色会把红色覆盖，这个就是样式的层叠*/
		/*css层叠：
		1、可以定义多个样式；
		2、不冲突时，多个样式可以层叠为一个；
		3、冲突时，按不同样式规则优先级来应用样式。*/

	</style>
</head>
<body>
	<!-- <div>
		<p>css<span>继承</span></p>
		<div>css层叠</div>
	</div>
    <p>css继承和层叠</p> 
    <table border="1">
    	<tr>
    		<td>css继承</td>
    		<td>css层叠</td>
    	</tr>
    </table> -->
    <h1>css继承和层叠</h1>
</body>
</html>

四、css选择器优先级

！important声明高。

css使用方法优先级：行内样式 > 内部样式 > 外部样式；
说明：
1、链入外部样式表与内部样式表之间的优先级取决于所处位置的先后；
2、最后定义的优先级最高（就近原则）

css选择器的优先级：

id选择器 >class选择器 > 标签选择器 >通配符；

css优先级规则：
1、权值相同：就近原则（离被设置元素越近优先级越高）
2、权值不同：根据权值来判断css样式；哪种css样式权值高，就使用哪种样式。
选择器的权值：
1、标签选择器的权值为1；
2、类选择器和伪类的权值为10；
3、ID选择器的权值为100；
4、通配符选择器的权值为0；
5、行内样式的权值为1000。

权值规则：
1、统计不同选择器的个数；
2、每类选择器的个数乘以相应权值；
3、把所有的值相加得出选择器的权值。
css样式命名规则：
1、采用英文字母开头、数字以及“-”和“_”命名；
2、以小写字母开头，不能以数字和“-”、“_”开头；
3、命名形式：单字，连字符，下划线和驼峰；
4、使用有意义

id和class使用：

1、id不要滥用，谨慎使用；

2、适当使用class。

代码知识：

<!DOCTYPE html>
<html>
<head>
	<title>css选择器的优先级</title>
	<!-- css使用方法优先级：行内样式 > 内部样式 > 外部样式；
说明：
     1、链入外部样式表与内部样式表之间的优先级取决于所处位置的先后；
     2、最后定义的优先级最高（就近原则）。 -->
     <style type="text/css">
     	/*div{color: red;}
     	#idgreen{color: green;}
     	.classblue{color: blue}
     	.classyellow{color: yellow;}*//*多个class会引用后定义的样式（就近原则）*/
     /*	div{color: gray;}*/
        *{color: black;} /*0*/
        b{color: purple;}/*1*/
        p b{color: yellow ! important;}/*2*/
        .classblue{color: blue;}/*10*/
        div #test2 b{color:gray;}/*102*/
        #test1 p b{color: orange;}/*102*/
        div p .calssbule{color: red;}/*12*/


     </style>
</head>
<body>
	<p>派生选择器优先级</p>
	<div id="test1">
		<h1>css样式优先级</h1>
		<p id="test2">所谓<b class="classblue" style="color: pink;">css优先级</b>，就是指css样式在浏览器中被解析的先后顺序</p>
		<div><b>权值不同</b>，就近原则；<b>权值不同</b>，哪个权值高，使用哪个。</div>
	</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

	<br/>
	<p>单独使用</p>
	<div>使用标签选择器样式</div>
	<div id="idgreen">使用ID选择器样式"绿色"</div>
	<div class="classblue">使用class选择器样式</div>
	<!-- 优先级结果：id选择器 > 标签选择器; class选择器 > 标签选择器;-->

	<p>同一个元素引用标签、id、class定义的样式</p>
	<div id="idgreen" class="classblue">css优先级，同时引用标签、id、class定义的样式</div>
	<div  class="classblue" id="idgreen" >css优先级，同时引用标签、id、class定义的样式</div>
   <!-- 优先级结果：id选择器 >class选择器 > 标签选择器;-->

   <p>同一个元素引用多个class定义的样式</p>
   <div class="classblue classyellow">css优先级,蓝色在前，黄色在后</div>
   <div class="classyellow classblue">css优先级,黄色在前，蓝色在后</div>
   <div>css优先级</div>
   <!-- 优先级结果：同类样式多次引用，样式表中后定义的优先级高 -->

   <!-- css优先级规则：
   1、权值相同：就近原则（离被设置元素越近优先级越高）
   2、权值不同：根据权值来判断css样式；哪种css样式权值高，就使用哪种样式。
   选择器的权值：
   1、标签选择器的权值为1；
   2、类选择器和伪类的权值为10；
   3、ID选择器的权值为100；
   4、通配符选择器的权值为0；
   5、行内样式的权值为1000。

   权值规则：
   1、统计不同选择器的个数；
   2、每类选择器的个数乘以相应权值；
   3、把所有的值相加得出选择器的权值。 -->
   <!-- css样式命名规则：
   1、采用英文字母开头、数字以及“-”和“_”命名；
   2、以小写字母开头，不能以数字和“-”、“_”开头；
   3、命名形式：单字，连字符，下划线和驼峰；
   4、使用有意义 -->
</body>
</html>

效果图：