层级选择器
E>F F必须为E的子代元素
E+F F是挨着E的下一个兄弟元素
E~F F是E后面的所有的兄弟元素
E F F是E的后代【可以是儿子也可以是孙子】
延申跟hover一起使用:下拉列表 eg:li:hover>.wap/li:hover+.wap/li:hover~wap
属性选择器
[type] 含type属性
inpu[type]
input[type="value"]含有type属性,并且属性值等于value
input[type~="value"]含有type属性 丙炔属性值为value或者多类名中某一个值为value
属性选择器延申
**attr
[class^="**"]class的属性值以**开头
[class$="**"]class的属性值以**结尾
[class*="**"]class的属性值有**就可以
[class|="**"]class的属性值为**或者以**-开头的形式
class可以替换为别的元素
伪类选择器
结构伪类选择器
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(number/odd/even/2n-1) 选择指定位置的子元素
:nth-last-child(number/odd/even/2n-1) 选择指定位置的子元素【从后往前】
:first-of-type 选择同一类的第一子元素
:last-of-type 选择同一类的最后一个子元素
:nth-of-type(number/odd/even/2n-1) 选择指定位置的同一类的子元素
:nth-last-of-type(number/odd/even/2n-1) 选择指定位置的同一类的子元素【从后往前选择】
:only-child 唯一一个孩子
延申
:only-of-type 这个类型中唯一的一个
:root 匹配网页中的根元素 html 操作html【设置文本的属性都可以继承【首行缩进不能继承行内元素】】
:empty 表示元素为空 一般用于检查 排除书写过程中冗余的div
目标伪类选择器
E:target E是锚点定位指向的元素,且操作E的样式
状态伪类选择器
:enabled 启用状态下的表单的元素
:disabled 禁用状态下的表单元素
:checked 选中状态下的表单元素
::selection 选中之后的文本样式【只能操作字体颜色和背景颜色】
否定伪类选择器
E:not(F) 除了F之外的所有的E元素样式的操作
伪类选择器
:link 未访问的链接
:hover 鼠标悬停时
:active 鼠标点击时
:visited 访问过的链接
:focus 获取焦点后的样式操作
伪元素选择器
:after/::after 在元素后面添加内容
:before/::before 在元素前面添加内容
:first-letter/::first-letter 选中第一个字符
:first-line/::first-line 选中第一行
基础选择器
* 通配符选择器
标签名 标签选择器
.class属性值 class选择器/类选择器
多类名选择器 class有自己的别名或者小名
#id属性值 id选择器
选择器1,选择器2,选择器n....... 群组选择器
CSS3新增属性
浏览器兼容性
优雅降级【从高到低】
-webkit- 谷歌
-moz- 火狐
-o- 欧朋
-ms- IE
文本阴影
text-shadow:水平阴影位置 垂直居中位置 阴影模糊距离【默认为0】 阴影颜色【字体颜色】
多文本阴影
Text-shadow:0px 2px 2px red,0px 2px 2px gold,【逗号分割】
盒子阴影
Box-shadow:水平位置,垂直位置,模糊距离,模糊颜色,模糊大小【水平和垂直必选】inset 改变位置在里面 默认在外面
自定义字体
阿里巴巴矢量图标库特殊字体
1.引用外部样式【网络路径上的】link:css修改href的属性值【不要忘记假https:】
2.引入本地的样式 link:css 修改href的属性值【找到下载文件中的iconfont.css】
通过html特殊符号显示和相对应内容:
首先新建标签,给他一个class属性值,属性值iconfont【引入自定义字体】,在标签里面加入unicode下面的符号
通过css显示相对应的内容:
首先新建标签,给他一个class属性值,属性值iconfont,给他加一个多类名,多类名的值为font class下面找到
通过js引入带有颜色的内容
参考下载文件中的sym
下载图片
先加购物车 然后下载为Png格式
注意:
1.在设置字体大小的过程中注意权重问题
2.在引入网络地址的时候添加https://
3.单标签不能用字符图标