转义字符：

转义字符：某些字符具有特殊意义，无法直接显示，需要转义

&nbsp；	不断行的空格
&ensp；	半方大的空格
&emsp；	全方大的空格
&lt；	小于 <
&gt；	大于 >
&amp；	&符号
&quot；	双引号"
&copy；	版权符号©
®	已注册商标®
&trade；	商标（美国）TM
&times；	乘号 ×
&divide；	除号÷

注意：转义字符&和；是必不可少的，就算只写一个都要加；

伪类选择器

伪类选择器：可以理解为描述元素的某种状态

伪类	描述
`:hover`	用于设置鼠标悬停在元素上方时的样式
`:focus`	用于设置元素获得焦点时的样式
`:active`	用于设置元素被激活时（按下按键时、松开按键时）的样式
`:link`	用于设置元素点击之前的样式（仅可用于`a`标签）
`:visited`	用于设置被访问的元素的样式（仅可用于`a`标签）
`:first-child`	用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
`:first-of-type`	用于选取属于其父元素的第一个特定类型的子元素
`:last-child`	用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
`:last-of-type`	用于选取属于其父元素的最后一个特定类型的子元素
`:nth-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字`（odd / even）`、公式（如：2n+1）
`:nth-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-child(N)`	选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式
`:nth-last-of-type(N)`	选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字`（odd / even）`、公式

注意：	a标签的书写顺序link（链接前），visited（链接后），hover（鼠标放上去的效果），active（点击效果）
:first-child	必须是第一个子元素

代码解析

 <style>a:link{color: #c70012;}a:visited{color: black;}a:hover{color: blue;}a:active{color: aliceblue;}a{font-size: 50px;}
<a href="https://blog.csdn.net/weixin_54107527?type=blog">海绵hong</a><br>

        input:focus{border: 2px solid red;}
<input type="text">

        ul li:first-child{/* 必须是第一个ul标签里面的li，有其他的在前面就无法显示样式*/color: red;}
<ul><li>一点寒芒先到</li><li>随后枪出如龙</li><li>死亡如风</li><li>常伴吾身</li>
</ul>

   ul li:first-of-type{/*li不用是第一个子元素，变为了固定的第一个li*/color: blue;}

伪元素选择器

伪元素：可以理解为某个元素的子元素，但是不存在于html中

一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用

为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符

伪元素	描述	示例
`::after`	用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素	`p::after {` `content: ＂结束＂;` `}`
`::before`	用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素	`p::before {` `content: ＂开始＂;` `}`
`::first-line`	向文本的首行添加样式，只能应用于块级元素	`p::first-line {` `color: #333;` `}`
`::first-letter`	向文本的首字母添加样式，只能应用于块级元素	`p::first-letter {` `font-size: 16px;` `}`
`::marker`	用于改变li元素的数字或符号的样式，只能作用于`display`属性值为`list-item`的元素	`ul li::marker {` `content: '*';` `}`
`::placeholder`	用于设置表单元素占位符文本的样式	`input::placeholder {` `color: blue;` `}`

代码解析

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{color:blue;}p::before{color:red;content: "大家好，我是";}p::after{content: "，欢迎大家关注我的博客";color: #130802;}div{width: 300px;}div::first-line{color:chocolate;}div::first-letter{color: antiquewhite;font-size: 30px;}</style>
</head>
<body>
<p>海绵hong</p>
<div>伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。</div>
</body>
</html>

html转义字符和选择器(详）相关推荐

css2和css1,CSS1，CSS2选择器详解
第一.CSS选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) html{background-color: red;} div{background-color: yellow;} 2.I ...
html5中的empty是啥,什么是empty选择器？empty选择器详解
本篇文章给大家带来的内容是关于什么是empty选择器?empty选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在CSS3中,:empty选择器用于选择一个不包含任何子元素 ...
apache伪静态把css 排除掉_（02）CSS 选择器详解 | CSS
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 伪类选择器有哪些?2. ...
jQuery学习笔记——jQuery选择器详解种类与方法
jQuery的选择器根据页面中元素的不同,可以分为基本选择器.层次选择器.表单选择器.过滤选择器,而过滤选择器又有简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器和表 ...
jquery 常见选择器详解3
1.常用的表单选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
简述css属性选择器的几种定义方式_CSS 属性选择器详解
根据具体属性值选择除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素. 例子 1 例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写: a[h ...
jQuery-强大的jQuery选择器 (详解)
1. 基础选择器 Basics 名称说明举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(" ...
html怎么在页面中获取操作用户的id,CSS ID 选择器详解
类选择器还是 ID 选择器? 在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类.前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素. 区别 1:只能在文 ...
CSS选择器详解（一）常用选择器
目录类型选择器类选择器 ID选择器伪类伪元素类型选择器通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...

html转义字符和选择器(详）

转义字符：

伪类选择器

代码解析

伪元素选择器

html转义字符和选择器(详）相关推荐

最新文章

热门文章