前端：css(层叠样式表)，5种选择器

最新推荐文章于 2024-08-09 17:43:58 发布

程序员Fy

最新推荐文章于 2024-08-09 17:43:58 发布

阅读量389

点赞数 11

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

本文链接：https://blog.csdn.net/fuyuo/article/details/125938471

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

css层叠样式表

引入方式

有4种

1，行内样式
2，内嵌样式
3，外链样式
4，导入样式

详细介绍：

一：行内样式，也叫标签样式

直接在标签里面加入style属性。
例：

<!DOCTYPE html>
<html>
<head>
	<title>样式</title>
</head>
<body>
	<p style="color:red; text-align:center">这里是一个段落标签</p>
</body>
</html>

运行结果：
在这里插入图片描述

二：内嵌样式

注意：写在style标签内（style标签写在head标签内）

<!DOCTYPE html>
<html>
<head>
	<title>样式</title>
	<style type="text/css">
		*{
			background: green
		}
	</style>
</head>
<body>
	<!-- 行内样式 -->
	<p style="color:red; text-align:center">这里是一个段落标签</p>
</body>
</html>

在这里插入图片描述

三：外链样式

提示：

第一步：新建一个.css的文件，专门写css样式
第二步：head标签内需要写入link标签（link标签可以写在body标签内，但是不推荐）
第三步：link标签内href属性将css文件导入（路径（绝对路径和相对路径））

例：先建立了一个叫css的文件（这里不展示了）。
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div id="div1">
		div标签
	</div>
</body>
</html>

css文件内容：

#div1{
	color: red;
	background:black;
}

在这里插入图片描述

四：导入样式

通过@import url （“”）进行导入.css文件
import写在style标签里面。
代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		@import url(1.css);
	</style>
</head>
<body>
	<div id="div1">
		div标签
	</div>
</body>
</html>

总结：
就近原则，距离修饰的标签越近，优先级越高概念来讲：行内>内嵌>外链>导入

选择器（5种）

1，基本/标签选择器

根据标签的名称获取
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		/*通配符选择器*/
		*{
			color: blue
		}
		/*标签选择器*/
		h2{
			color:blue
		}
		/*id选择器*/
		#one{
			color: red
		}
		/*类选择器*/
		.two{
			color: green
		}	
	</style>
</head>
<body>
	<h2>一个标题</h2>
	<p id="" ="one">id属性</p>
	<p class="two">class属性</p>
	<p>通配符</p>
	<p>优先级：id>class>标签选择器</p>
</body>
</html>

2：包含选择器

其中包含子代选择器，后代选择器，分组选择器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	/*子代选择器*/
		.list>ul{
			color: green;
		}
		/*后代选择器*/
		.list li{
			color: red;
		}
		/*分组选择器*/
		h2,#list,.list{
			color: blue;
		}
	</style>
</head>
<body>
	<h2>一个标题</h2>
	<p id="list">段落</p>
	<div class="list">
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
		<li>列表6</li>
		<li>列表7</li>
		<li>列表8</li>		
	</div>
</body>
</html>

对代码中：.list>ul{} 理解：
因为这个div标签是class属性，所以用 .list 开始，>ul
是指向这个标签里面的 ul 子标签。

3：属性选择器

<!DOCTYPE html>
<html>
<head>
	<title>属性选择器</title>
</head>
	<style type="text/css">
		/*某个标签的某个属性*/
		input[type]{
			color: red;
		}
		input[type=url]{
			background: blue;
		}
		/*某个属性的值是以e开始的*/
		input[type ^=e]{
			background: green
		}

		/*表示下一个标签*/
		.msg + div{
			color: pink
		}
		/*属性名称等于某个值时*/
		[title="one"]{
			color: blue
		}
	</style>
<body>
		<div title="one">div1</div>
		<p class="two"> 段落</p>
		<input type="text" id="" value="zhang">
		<input type="url" id="" value="li">
		<input type="email" id="" value="wang">
		<div class="msg">div2</div>
		<div id="div2">div3</div>
</body>
</html>

4：伪类选择器

<!DOCTYPE html>
<html>
<head>
	<title>伪类选择器</title>
	<style type="text/css">
		/*让点击之前是红蛇*/
		a:link{
			color: red
		}
		/*点击后是绿色*/
		a:visited{
			color: green
		}
		/*鼠标悬停时是粉色*/
		a:hover{
			color: pink
		}
		/*鼠标点击不松手时是橘色*/
		a:active{
			color: orange
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com">点击我</a>
</body>
</html>

以冒号：开始

5：伪元素选择器

提示：

:before:after   ---- CSS2提供的
::before::after   ----- CSS3提供的

‘注意：如果要使用before和after的话，一定要加上content（内容）属性

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>伪元素选择器</title>
 	<style type="text/css">
 	p::before{ 
 		content: "zhangsan"; color:red; 
 		} 
 	p::after{ 
 		content: "lisi"; color: blue; 
 		} 
	</style>
</head>
<body>
	<p>这是一个段落</p>
</body>