下定决心还是再学一遍CSS等前端知识
CSS选择器
-
什么是CSS选择器
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
-
选择器的种类繁多
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(psedo-elements)
通用选择器(universal selector)
-
选择所有的元素
-
一般用来给所有元素设置一些通用性的设置
- 比如内边距，外边距
- 比如重置一些内容
-
效率比较低，尽量不要使用
-
body 默认有一个margin 8px
* {
font-size: 20px;
}
/*尽量不用通配符*/
body, p, div, h2, span {
margin: 0;
padding: 0;
}
简单选择器
-
一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线，下划线连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
-
中华线又叫连字符（hyphen）
元素选择器(type selectors)， 使用元素的名称
类选择器(class selectors)，.类名
id选择器(id selectors)，#id
属性选择器
-
拥有某一个属性
[att] -
属性等于某个值
[att=val] -
其他了解下
[att*=val]: 属性值包含某一个值val[att^=val]: 属性值以val开头[att$=val]: 属性值以val结尾[att|=val]: 属性值等于val或者以val开头后面紧跟连接符-[att~=val]: 属性值包含val，如果有其他值，比如以空格和val分割
<div title="div"></div>
<h2 title="h2"></h2>
[title] {
color: red;
}
[title=div] {
background-color: red;
}
后代选择器(descendant combinator)
-
后代选择器一：所有后代（直接和间接的后代）
- 选择器之间以空格分割
.box span {xxx}
- 选择器之间以空格分割
-
后代选择器二：直接 子代选择器（必须是直接自带）
- 选择器之间以
>分割
- 选择器之间以
兄弟选择器(sibling combinator)
- 相邻兄弟选择器
.box + .content {}
- 普遍兄弟选择器
~.box ~ div {}
选择器组
交集选择器
- 同时符合两个选择器条件，为了精准选择某一个元素
<div class="box"></div>
<p class="box"></p>
div.box {
xxx
}
并集选择器
- 符合一个选择器条件即可，两个选择器以
,分割
body, h2, p, div {
xxx
}
伪类
认识伪类
-
Pseudo-classes，伪类
-
伪类是选择器的一种，用于选择处于特定状态的元素
-
常见的伪装
- 动态伪类(dynamic pseudo-classes)
:link:visited:hover:active:focus
- 目标伪类(target pseudo-classes)
:target
- 语言伪类(language pseudo-classes)
:lang(en)
- 元素状态伪类(UI element states pseudo-classes)
:enabled:disabled:checked
- 结构伪类（structural pseudo-classes）
:nth:nth-child():nth-last-child():nth-of-type():nth-last-of-type()
:first:first-child():last-last-child():first-of-type():last-of-type()
- 第三类
:root:only-child:only-of-type:empty
- 否定伪类(negation pseudo-classes)
:not()
- 动态伪类(dynamic pseudo-classes)
div:hover{
}
动态伪类(dynamic pseudo-classes)
-
:linka:link未访问的连接
-
:visiteda:visited已访问的连接
-
:hovera:hover鼠标挪动到链接上
-
:activea:active激活的连接(鼠标在链接上长按住未松开)
-
:focus- 指当前拥有输入焦点的元素（能接收键盘输入）
- 文本输入框一聚焦后，背景就会变成红色
- 因为链接a元素可以被键盘的tab键选中聚焦，所以
:focus也适用于a元素
-
使用注意
:hover必须放在:link和:visited后面才能完全生效:active必须放在:hover后面才能完全生效- 所以建议的编写顺序是
:link、:visited、:hover、:active
-
除了a元素，
:hover、:active也可以用在其他元素上 -
动态伪类的编写顺序建议为：
:link、:visited、:focus、:hover、:active
-
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
伪元素(pseudo-elements)
-
常见的伪元 素有
:first-line,::first-line:first-letter,::first-letter:before,::before:after,::after
-
为了区分伪类和伪元素，建议用两个冒号
-
:first-line,::first-line- 可以针对首行文本设置属性
