web前端--CSS--傻瓜笔记--0929(css基本语法——选择器)

本文链接：https://blog.youkuaiyun.com/weixin_44734518/article/details/108906501

本文详细介绍了CSS（级联样式表）的基本概念、作用及其三种不同的使用方式：行内样式表、内嵌样式表和外部样式表。此外，还深入探讨了CSS中的各种选择器类型及其用法，包括标签选择器、类选择器、ID选择器、选择器组合、通配选择器、后代选择器、子标签选择器、相邻标签选择器以及兄弟选择器。

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

web前端–CSS

①css基本概述

css是 Cascading Style Sheets（级联样式表）的缩写。

样式表：修饰网页内容的语法的集合。

级联：关联两个事务之间的联系，指的是网页内容和修饰网页内容的css语法。

理念：是将网页与样式分离，这样重复的样式只需定义一次即可。

作用：修饰网页的外观、文本、背景、列表、定位…

关系：HTML：网页内容

css：网页的样式外观

1.基本语法

①行内(行级)样式表：通过标签的style属性来设置元素的样式。

使用频率：使用最少。

例：<p style="color:red"></p>

②内嵌样式表：在head标签里面。

使用频率：中等。

例:

<style type="text/css">
p{
    color:red;
}
</style>

③外部样式表：导入外部的样式表。

使用频率：最多。

例:

p{
    color:red;
}

主网页引用标签<link rel="stylesheet" href="../css/style.css">

2.常用选择器

①标签选择器

p{
	color:red;
}

②类选择器

<p class="p1"></p>

.p1{
    color:red;
    }

类名不要以数字开头，可以一对多，并且是使用最多的选择器。

③id选择器

<p id="p2"></p>

#p2{
    color:red;
}

因为id唯一(尽量不要重复)，因此也是一对一的选择器。

④选择器组合

<p class="p1"></p>
<p id="p2"></p>
<p></p>

.p1,#p2,p{
    color:red;
}

用于将公共样式抽取。

⑤通配选择器

*{
    color:red;
}

用于选择所有的标签。

选择器优先级(权重)

属性>id>类>标签>通配

高优先级的选择器不会覆盖低优先级选择器中特有的样式。

⑥后代选择器:选中指定标签的指定后代标签。

特殊情况下可继承。

语法：祖先标签后代标签{

}

<head>
<style type="text/css">
body a{
    color:red;
}
</style>
</head>
<body>
	<ul>
		<li>	
			<p>1</p>
			<h>2</h>
			<a>3</a> <!--a标签会变为红色-->
		</li>
	</ul>
</body>

⑦子标签选择器：选中指定父标签的指定子标签

语法：父标签>子标签{

}

<head>
<style type="text/css">
li h1{
    color:red;
}
</style>
</head>
<body>
	<ul>
		<li>	
			<p>1</p>
			<h1>2</h1><!--h1标签会变为红色-->
			<a>3</a> 
		</li>
	</ul>
</body>

⑧选中指定标签的相邻标签:选择器相邻的下一个指定标签

语法：选择相邻选择器：选择器 + 相邻{

}

<head>
<style type="text/css">
p + h1{
    color:red;
}
</style>
</head>
<body>
	<ul>
		<li>
			<h1>0</h1><!--不会变为红色-->
			<p>1</p>
			<h1>3</h1><!--h1标签会变为红色,必须紧挨的下一个。-->
			<a>2</a>
			<a>4</a> 
		</li>
	</ul>
</body>

⑨兄弟选择器：选中指定标签的兄弟标签(指定标签下面的兄弟)

语法：选择器 ~ 兄弟{

}

<head>
<style type="text/css">
p ~ h1{
    color:red;
}
</style>
</head>
<body>
	<ul>
		<li>
			<h1>0</h1><!--不会变为红色-->
			<p>1</p>
			<a>2</a>
			<h1>3</h1><!--h1标签会变为红色-->
			<h1>4</h1><!--h1标签会变为红色-->
			<h1>5</h1><!--h1标签会变为红色-->
			<a>6</a> 
		</li>
	</ul>
</body>