逃离HTML（二）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45803680/article/details/109564622

这是发的第二篇博客，第一篇就写了几个个人觉得挺有代表性的标签，那么这第二次就谈谈选择器吧。
相信你曾经看到过

<style>
	p{
	width:100px;
	height:200px;
	}
	[tips]{
	width:100px;
	height:200px;
	border:1px solid black;
	}
	*{
	width:100%;
	}
	body{
	width:100px;
	height:200px;
	border:1px solid black;
	}
</style>

当然，以上也只是很少的一些选择器，相信大家应该看出来了css的语法就是

选择器：{
	属性：关键字/数值}

选择器有很多个，最常见的选择器就是类选择器和id选择器，而不常见的选择器又有元素选择器、*、伪类选择器、伪元素选择器、属性选择器。
其中类选择器是“.”+类名，示例如下：

<style>
.leiming{
	属性：关键字/值
	}
</style>
<body>
<div class="leiming"></div>
</body>

ID选择器也是大同小异，但是在网页里面一般就只有特别重要的部分才会用到ID选择器，而一般重要的内容一个网页里就只有一个id选择器，id选择器的示例：

<style>
#leiming{
	属性：关键字/值
	}
</style>
<body>
<div id="leiming"></div>
</body>

元素选择器就好玩了，直接就是元素名+{}，但是在网页里面不常用，因为网页里的元素数量会很多，相同元素数量也不少，一旦用混了就会乱掉。
属性选择器是“【属性名】”+{}，“*”选择器就是通配符，意思就是可以调用所有属性，但是有一点不好就是优先级是最低的，下一期就谈谈优先级，这一期就先跳过优先级继续下一个选择器。
伪类选择器在网页里用得挺多，但是它的属性一般只有4个会被用到。示例：

<style>
#leiming：hover{
	属性：关键字/值（鼠标悬停在关键字上时显示的状态）
	}
#leiming:link{
	属性：关键字/值（鼠标还未移动到关键字上时显示的状态）
	}
#leiming:visited{
	属性：关键字/值（鼠标点击关键字后显示的状态）
	}
#leiming:active{
	属性：关键字/值（鼠标点击关键字时显示的状态，只有点击那一瞬间会显示）
	}
</style>
<body>
<div id="leiming"></div>
</body>

伪元素选择器不常用，但是用到的时候通常会搭配after和before使用，而且使用语法跟伪类选择器相似，但不相同，示例如下：

<style>
#leiming::before{
	content:"内容"
	}
</style>
<body>
<div id="leiming"></div>
</body>

而运行出的结果就是content后面显示的内容出现在页面，但是不能被选中。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。伪元素还有很多属性，例如：
::after (:after)
::backdrop
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
::marker
::placeholder
::selection
::slotted()
::spelling-error
但是这些一般都用不到，就不一一赘述。好了今日份的博客就到这儿，距离我们的逃离HTML之路也是越来越快了，嘻嘻。