前端入门之新选择器、新标签

LN Feng

已于 2022-10-27 20:03:48 修改

阅读量187

点赞数

文章标签：前端 css html5

于 2022-08-17 21:51:33 首次发布

本文链接：https://blog.csdn.net/weixin_45000466/article/details/126395142

版权

伪类选择器、伪元素选择器、新增语义化标签、多媒体标签、网站关键字、内容、图标

伪类选择器

CSS 伪类 (w3school.com.cn)

可以理解为描述元素的某种状态

:hover 鼠标悬停在元素上的样式
:active 鼠标在元素上并按下左键

a 标签常用的4个伪类选择器（必须按照以下顺序写lvha）

:link 、 :visited 、 hover 、 :active

/* 链接前 */
a:link{
  color: aqua;
}
/* 连接后 */
a:visited{
  color: skyblue;
}
/* 鼠标移动上的样子 */
a:hover{
  color: gold;
}
/* 鼠标移动上去并且按下左键 */
a:active{
  color: pink;
}

:focus获取焦点时的样式

input:focus{
  /* 获取焦点 */
  border: 2px solid orange;
}

xx:first-child 必须是第一个且是 xx

ul li:first-child{
  /* 只能是第一个li li是第一个子集元素 */
  color: red;
}

xx:first-of-type 第一个 xx 的元素， xx 不用是第一个元素

ul li:first-of-type{
  /* 第一个li类型的标签 li不用是第一个标签 */
  color: skyblue;
}

xx:nth-child(n) 第 n 个 xx 的元素，且第 n 个元素必须是 xx
xx:nth-of-type(n) 第 n 个 xx 的元素
xx:last-child 必须最后一个且是 xx
xx:last-of-type 最后一个 xx 的元素， xx 不用是最后一个元素
注意

可以使用2n代表偶数、2n+1代表奇数

！！！同类名的不同类型元素分开计数！！！

！！！下面的四个标签的背景颜色都会变红！！！
```
.aa:nth-of-type(1){
  background-color: red;
}
```
```
<div class="aa">C</div>
<h1 class="aa">B1</h1>
<h2 class="aa">B2</h2>
<p class="aa">a</p>
```

伪元素选择器

CSS 伪元素 (w3school.com.cn)

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

::after 元素后的内容
::before 元素前的内容
::first-line 文本的第一行样式
::first-letter 文本的首字母，只用于块元素
::placeholer 只用于表单的提示信息

H5新增语义化标签

HTML5 新元素 (w3school.com.cn)

HTML5 提供的新元素可以构建更好的文档结构

header 头部 块属性
nav 导航条
main 内容
section 内容
footer 底部
aside 侧边栏
time 时间标签 行属性
mark 标记标签 行属性

<body>
    <header>头部</header>
    <nav>导航栏</nav>
    <main>
        <aside>侧边栏</aside>
    </main>
    
    <section>
        <!-- time mark行属性标签 -->
        <time>
            2022-08-12
        </time>
        <mark>
            标记
        </mark>
    </section>
    <footer>底部</footer>
</body>

上面的标签的常用样式

多媒体标签

HTML 多媒体 (w3school.com.cn)

Web 上的多媒体指的是音效、音乐、视频和动画。

音频audio

格式：MP3、Ogg、Wav

type：文件的MIME格式 mp3-mpeg

<audio src="./summer.mp3"controls muted>
</audio>

视频video

格式：MP4、WebM、Ogg

type：文件的MIME格式

<video src="./ma.mp4" controls>
</video>

source 指定视频音频兼容格式

多媒体属性标签

src 放置音频的路径
controls 控制台
lautoplay 自动播放
loop 循环播放
poster 指定播放显示的封面
preload 预加载
muted 默认静音

补充

网站标题图标

<link rel="icon" href="http://www.jd.com/favicon.ico" type="image/x-icon">

网站添加关键字

 <!-- 网页关键字 作用有利于搜索引擎优化 SEO-->
<meta name="keywords" content="四六级 书籍 四大名著">

网站描述内容

<meta name="description" content="这是一个关于阅读的网页">

强制提高优先级

/* !important 强制提高优先级 */
div{
  color: white    !important;
  background-color: black !important;    
}

最小宽度、最大宽度

div{
  min-width: 100px;
  max-width: 800px;
}

LN Feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门之新选择器、新标签

伪类选择器、伪元素选择器、新增语义化标签、多媒体标签、网站关键字、网站内容、网站图标
复制链接

扫一扫