html转义字符和选择器(详）_html link标签内转义字符-CSDN博客

本文链接：https://blog.csdn.net/weixin_54107527/article/details/123904852

转义字符：

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

&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>