选择器/选择符:
表示要定义样式的对象。为了选中我们想要设置样式的元素;
选择器:
属性选择:
元素[属性]{}只指定属性名
元素[属性=“属性值”]{}指定属性名且指定属性值
元素[属性~=“属性值”]{}指定属性名且指定属性值,属性值是一个词列表,中间以空格隔开的词列表。
元素[属性^=“属性值”]{}指定属性名且指定属性值,以value开头。
元素[属性$=“属性值”]{}指定属性名且指定属性值,以value结束。
元素[属性*=“属性值”]{}指定属性名且指定属性值,只要包含着value就可以
元素[属性|=“属性值”]{}指定属性名且指定属性值,以value-开头或独立存在的。
伪类选择器(结构性伪类,UI元素状态伪类,动态伪类,否定伪类,语言伪类,目标伪类)
结构性伪类选择器:
E(first-child):选择位于父元素里第一个子元素E。
E(first-of-type):选择位于父元素里匹配同类型第一个子元素E。
E(last-child):选择位于父元素里最后一个子元素E。
E(last-of-type):选择位于父元素里最后匹配同类型的元素E。
E(nth-child):选择位于父元素里第几个子元素E。
E(nth-of-type):选择位于父元素里匹配同类型的第几个子元素E。
E(only-child):选择位于父元素里唯一个子元素E。
E(only-of-type):选择位于父元素里唯一个匹配同类型子元素E。
E(nth-last-child):选择位于父元素里倒数第一个子元素E。
E(nth-last-of-type):选择位于父元素里匹配同类型倒数第一个子元素E。
:empty选择没有任何子元素的元素
:root选择当前文档的根元素
UI元素状态伪类
:disabled
:enabled
:checked
动态伪类
:hover
:link
:visited
:active
:focus
否定伪类
:not(){}
语言伪类
:lang(){
}
目标伪类:
:target{
}
层级选择器:
包含E F{}
子选择器E>F{}
相邻兄弟选择器E+F{}
通用兄弟选择器E~F{}
伪元素
:after{}
:before{}
:first-letter{}
:first-line{}
::selection{}只能设置文本颜色 ,背景颜色的属性
浏览器前缀:
-webkit- 谷歌 苹果
-moz- 火狐
-ms- IE
-o- 欧朋
属性:
盒子阴影:box-shadow:2px 2px 2px 2px color inset;
文本阴影:box-shadow:2px 2px 2px color;
word-break:normal keep-all break-all(单词内允许换行)
word-wrap:noraml break-word(长单词换到下一行,如果还有溢出再进行单词内允许换行)
字体:
第一步:下载需要的图标。
第二步:复制所有文件放到站点里。
第三步:引用
引用方式:
1)字符编码
链接外部iconfont.css
<span class="iconfont">图标对应的编码</span>
2) 通过class名
链接外部iconfont.css
<span class="iconfont 图标对应的class名"></span>