当前位置：首页 > news >正文

CSS选择器-CSS3属性

news 2026/5/28 18:34:53

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中的子元素spandiv+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

3.8用户行为选择器

:focus{}获取光标状态

4、CSS3属性前缀

1.浏览器兼容前缀

-ms- IE

-moz- 火狐

-o- 欧朋浏览器

-webkit-webkit内核浏览器

5、文本和盒子阴影

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

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

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

内部阴影 inset

外部阴影不写

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

下载步骤之前有

<!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