谈谈CSS选择器(上)

518 阅读2分钟

这是我参与新手入门的第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^)ノ~