HTML+CSS3自学笔记（CSS篇选择器）

最新推荐文章于 2023-04-06 20:14:14 发布

葡萄软糖

最新推荐文章于 2023-04-06 20:14:14 发布

阅读量142

点赞数

分类专栏：前端自学笔记（HTML+CSS）文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53659971/article/details/125872367

版权

前端自学笔记（HTML+CSS）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文章仅用于学习，未经同意请勿转载
本文章为0基础自学笔记，文章略显粗略，如有错误，希望大家指正，感谢！

自学来源：
绿叶学习网（CSS入门教程）
菜鸟教程（学习CSS）
B站小甲鱼《零基础入门学习Web开发》（HTML5&CSS3）

CSS是通过选择器来定位要设置样式的HTML元素，通常选择器可分为一下5种。
基本选择器
复合选择器
伪类选择器
伪元素选择器
属性选择器

一、基本选择器

通用选择器: 一般直接用 “*” 表示。

*{
	padding:10px; /***内边距为10个像素***/
	background-color:#eeeeee;/***背景颜色设置为“#eeeeee”***/
}

但通用选择器太霸道了，整个页面都覆盖了。

元素选择器: 即使用元素名，例：

h2{
	text-align:center;
}

类选择器： 通过给某些需要其他布局的元素起新的类名，从而更方便的进行操作。一个元素可以有多个类，以空格分隔词列表。

<head>
	<style>
		.slogn
		{
			text-align:center;
		}
	</style>
</head>
<body>
<p class="slogn">xxxxxxxx</p>
<p>yyyyyyyy</p>
</body>

id选择器： 全局有且只有唯一一个，且不可一个元素有多个id。

<head>
	<style>
		#p1
		{
			text-align:center;
		}
	</style>
</head>
<body>
<p id="p1">xxxxxxxx</p>
<p>yyyyyyyy</p>
</body>

二、复合选择器

交集选择器： 由两个选择器直接构成，其中第一个必定是元素选择器，第二个必须是类选择器或id选择器。

元素选择器.类选择器|元素选择器#id选择器
{
…
}

并集选择器： 又称分组选择器或群组选择器，由两个或两个以上的选择器构成。对参与的选择器都有效，作用是把不同选择器的相同样式抽取出来，进行一次性的定义。
选择器1,选择器2，3选择器
{
…
}

后代选择器： 又称包含选择器，用于包含在指定选择器匹配的元素中的后代元素。这里是指所有后代元素，不仅仅是直接子元素。
选择器1 选择器2 选择器3
{
…
}

子元素选择器： 与后代选择器相类似，但仅直接作用于直接子元素。
选择器1 > 选择器2
{
…
}

相邻元素选择器： 需要选择紧接在某个元素后面的元素或两者具有共同的父元素，即可使用该选择器。
选择器1 + 选择器2
{
…
}

通用兄弟选择器： 相对于相领兄弟选择器，通用兄弟选择器的作用范围更广，匹配的元素在指定的元素之后，但位置不需要紧挨着，只需同一层级。
选择器1 ～选择器2
{
…
}

三、伪元素选择器

1、[ ::first-line]： 仅对块级元素第一行内容有效，对于行内元素无效.
（…）::first-line
{
…
}

2、 ::first-letter]： 用于选中文本块中的第一个字符。
（…）::first-letter
{
…
}

3、[ ::before]： 可以产生新的内容到HTML中，将新内容插入到元素的前端，content属性是代表插入的内容。

<head>
	<style>
		a::before
		{
			content:"xxx";
		}
	</style>
</head>
<body>
	<a href="https://xxx.com" target="_blank">这是一个网站</a>
</body>

结果：xxx这是一个网站

4、[ ::after]： 可以产生新的内容到HTML中，将新内容插入到元素的后端，用法与【::before】相同，还可以插入图片等。

<head>
	<style>
		a::after
		{
			content:url(图片地址);
		}
	</style>
</head>
<body>
	<a href="https://xxx.com" target="_blank">这是一个网站</a>
</body>

结果：这是一个网站【图片】

5、[ ::selection]： 用于匹配用户选中的部分文本
::selection
{
background-color：red；
color：white；
}
结果：用户在网页使用鼠标拖住先要选中的内容，选中的部分将变成红底白色。

四、伪类选择器

4.1动态伪类选择器
能根据条件的改变来匹配元素（除了:focus外，其他基本用于上，由此元素又称锚点元素）

选择器	描述
:link	链接未被访问
:visited	链接被访问
:hover	鼠标悬停在链接上方
:active	鼠标按下链接，即选定的链接被激活
:focus	当元素获得焦的时候被选中

4.2UI伪类选择器
【:enabled】可用
【:disabled】禁用
【:checked】适用于单选框、复选框以及下拉列表的选项
【:required】适用于必选
【:optional】适用于可选
【:default】设置默认样式
【:valid】设置用于“合法”输入的样式
【:invalid】设置用户“非法”输入的样式
【:in-range】设置用户输入“在范围内”的样式
【:out-of-range】设置用户输入“不在范围内”的样式
【:read-only】设置“只读”输入的样式
【:read-write】设置“可读可写”输入的样式
【:indeterminate】用于选择处于不确定状态的用户界面元素

4.3结构伪类选择器
【:root】根元素选择器，设置根元素的样式，影响到整个HTML（极少用到）
【:nth-child】选中第几个子元素（nth-child(n)全选）
【:nth-last-child】选中倒数第几个子元素（nth-last-child(n)）
【:nth-of-type】选中第几个类型（nth-of-type(n)）
【:nth-last-of-type】选中倒数第几个类型的子元素（nth-last-of-type(n)）
【:first-child】用于匹配所有元素中的第一个子元素
【:last-child】用于匹配所有元素中的最后一个子元素
【:only-child】如果该元素是其父元素里唯一的子元素，则选中
【:first-of-type】匹配其父级是特定类型的第一个子元素
【:last-of-type】匹配其父级是特定类型的最后一个子元素
【:only-type】用于匹配父元素下的唯一类型的子元素
【:empty】设置空元素的样式

4.4其它伪类选择器
【:target】用于页面内锚点的样式设置（页面内锚点主要为了实现页面内的跳转），需要id属性进行配合
【:lang】用于匹配设置了：lang全局属性的元素
【:not】否定选择器，可以对任意选择器进行取反操作

CSS引入伪类和伪元素的概念是是为了格式化文档叔以外的信息。
伪类用于当已有元素处于某个状态时，为其添加样式。
伪元素用于创建一些不存在文档树的元素，为其添加样式。

五、属性选择器

可以基于元素的属性进行筛选。

语法	描述
[attr]	匹配定义了attr属性的元素，不需要考虑属性值
[attr=“val”]	匹配定义了attr属性，且属性值为“val”字符串的元素
[attr^=“val”]	匹配定义了attr属性，且属性值以“val”字符串开头的元素
[attr$=“val”]	匹配定义了attr属性，且属性值以“val”字符串结尾的元素
[attr*=“val”]	匹配定义了attr属性，且属性值包含“val”字符串的元素
[attr~=“val”]	匹配定义了attr属性，且属性值为“val”字符串的元素（如果有多个属性值，只需要其中一个匹配即可）
[attr\|=“val”]	匹配定义了attr属性，且属性值由连字符进行切割