CSS几种引入方式和选择器的总结_css 根据div class获取下一级div-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_21921805/article/details/117618784

本文总结了CSS的四种引入方式：行内样式、内嵌样式、外链样式和导入样式，并详细介绍了优先级规则。同时，讨论了基本选择器（标签、ID、类、通用），包含选择器（子代、后代、分组），属性选择器，以及伪类和伪元素选择器的应用，包括其优先级和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、层叠样式表

介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

引入方式

1.行内样式 ————标签样式结合style，加上对应样式

	<h1 style="color: blue" >一个标题标签</h1>

2.内嵌样式————页面样式使用style标签，嵌套在<head>标签里面


<head>
	<style type="text/css">
		h2{
			color: red

		}
	</style>
</head>

3.外链样式————link标签，单独写一个css文件，嵌套在<head>标签里面进行引入

<head>
<link rel="stylesheet" type="text/css" href="">
</head>

css文件:

*{
margin:0px;
padding:0px;
}
h1{
   color:green;
}

4.导入样式————类似外链，在style里面通过import导入

<head>	
    <style type="text/css">
		@import url(css.css);
	</style>
</head>

四个引入方式的优先级：

一般情况下：行内样式>内嵌样式>外链样式>导入样式
例外：同类样式的优先级，定义越晚，或者导入的样式越后，优先级越高。(离代码越近优先级越高)

二、基本选择器

1、标签选择器（根据标签名获取）

	<style type="text/css">
		div {
			color: blue;
		}
	</style>

2、ID选择器（根据ID属性获取）

	<style type="text/css">
		#name {
			color: blue;
		}
	</style>

<p id="name">这是id选择器</p>

3、类选择器（根据class属性获取）

<!-- 	<style type="text/css">
	.name{
		color: green;
	}
	</style> -->
	<!-- 类选择器 -->

<div class="name">这是一个div</div>

4、通用选择器（通配符*）

	<style type="text/css">
		*{
			color: yellow;
		}
	</style>

优先级：ID>类>标签>通用
同级样式，默认按照定义样式的顺序，后者覆盖前者

三、包含选择器：

子代选择器（获取某个标签的第一级子标签）

<style type="text/css">
	div.name>ul{
		border-style: solid;
		border-color: green;
		}
	</style>
<!-- 子代选择器 -->

后代选择器（获取某个标签的所有子标签）注：从右往左读，先找右再往前找。

先找到li，再找user。

<style type="text/css">
	.user li{
		border-style: solid;
		border-color: red;
	}
</style>
<!-- 后代选择器 -->

分组选择器（逗号选择器，使用逗号给多个标签设置样式）

<style type="text/css">
	.name,#yuchen,h1{
		border-style: solid;
		border-color: blue;
	}
</style>
<!-- 逗号选择器 -->

四、属性选择器(属性选择器可以根据元素的属性及属性值来选择元素。)

<style type="text/css">
a[href][title]
{
color:red;
}
</style>

五、伪类选择器

同一个标签，不同的状态，有不同的样式，叫做伪类，伪类是使用冒号表示
:link           链接点击之前
:visited       链接访问过后
:hover           鼠标悬停在连接上
:active           激活状态下
:focus           选择获得焦点的 <input> 元素。

<style type="text/css"> 

    a:link{ color: red }              /* 让链接点击之前是红色 */ 
    a:visited{ color: orange }        /* 让链接点击之前是橙色 */ 
    a:hover{ color: green }           /* 鼠标悬停时候是绿色 */ 
    a:active{ color: blue }           /* 鼠标点击但是不松手的时候是蓝色 */ 

</style>

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
正确顺序为：a:link、a:visited、a:hover、a:active

六、伪元素选择器

::before(css3)
::after
:before(css2)
:after
注：::后必须写content属性
p::before{content: "S"}       在p前加上S
p::after{content: "hhh"}   在p后加上hhh

p::before{ content: "s" }
p::after{ content: "-----zhangsan" }

CSS几种引入方式和选择器的总结

一、层叠样式表

介绍

引入方式

1.行内样式 ————标签样式 结合style，加上对应样式

2.内嵌样式————页面样式 使用style标签，嵌套在<head>标签里面