这是我参与新手入门的第2篇文章。 #沸点
hello,各位小伙伴们大家好呀,我是白祁。对于前端工程师来说,常用的CSS选择器大家必然不会陌生,但是对于一部分平时不太会用到的选择器,你真的够了解吗?本系列将会分两篇讲讲CSS中的选择器,第一篇讲讲有哪些基础的选择器。下一篇咱们会讲这些选择器衍生出来的用法。
1.通配符选择器
* 代表所有元素。
/*选择所有元素。*/
*{
margin:0px;
padding:0px
}
2.元素选择器
元素选择器可以选择页面中所以的该类元素,一般不太会单独使用,经常与其他选择器结合使用。
/*选择所有的p元素。*/
p{
font-size:16px;
}
3.类选择器
类选择器可以选择类名相同的元素,常与元素选择器结合使用。当然也可以单独使用。
/*选择类名为classname的所有元素*/
.classname{
color:blue;
}
4.ID选择器
ID选择器可以选择id为某个值的元素。
/*选择id为myid的元素*/
#myid{
background-color:yellow;
}
5.属性选择器
属性选择器可以选择含有某个属性的元素。
/*选择含有width属性的所有元素*/
[width]{
background-color:yellwo;
}
6.伪类选择器
伪类选择器可以选择满足某种状态的元素。
/*选择用户鼠标悬停的所有元素*/
:hover{
color:yellow;
}
7.伪元素选择器
伪元素选择器可以选择满足条件的元素的某部分。
/*选择元素的第一个字*/
:first-letter{
font-style: italic;
}
在我的认知里,CSS的最基础选择器就是这些咯,至于为什么这篇没有讲兄弟选择器、后代选择器等,是因为这些选择实际上是基础选择器衍生出来的,在下一篇里,我会详细介绍由基础选择器衍生出的用法。敬请期待哟(^U^)ノ~