CSS选择器-CSS3属性

持续更新...

1、CSS3的概念和优势

复制代码

css3概念:是css的升级版本,新增加了一些模块
css3优点:完全向后兼容,可使用新的选择器和属性,能实现新的设计效果

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）

2、新进增强和优雅降级

复制代码

渐进增强：优先构建低版本浏览器页面，再针对高版本浏览器页面进行设计
优雅降级：优先构建高版本浏览器页面，再针对低版本浏览器页面进行兼容

3、CSS3选择器

3.1层级选择器:

E>F子选择器选择匹配的F元素，且匹配的F元素所匹配的元素的子元素

E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的元素的后面

E~F通用选择器选择匹配的F元素，且位于匹配的元素后的所有匹配的F元素

复制代码

div>span{}子元素选择器,选择div中的子元素span

div+span{} 相邻兄弟选择器,选中div后紧挨着这一个的span(如果跟div还有其他的相邻兄弟选择器,比如p,则这时候span和p都不会被选到)

div ~ span {} 通用兄弟选择器,选中div后的所有span

3.2属性选择器

复制代码

 div[class]{}选中div,且div有class属性
div[class="value"]{}选中div,且div有class属性,同时值为value
div[class~="value"]{}选中div,且div具有class属性,包含值为value
[扩展]
div[class^="value"]{}以value开头
div[class&="value"]{}以value结尾
div[class*="value"]{}包含value
div[class|="value"]{}只有value或者以value-值开头

1、E[attr]:只使用属性名，但没有确定任何属性值；

2、E[attr="vaue"]:指定属性名，并指定了该属性的属性值；

3、E[attr~="value"]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔

开，其中词列表中包含了一个value词，而且等号前面的"∽"不能不写·
矿展知识

4、E[attr^="value"]:指定了属性名，并且有属性值，属性值是以value开头的；

5、E[attr$="value]:指定了属性名，并且有属性值，i

而且属性值是以value结束的

6、E[attr*="value"]:指定了属性名，并且有属性值，而且属值中包含了value;口

7、E[attr|="value"]:指定了属性名，并且属性值是value或者以"value-"开头的值（比如说zh-cn)

3.3结构伪类选择器

复制代码

div:first-child{}选中div是第一个子元素
div:last-child{}选中div是最后的一个子元素
div:nth-child(n)选中指定位置的div
n:是从0开始的自然数
2n=even 偶数序列
2n-1=odd 奇数序列
div:only-child{}选中div ,且div是唯一的子元素
:root{}选中根元素(html)
div:empty{}选中div,且div为空

3.4目标伪类选择器

复制代码

<a href="关联元素的id值">点击位置</a>
<标签 id="box" class="box1">关联位置</标签>
.box1:target

3.5UI元素状态伪类选择器

复制代码

:disabled()禁用状态
:enabled{}可用状态
:checked{}选中状态
::selection{}选中文本后高亮状态

3.6否定伪类选择器

.box:not(.box2){}选中box,但是排除box2这个元素 ( box2没有被选择到)

3.7动态伪类选择器

:link{}未访问状态
:visited{}访问过后的状态
:hover{}鼠标悬停时状态
:active{}鼠标按下时状态\
$注意\]有顺序要求LVHA$

:focus{}获取光标状态

4、CSS3属性前缀

1.浏览器兼容前缀

-ms- IE

-moz- 火狐

-o- 欧朋浏览器

-webkit-webkit内核浏览器

5、文本和盒子阴影

text-shadow:水平垂直模糊度文本阴影颜色

水平阴影和垂直阴影可以为负数

box-shadow:水平垂直模糊度阴影大小盒子阴影颜色内外阴影

内部阴影 inset

外部阴影不写

6、字体模块(矢量图使用)

下载步骤之前有

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一种方式:第一步 -->
    <link rel="stylesheet" href="font/iconfont.css">
    <!-- 第三种方式:第一步 -->
    <script src="font/iconfont.js"></script>
    <style>
        /* 第二种方式:第一步 */
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.woff2?t=1692602955385') format('woff2'),
                url('font/iconfont.woff?t=1692602955385') format('woff'),
                url('font/iconfont.ttf?t=1692602955385') format('truetype');
        }

        /* 第二种方式:第二步 */
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* 第三种方式:第二步  */
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- 第一种方式:第二步 -->
    <span class="iconfont icon-taobaotese"> ewer</span>
    <!-- 第二种方式:第三部 -->
    <span class="iconfont">&#xe602;</span>
    <!-- 第三种方式:第三步 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-gouwuche-fill2x"></use>
    </svg>
</body>

</html>

7、背景属性

复制代码

背景大小:
background-size:背景图大小;
px %
cover等比例缩放,有可能超出元素
contain 等比例缩放,有可能元素留白
多背景设置:background:URL(),URL()

8、边框属性

圆角:

border-radius:值1
border-radius:水平值1 / 垂直值1