CSS3 新增特性1

最新推荐文章于 2024-05-21 00:17:00 发布

world_kun

最新推荐文章于 2024-05-21 00:17:00 发布

阅读量105

点赞数

分类专栏： Html+css+js

本文链接：https://blog.csdn.net/world_kun/article/details/103324240

版权

Html+css+js 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

1 结构(位置)伪类选择器（CSS3)

- :first-child :选取属于其父元素的首个子元素的指定选择器

- :last-child :选取属于其父元素的最后一个子元素的指定选择器

- :nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型

- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式

- li:first-child { /* 选择第一个孩子 */

color: pink;

}

li:last-child { /* 最后一个孩子 */

color: purple;

}

li:nth-child(4) { /* 选择第4个孩子 n 代表第几个的意思 */

color: skyblue;

}

2 目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {

color: red;

font-size: 30px;

}

3 属性选择器

选取标签带有某些特殊属性的选择器我们成为属性选择器

/* 获取到拥有该属性的元素 */

div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */

color: pink;

}

div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */

color: skyblue;

}

div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */

color: green;

}

<div class="font12">属性选择器</div>

    <div class="font12">属性选择器</div>

    <div class="font24">属性选择器</div>

    <div class="font24">属性选择器</div>

    <div class="font24">属性选择器</div>

    <div class="24font">属性选择器123</div>

    <div class="sub-footer">属性选择器footer</div>

    <div class="jd-footer">属性选择器footer</div>

    <div class="news-tao-nav">属性选择器</div>

    <div class="news-tao-header">属性选择器</div>

    <div class="tao-header">属性选择器</div>

4 伪元素选择器（CSS3)

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2. E::first-line 文本第一行；

3. E::selection 可改变选中文本的样式；

p::first-letter {

  font-size: 20px;

  color: hotpink;

}

/* 首行特殊样式 */

p::first-line {

  color: skyblue;

}

p::selection {

  /* font-size: 50px; */

  color: orange;

}

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {

  content:"开始";

}

div::after {

  content:"结束";

}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

**注意**

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的`content`属性，表示伪元素的内容,设置:before和:after时必须设置其`content`属性，否则伪元素就不起作用。

5 背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');

background-size: 300px 100px;

/* background-size: contain; */

/* background-size: cover; */

6 多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

- 一个元素可以设置多重背景图像。

- 每组属性间使用逗号分隔。

- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,

   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,

   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

7 凹凸文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>
</html>

8 CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box;   /* padding border  不撑开盒子 */
border: 15px solid red;
/* margin: 10px; */
/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}

world_kun

关注

0
点赞
踩
0

收藏

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

1结构(位置)伪类选择器（CSS3)- :first-child :选取属于其父元素的首个子元素的指定选择器- :last-child :选取属于其父元素的最后一个子元素的指定选择器- :nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从...
复制链接

扫一扫

专栏目录