怎么使用css选择器

最新推荐文章于 2023-05-18 12:42:40 发布

晴时初遇雨

最新推荐文章于 2023-05-18 12:42:40 发布

阅读量192

点赞数

分类专栏： web前端文章标签： css html javascript

本文链接：https://blog.csdn.net/Python_BT/article/details/107704741

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css选择器一般可分为：全局作用类、标签选择器、id选择器、类选择器、层级选择器、组选择器、伪类选择器与伪元素

全局作用类范围最广，但开发过程基本不使用
标签选择器，范围较大，针对所有类型标签可以更改样式
id选择器仅针对id属性生效，又因为id一般不可重复，所以作用的样式很少，一般也很少使用
类选择器使用广泛，可以定义多个，针对不同的类属性
层级选择器在开发中使用广泛，也是用的最多的选择器，但是层级最好不超过四层，否则性能会下降
组选择器，可以将同类的公有样式写在一起，不同处单独写类样式，简化代码复杂度，增加可读性
伪类选择器作用于标签页a上，大多用于鼠标悬停标签时能够改变样式显示
伪元素可以在元素的前后增加字段，且字段不可被选中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style>

		/*css选择器介绍*/

		*{
			/*此样式影响所有的标签*/
		}

		div{
			/*标签选择器，影响范围较大，影响所有的div标签*/
			/*font-size:20px;*/
			/*color:green;*/
		}

		#div1{
			font-size: 70px; 
			/*根据id为div1去使用该样式，下面的样式会覆盖上面的样式*/
			color:#FF00FF;
		}

		.green{ 
			color:green; 
			/*类选择器*/
		}

		.big{
			font-size: 40px; 
			/*类选择器*/
		}

		.box{
			font-size: 25px;
			line-height: 30px;
			text-indent: 40px;
		}

		.box span{ 
			/*层级选择器*/
			color:red;
			font-weight: bold;
		}

		.box .hello span{ 
			/*层级选择器最好不超过4个*/
			color:#98FB98;
			font-size: 50;
		}

		.box01,.box02,.box03{
			/*组选择器，共同部分放在此处*/
			font-size: 20px;
			text-indent: 40px;
		}
		.box01{
			/*组选择器不同部分单独写*/
			color: #BA55D3;

		}
		.box02{
			color: #D2691E;


		}
		.box03{
			color: #FF0000;


		}

		.link{
			/*针对a标签进行伪类*/
			font-size: 50px;
			text-decoration: none;
			color:#4B0082;
		}
		.link:hover{
			/*伪类选择器，鼠标悬停变色加粗倾斜*/
			color:#7FFF00;
			font-weight: bold;
			font-style: italic;
		}
		.box04,.box05{
			font-size: 20px;
			color:pink;

		}

		.box04:before{
			content: "在前面加文字:  "
		}
		.box05:after{
			content: ":  在后面加文字"
		}




	</style>
</head>
<body>
<!-- css颜色值主要有三种表示方法：
	1. 颜色名表示，比如：red红色，gold金色
	2. RGB表示法，比如color:rgb(255,0,0) 
	3. 16进制数值表示，比如：#ff0000表示红色，这种可以简写成#f00
-->
	<div style="font-size:50px;color:#f00;"> <!-- 单标签设定的样式会对主style中的样式修改，即以单标签的为主 -->
		这是第一个演示的div
	</div>
	<div id="div1">
		这是第二个div标签
	</div>
	<div class="big">
		这是第三个div标签
	</div>
	<div class="green">
		这是第四个div标签
	</div>
	<div class="big green">
		这是第五个div标签
	</div>
	<br>
	<br>
	<br>
	<div class="box">
	<span>hahah</span>自1990年以来，HTML就一直被用作WWW的信息表示语言，<span>使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。</span>
	事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，
	只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单
	击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览
	器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
	</div>
	<br>
	<br>
	<div class="box"><div class="hello"><span>
		HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
	</span></div></div>
	<p>
		<div class="box01">num1</div>
		<div class="box02">num2</div>
		<div class="box03">num3</div>
	</p>
	<p><a href="https://www.csdn.net/" class="link">CSDN主页</a></p>
	<br>
	<div class="box04">第一个伪元素</div>
		<div class="box05">第二个伪元素</div>
</body>
</html>