CSS选择器

CSS选择器

在这里插入图片描述
🆗,朋友们,前几天咱们学了如和改变字体颜色等一些标签属性操作,可是当我们有很多代码的时候岂不是需要一点点的增加没一个的属性,这样不仅会增加我们的工作量,且错误率高,出错后还不易修改,那要如何减小工作量,增大效益呢,今天咱们就来学学CSS选择器。


1,标签选择器
格式:

在这里插入代码片
<head>
	<style type="text/scc">
		//标签名+{属性内容}
		p{
			color:red;
		}
	</style>
</head>
<body>
	<p>巴拉巴拉巴拉</p>
</body>

演示:
在这里插入图片描述
如图,所示我们可以看见,标签选择是在 body里编写内容,而在head里用style语句进行属性的进一步填写。记住是在head里添加相关属性,并由标签名+{}所组成。


2、类选择器

  • html:class=“ 命名”
  • css中:. 命名
    格式:

<head>
	<style type="text/scc">
		//.(圆点)+命名{属性内容}
		.one{
			font-size:55px;
		}
	</style>
</head>
<body>
	<p class="one">巴拉巴拉巴拉</p>
	<p class="one">balabal</p>
	<p class='two'>balabala</p>
</body>

演示:在这里插入图片描述

从我举得例子来看,我们可以看到类标签是可以重复使用的,因为我们对标签进行了命名。所以是可以重复使用的。然后接下来介绍的id样式是不可以重复使用的。


3,id样式
格式:

在这里插入代码片
<head>
	<style type="text/scc">
		//#+命名{属性内容}
		#one{
			font-size:55px;
		}
	</style>
</head>
<body>
	<p id="one">巴拉巴拉巴拉</p>
	<b1 id="two">巴拉巴拉巴拉</h1>
</body>

演示:在这里插入图片描述


4,分组选择器

在这里插入代码片
<head>
	<style type="text/scc">
		//标签1,标签2+{}
		p,h1{
			font-size:55px;
		}
	</style>
</head>
<body>
	<p >巴拉巴拉巴拉</p>
	<b1>巴拉巴拉巴拉</h1>
</body>

演示:在这里插入图片描述
分组选择器很简单吧


5、父子选择器
格式:

在这里插入代码片
<head>
	<style type="text/scc">
		//父选择器(空格)子选择器+{}
		ul li{
			font-size:55px;
		}
	</style>
</head>
<body>
	<ul>
		<li>balabala</li>
	</ul>
</body>

演示:在这里插入图片描述
还是在style里编写;


6、全局选择器
也称为统配符选择器,一般用于统一浏览器设置

在这里插入代码片
<head>
	<style type="text/scc">
		//*+{}
		*{
			text-align:center;
		}
	</style>
</head>
<body>
	<p>balabala</p>
	<h1>balabal</h1>
</body>

全局选择器我就不进行演示了。
ok,今天到这里就结束了。

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页