前端 css 选择器种类繁多,今天做了一下整理,不过该文章只适合前端小萌新,老油条请绕道。
1. 常见选择器
- 元素选择器
a,p,div,li,ul{
color:red;
}
/*页面上所有的a,p,li,ul都会将字体颜色设置为红色,不过优先级最低*/
- id 选择器
<p id="test">我会红</p>
<style>
#test{
color:red;
}
/*id选择器通过id属性来绑定一个唯一id,样式通过# + ‘id’来实现关联,优先级较高*/
</style>
- 类选择器
<p class="test">我会红</p>
<style>
.test{
color:red;
}
/*类选择器通过class属性来绑定一个类名,样式通过. + ‘class’来实现关联,优先级低于id选择器,这种选择器是用的最多的*/
</style>
- 属性选择器
<a class="test" src='/test.html'>我会红</a>
<style>
[src^="test"]{
color:blue;
}
.test[src]{
color:red;
}
/*属性选择器通过[attr=*]来选择具有该属性的元素,属性值支持通配符(不做具体详解)形式,优先级较低,多种选择器可以结合使用,上例中,后者优先级高于前者,所以呈现的字体为红色。*/
</style>
2.子元素和后代元素选择器
<p>我不会变色</p>
<ul>
<li>我是子元素<span>我是子子元素</span></li>
<li>我是第二个子元素</li>
<li>
<li>我是li里面的li</li>
</li>
</ul>
<p>我会变红</p>
<style>
ul li{
margin-left:20px;
}
/*通过空格隔开的方式选择所有子元素,这样,ul里面的所有li都会应用到左边距20px的样式,包括li里面的li*/
ul>li{
padding-left:20px;
}
/*通过选择器 > 选择器 来选择直接子元素,意思是说,只有第一级的li会被应用成左内边距20px,而li里面的li不会被应用到。*/
ul + p{
background-colo:red;
}
/*通过 选择器 + 选择器 来选择兄弟元素,这样让下面的p元素的背景色为红色,而第一个p标签的背景色不会变。*/
</style>
3.伪类选择器
伪类专门用来表示元素的一种的特殊的状态。
比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
:link
表示普通的链接(没访问过的链接)
:visited
表示访问过的链接
:hover
表示鼠标移入的状态
:active
表示的是超链接被点击的状态
:focus
表示文本框获取焦点
ps: :hover
和 :active
也可以为其他元素设置(ie6 不支持)
说明:普通标签支持 :hover,:focus
其他伪类只有一些特定的标签才支持,比如说:a 标签支持:visited,:active,link
;button
支持 :active,:focus
。举例:
<a class="test" src='/test.html'>我是连接</a>
<button>点我我就绿</button>
<style>
a:link{
color:blue;
}
/*连接未被访问过,为blue颜色*/
a:visited{
color:red;
}
/*访问之后,变成红色*/
a:hover{
font-size:40px;
}
/*鼠标一上去,字体变大*/
button:focus{
color:green;
}
/*点击按钮,按钮聚焦,会变成绿色*/
button:active{
color:red;
}
/*点击按钮的过程中,按钮颜色会变红*/
</style>
4.伪元素选择器
p:first-letter
作用:选择 p 中第一个字符
p:first-line
选择 p 中的第一行
:before
表示元素最前边的部分, 一般 before
都需要结合 content
这个样式一起使用,通过 content
可以向 before
或 after
的位置添加一些内容
:after
表示元素的最后边的部分,就是跟 :before
添加元素的位置不一样,其他是一致的。
5.子元素伪类选择器
:first-child
可以选中第一个子元素
:last-child
可以选中最后一个子元素
:nth-child(XXX)
可以选中任意位置的子元素,该选择器后边可以指定一个参数,指定要选中第几个子元素,even
表示偶数位置的子元素,odd
表示奇数位置的子元素。
:first-of-type、:last-of-type、:nth-of-type
和 :first-child
这些非常的类似,只不过 child
,是在所有的子元素中排列,而 type
,是在当前类型的子元素中排列
6.优先级
很明显,上面多种选择器直接,会存在交叉和冲突,很多地方库,我们在引入的时候,需要覆盖原来的样式,这时候可以利用选择器优先级来覆盖原来库里面的样式。
元素选择器 < 属性选择器 < 类名选择器 < id 选择器 <
!important
。不过一般不建议用使用!important
。如果是相同的优先级,则后写的样式会覆盖前面写的样式。子选择器的优先级低于直接选择的优先级。多个类名的组合的优先级会高于单个类名的优先级。多级的子选择器会比一级的子选择器优先级高。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于