CSS3新特性

最新推荐文章于 2024-03-13 08:00:00 发布

warmth

最新推荐文章于 2024-03-13 08:00:00 发布

阅读量3.1k

点赞数 1

分类专栏： JavaWeb 文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_43276642/article/details/106231199

版权

1.选择器：

伪元素选择器

::before

::after

::first-line

::first-letter

::section

伪类选择器

.list>li:first-child 选中第一个子元素

.list>li:last-child 选中最后一个子元素

.list>li:nth-child(n) 选中第五个子元素

.list>li:nth-child(odd) 选中偶数行

.list>li:nth-child(even) 选中奇数行

.list>li:nth-child(2n) 支持数学表达式，选中偶数行

.list>:nth-of-type(1) 选择类型匹配的，选中的是第五个li,跳过ul中其他类型

其他常用特性：

阴影

边线

弧度

滤镜

背景的扩充

定位（display）

2.媒体查询

css2中已经存在了媒体查询,最开始用来指定对应的设备，如tv表示电视、screen表示电脑、print表示打印机；css3提供了媒体查询，主要针对不同分辨率的屏幕

css2提供的不同屏幕下的样式书写

<style>
@media screen
{
/* 电脑端显示这个样式 */
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
/* 打印机端显示这个样式 */
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
/* 电脑端和打印机显示这个样式 */
p.test {font-weight:bold}
}
@media all
{
/* 用于所有多媒体类型设备 */
p.test {font-weight:bold}
}
</style>

css3通过屏幕的分辨率自动判断大小，从而适配对应的css样式。

@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}

举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>@media</tit

最低0.47元/天解锁文章

warmth

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性

1.选择器：伪元素选择器::before::after::first-line::first-letter::section伪类选择器.list>li:first-child 选中第一个子元素.list>li:last-child 选中最后一个子元素.list>li:nth-child(n) 选中第五个子元素.list>li:nth-child(odd) 选中偶数行.list>li:nth-child(...
复制链接

扫一扫