CSS选择器
本书的第十六章是对CSS部分的一个总结,用于导航,所以不记录。第十七、十八章是讲解CSS选择器的,所以我准备这三章一起记录。
*--通用选择器
*这个选择器能选择所有的元素。
a、p、div、span--类型选择器
a、p、div、span这类元素可以组成类型选择器。
.class--类选择器
.class通过.class的名字来选择。一般情况下,用于多次使用。
<style>
.color { color: red }
</style>
<p class="color">...</p>
id--ID选择器
id通过#id的方式来选择。一般情况下id名称在同一个html中是唯一的,只用于一个元素上。
<style>
#color { color: red }
</style>
<p id="color">...</p>
[href]--根据属性选择
通过元素中是否拥有该属性来选择。还可以通过属性=值的方式再次缩小范围。
并集选择器,通过','隔开
a,p,div选择所有的a,p,div
后代选择器,通过空格隔开
div p选择div内的p
伪选择器
:before在元素之前:after在元素之后:checked已选择的元素:default通常和outline一起使用::first-line代表选择第一行::first-letter代表第一行的第一个字母
鼠标交互的选择器
:hover鼠标悬停:active鼠标点击:focus获得焦点
input内的选择器
:required选择必须填入的输入框:optional选择可不填的输入框
子元素选择器
:first-child元素的第一个子元素:last-child元素的最后一个子元素:only-child元素的唯一子元素:only-of-type元素指定类型的一子元素
:nth-child选择器
:nth-child(n)父元素的第n个子元素:nth-last-child(n)父元素的倒数第n个子元素:nth-of-type(n)父元素定义类型的第n个子元素:nth-last-of-type(n)父元素定义类型的倒数第n个子元素