2.2.2选择符-选择器（CSS）

池布旁

已于 2022-02-20 20:45:33 修改

阅读量706

点赞数 1

分类专栏： CSS层叠样式表文章标签： css 前端 html

于 2022-02-20 16:55:07 首次发布

本文链接：https://blog.csdn.net/m0_63692368/article/details/123032775

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.标签选择符
以标签的名称来进行命名的选择符，
例如p{color:red} 该页面内所有的p标签都要符合该样式

2.id选择符
以#作为它的标识一般用于页面中某个标签具备独有的样式时
注意：需要给标签添加属性id=”one” 且属性的值不能为数字开头

3.class选择符
以 . 作为标识一般用于页面中某些标签具备相同的样式时区使用
注意：需要给标签添加属性class=”pink” 且属性的值不能以数字开头

4. 全选择符*
对页面中的所有标签都起作用。例：*{}

以上4个选择符的优先级：
Id选择器>class选择器>全选择符>标签选择符

语法结构 : 选择器{属性:属性的值; 属性:属性的值
属性和属性值的结束用分号来做表示。

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	p{
		color: blue;
	}

	</style><!--<style type="text/css">表示的是内嵌样式-->



	<link rel="stylesheet" type="text/css" href="./css/style.css"><!--type表示的是类型 herf表示文件的是地址-->
	<style type="text/css">

	@import url("./css/main.css");
	</style><!--<link rel="stylesheet" type="text/css" href="./css/style.css">表示的是外链样式-->



</head>
<body>
     <!--正常情况是：行内>内嵌>外链>嵌入  优先级：就近原则，谁离修饰目标越近越优先被显示-->
     
	<h1 style="color:red;"><!--<h1 style="color:red;"> 表示的是行内样式-->
	蓝田一男子盗墓挖自家祖坟，被抓时拒不认错，自称北宋宰相后代</h1>
	<p>北宋时期“蓝田四吕”朝廷担任要职，这四位出身官宦世家祖父吕通曾任太常博士，父亲是比部郎中，到了第三代更是各个有出息，</p>

    <p>其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</p>


    <p>前言</p>

    <p>有句俗话说的好“老子英雄儿好汉”，身为“蓝田四吕”之一的吕大临是宋代的金石家，而且他本人对学术研究更加感兴趣，而且一生也有很多著作，但是这些著作很多都已经遗失了，在他晚年时期也喜欢青铜器的收藏。然而他的后代却做了一件令祖上蒙羞的事情，将自己家的祖坟挖了，想拿里面的文物换钱。</p>


    <p>后代动了挖祖坟的心思虽然吕家曾经有过这样的辉煌，但是后来这个大家族还是走向了衰落，到了吕富平这一代再也不复往日的辉煌。吕富平是陕西蓝田县人，作为吕大临这一支的后代，他一直都知道自己祖上在宋代是很厉害。</p>
    <span>其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</span>
    <div>其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	h1{
		color: blue;
	}

	p{
		color: red;
	}
	#one{
		color: gold;
	}


	.pink{
		color: pink;
	}

	*{
		color: orange;
	}

	</style>
	<!--全选择符:  对页面中的所有标签都起作用。-->

	<!--标签选择符 以标签的名称来进行命名的选择符， 例如p{color:red} 该页面内所有的p标签都要符合该样式-->

</head>
<body>
     
	<h1>蓝田一男子盗墓挖自家祖坟，被抓时拒不认错，自称北宋宰相后代</h1>
	<p id="one">北宋时期“蓝田四吕”朝廷担任要职，这四位出身官宦世家祖父吕通曾任太常博士，父亲是比部郎中，到了第三代更是各个有出息</p><!--  
                                                                                                       id选择符  以#作为它的标识    
                                                                                                       一般用于页面的某个标签具备独有的样式时      注意！ id的值不能以数字开头-->

    <p id="one">其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</p>


    <p>前言</p>

    <p class="pink">有句俗话说的好“老子英雄儿好汉”，身为“蓝田四吕”之一的吕大临是宋代的金石家，而且他本人对学术研究更加感兴趣，而且一生也有很多著作，但是这些著作很多都已经遗失了，在他晚年时期也喜欢青铜器的收藏。然而他的后代却做了一件令祖上蒙羞的事情，将自己家的祖坟挖了，想拿里面的文物换钱。</p>


    <p class="pink">后代动了挖祖坟的心思虽然吕家曾经有过这样的辉煌，但是后来这个大家族还是走向了衰落，到了吕富平这一代再也不复往日的辉煌。吕富平是陕西蓝田县人，作为吕大临这一支的后代，他一直都知道自己祖上在宋代是很厉害。</p><!--3.class选择符  以 . 作为标识   一般用于页面中某些标签具备相同的样式时区使用
                                                            注意：需要给标签添加 属性class=”pink” 且属性的值不能以数字开头
                                                            -->
    <span>其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</span>
    <div>其中吕大防官至宰相，其他几位也在朝廷为官，另外这四位在在经学、史学、金石学、地理学、文学等方面也是颇有建树。</div>
</body>
</html>

<!--以上4个选择符，他们的优先级:     Id选择器>class选择器>全选择符>标签选择符-->
<!--语法结构 :  选择器{属性:属性的值; 属性:属性的值}        属性和属性值的结束用分号来做表示。-->