第十六——十八章 CSS选择器

106 阅读2分钟

CSS选择器

本书的第十六章是对CSS部分的一个总结,用于导航,所以不记录。第十七、十八章是讲解CSS选择器的,所以我准备这三章一起记录。

*--通用选择器

*这个选择器能选择所有的元素。

a、p、div、span--类型选择器

apdivspan这类元素可以组成类型选择器。

.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个子元素