CSS选择器是CSS中非常重要的一部分,因为它们允许开发人员选择要显示或修改的HTML元素。选择器的语法通常由选择器本身和紧随其后的一个或多个CSS规则组成。
CSS选择器有不同的类型,最常见的是基本选择器、组合选择器和属性选择器。
基本选择器
选择器 示例 说明 id选择器 #demo 选择id为demo的元素。 类选择器 .demo 选择所有class为demo的元素。 元素选择器 p 选择所有p元素。 通配符选择器 * 选择所有元素。
组合选择器
选择器 示例 讲解 后代选择器 div p 选择div元素内部的所有p元素。 子元素选择器 div >p 选择所有div元素的直接子元素,其中包含p元素。 相邻元素选择器 h1 + p 选择紧接在h1元素后面的第一个p元素。 兄弟元素选择器 h1 ~ p 选择h1元素后面的所有兄弟元素p。
属性选择器
选择器 示例 讲解 存在某个属性的元素 [title] 选择存在title属性的元素。 属性值匹配的元素 [title="demo"] 选择属性title的值是demo的元素。 属性值以某字符开头 [title^="demo"] 选择属性title的值以demo开头的元素。 属性值以某字符结尾 [title$="demo"] 选择属性title的值以demo结尾的元素。 属性值包含某字符 [title*="demo"] 选择存在包含demo字符的title属性的元素。
以上都是一些比较常见的CSS选择器,当然CSS选择器的组合及使用方法不仅限于以上几种,根据实际需求,我们可以灵活运用它们来完成各种特殊的CSS样式设计。