CSS选择器
CSS选择器用于精确选取指定的HTML进行样式编写,也可以用于对某一组样式的精确编写
后代选择器
后代选择器用于选取指定元素的所有指定后代
ul a {
transition: all 1s ease-in-out;
}
选择
ul
中的所有a
标签,如果ul
里的li
里有a
标签,那么也会被选中
亲儿子选择器
亲儿子选择器(子代选择器)用于选择指定元素的直接子代(最近一级的子元素),不会选择子代的子代等,注意与后代选择器的区别
ul > a {
opacity: 0.7;
}
选中
ul
中的"亲儿子"a
标签,如果ul
里的li
里有a
标签,则不会被选中
并集选择器
将多个选择器选中,并同时设定样式
span,
em {
dispaly: block;
}
将
span
标签和em
标签同时设定样式
伪类选择器
伪类选择器最大的特点就是加了冒号(:),比如:hover
、:first-child
等
链接伪类
a:link
a:link
用于选择所有未被访问过的链接,给所有未被访问过的链接设定样式
a:link {
color: #000;
}
a:visited
a:visited
用于选择所有已被访问过的链接,给已被访问过的链接设定样式
a:visited {
color: #eee;
}
a:hover
a:hover用于选择鼠标指针位于其上的链接,给鼠标在其上面的链接设定样式
a:hover {
color: #f00;
}
a:active
a:active用于选择被鼠标点击而鼠标未弹起时的链接,给其设定样式
a:active {
color: #00ff00;
}
写链接伪类时需要注意的点
为确保编写的链接伪类能够生效,应当以:link
=>:visited
=>:hover
=>:active
的顺序进行编写(LVHA顺序,联想记忆:love hate)
focus选择器
focus选择器一般用于选择获得焦点的表单元素
input:focus {
background-color = yellow;
}