CSS3-3-优快云博客

本文链接：https://blog.youkuaiyun.com/Cloudceky/article/details/73881491

本文详细介绍了CSS3中的各种选择器，包括属性选择器、结构伪类选择器和状态伪类选择器，以及如何使用这些选择器来精确地定位页面元素。此外，还探讨了CSS3中的文本属性，如文字阴影、文字描边和文本溢出隐藏等，通过实例展示了如何应用这些属性来增强网页的表现力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>