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值" target="_blank" rel="external nofollow" >点击位置</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"></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