html之css选择器总结

html之css 选择器总结

今天一共学习了3种选择器，分别如下

名称	作用	举例	解释
简单选择器	用标签和属性	div	只需要属性名就可以选择元素
上下文选择器	根据元素上下文关系	div > h2	选择div下的所有h2元素
伪类选择器	不需要再元素添加额外的属性来获取元素	：last-child	选择最后一个子元素

简单选择器

• 分为两类：元素选择器和属性选择器
• 使用标签和属性进行描述，
• 缺点：但是有其局限性，比如元素嵌套使用，对元素的定位，就会非常不方便，设置起来很麻烦
• 优点：设置起来非常直观

上下文选择器

• 上下文选择器，在html中就像一棵树，每个元素都是由层级关系。
• 每个元素都由自己的位置，设置样式非常方便。
• 优点：元素位置明确，设置复杂页面样式方便
• 缺点：虽然上下文选择器把每个元素的位置都确定了，但如果想选择同级别下的第二个元素就选择不了，很难定位的到

伪类选择器

• 用最简洁的话说，就是不需要在元素上添加额外的属性来获得位置。
• 伪类也分为两种：结构伪类和表单伪类
• 结构伪类，根据子元素的位置特征来选择，有点类似由上下文选择器
• 表单伪类：根据表单控件的状态来选择，比如<a>标签有几种状态，我们可以根据不同状态，来选择

总结

总的来说，每种选择器都有各自的优点，没有绝对的好与坏，只有适合和不适合，我们都要根据自己的需求来设置选择器。