CSS3-3

来源：互联网发布：vue.js div点击事件编辑：程序博客网时间：2024/06/04 01:33

1.属性选择器

E[attr]选中有title属性的
E[attr=value]选中title属性值为value的
E[attr^=value]选中title的属性值是以value开头的
E[attr$=value]选中title的属性值是以value结束的
E[attr*=value]选中title的属性值中包含value 的

2.结构伪类选择器

type

E:nth-of-type
E:first-of-type
E:last-of-type
E:only-of-type

child

E:nth-child
E:first-child
E:last-child
E:only-child
其他（前不需要加元素）
:root（后不加标签）
:not
:empty
:target + 元素（标签）（跳到相应的标签）

3.状态伪类选择器

标签:focus（在选中边框时，可以聚焦在边框，并进行样式编写）
标签:checked（在选中相应的元素时，则可以对选中的元素进行相应的编辑）
::selection（对鼠标选中相应内容（文字），样式进行编辑）
元素:first-letter（选中第一个字母进行编辑）
元素:first-line（选中第一行字母进行编辑）
元素:enabled（表示对可以被选中标签进行编辑）
元素:disabled（表示对不可被选中的标签进行编辑）
元素:read-only（表示对只读状态的标签进行编辑）
元素:read-write（表示对可读写状态的标签进行编辑）
元素:before（表示在元素之前加上内容如：content=”789”；）
元素:after（表示在元素之后加上内容如：content=”789”；）
伪类和伪元素的区别：
可以同时使用多个伪类，而只能同时使用一个伪元素；
伪类使用一个”:”,伪元素使用”::”

伪类：

a.获取不存在与DOM树中的信息。
比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；

b.获取不能被常规CSS选择器获取的信息。
比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转

伪元素：

伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。

4.其他

div~p（相邻）
div+p（兄弟）
div>p（父子）

5.css3文本属性

text-shadow文字阴影：

x轴偏移量
y轴偏移量
blur模糊值
color颜色
多阴影
eg:

text-shadow : 3px(x轴) 4px(y轴) 23px(模糊值) white, 3px 4px 23px white;

text-stroke文字描边：

w描边宽度
color颜色
当前就webkit内核支持，需要加-webkit前缀
eg:

-webkit-text-stroke: 3px red;

text-overflow文字溢出隐藏:

ellipsis 省略号
clip剪切(默认)
搭配属性：
white-space:nowrap让文字不换行
overflow：hidden 溢出隐藏
多行文本省略号
webkit内核下多行文本省略号
通用方法

eg:

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

@font-face嵌入字体:

天猫字体图标

@font-face{font-family:mui-global-iconfont;src:url(http:// at.alicdn.com/t/font_1401963178_8135476.eot);src:url(http://      at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'),url(http://at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'),url(http://at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'),url(http://at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')}

font awesome字体图标库

    http://www.bootcss.com/p/font-awesome/

icomoon自定义字体图标

    https://icomoon.io/app/#/select

实例：图片轮播

代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    body,figure {        margin: 0;    }    img {        width: 100%;        height: 500px;    }    figcaption {        display: block;        font-weight: bold;        padding:1em 0;    }    .ga {        position: relative;    }    .ga > .item {        opacity: 0;        position: absolute;        left: 0;        top: 0;        width: 100%;        text-align: center;/*图片*位于中心*/        transition: .5s;    }    .ga > .item:first-of-type {        position: static;        opacity: 1;    }    .ga > .con {        position: absolute;        bottom: 0;        width: 100%;        text-align: center;    }    .ga > .con-op {        display: none;    }    .ga .con-b {        display: inline-block;        margin: 0 0.02em;        font-size: 2em;        text-align: center;        text-decoration: none;    }    .ga > .con-op:target~.item {        opacity: 0;    }    .ga > .con-op:nth-of-type(1):target~.item:nth-of-type(1) {        opacity: 1    }    .ga > .con-op:nth-of-type(2):target~.item:nth-of-type(2) {        opacity: 1    }    .ga > .con-op:nth-of-type(3):target~.item:nth-of-type(3) {        opacity: 1    }</style></head><body>    <div class="ga">        <!-- 中间件 -->        <div id="ga-1" class="con-op"></div>        <div id="ga-2" class="con-op"></div>        <div id="ga-3" class="con-op"></div>        <!-- picture -->        <figure class="item">            <figcaption>壁纸1</figcaption>            <img src="b1.jpg" alt="">        </figure>        <figure class="item">            <figcaption>壁纸2</figcaption>            <img src="b2.jpg" alt="">        </figure>        <figure class="item">            <figcaption>壁纸3</figcaption>            <img src="b3.jpg" alt="">        </figure>    <!-- 设置锚点 -->        <div class="con">            <a href="#ga-1" class="con-b">o</a>            <a href="#ga-2" class="con-b">o</a>            <a href="#ga-3" class="con-b">o</a>        </div>    </div></body></html>

阅读全文

0 0