在 CSS 中,选择器用于准确地定位和选择需要应用样式的 HTML 元素。以下是对常见选择器使用方式的详细讲解:

 

元素选择器:

这是最基本的选择器类型,直接指定 HTML 元素的名称。例如, div  选择器会选择所有的  <div>  元素, span  选择器会选择所有的  <span>  元素。通过元素选择器,可以为特定类型的元素应用统一的样式。

 

类选择器:

类选择器以  .  开头,后面跟着自定义的类名。类名可以由字母、数字、连字符和下划线组成。在 HTML 中,通过  class  属性将类应用到元素上,例如  <div class="my-class">  。然后在 CSS 中使用  .my-class { /* 样式规则 */ }  来为具有该类的元素设置样式。类选择器的优点是可以将相同的样式应用于多个不同的元素,提高代码的复用性。

 

ID 选择器:

ID 选择器以  #  开头,后面跟着唯一的 ID 名称。在 HTML 中,通过  id  属性为元素分配 ID,例如  <div id="my-id">  。在 CSS 中使用  #my-id { /* 样式规则 */ }  来设置样式。需要注意的是,在一个 HTML 文档中,每个 ID 应该是唯一的,不能在多个元素上重复使用相同的 ID。

 

通用选择器:

 *  是通用选择器,它会选择文档中的所有元素。虽然可以使用通用选择器来快速设置一些基本样式,但过度使用可能会影响性能,并且在大多数情况下不是一个最佳实践。

 

组合选择器:

 

后代选择器:

通过在两个选择器之间添加空格来表示后代关系。例如, div p  会选择所有在  <div>  元素内部的  <p>  元素,无论  <p>  元素是直接子元素还是更深层次的后代元素。

 

子选择器:

使用  >  符号来指定直接子元素关系。例如, div > p  只会选择直接作为  <div>  元素子元素的  <p>  元素,而不会选择  <div>  元素内部的嵌套  <p>  元素。

 

相邻兄弟选择器:

使用  +  符号来选择紧挨着前一个元素的兄弟元素。例如, h1 + p  会选择紧接在  <h1>  元素之后的第一个  <p>  元素。

 

通用兄弟选择器:

使用  ~  符号来选择前一个元素之后的所有兄弟元素。例如, h1 ~ p  会选择所有在  <h1>  元素之后的  <p>  元素。

 

属性选择器:

 

简单属性选择器:

 [attribute]  会选择具有指定属性的元素,无论属性值是什么。例如, [href]  会选择所有具有  href  属性的元素。

 

具体属性值选择器:

 [attribute="value"]  会选择具有指定属性且属性值完全匹配的元素。例如, [href="https://www.example.com"]  会选择  href  属性值为  https://www.example.com  的元素。

 

部分属性值匹配选择器:

还可以使用  ^  (以指定值开头)、 $  (以指定值结尾)、 *  (包含指定值)来进行部分匹配。例如, [href^="https"]  会选择  href  属性值以  https  开头的元素, [href$=".com"]  会选择  href  属性值以  .com  结尾的元素, [href*="example"]  会选择  href  属性值包含  example  的元素。

 

伪类选择器:

 

链接伪类:

 

-  :link  用于选择未被访问过的链接。

-  :visited  用于选择已被访问过的链接。但由于隐私原因,对于  :visited  伪类,只能设置颜色相关的样式。

 

用户行为伪类:

 

-  :hover  用于当鼠标指针悬停在元素上时。

-  :active  用于当元素被激活(如鼠标按下)时。

-  :focus  用于当元素获得焦点时,常见于表单元素如输入框、按钮等。

 

结构伪类:

 

-  :first-child  选择父元素的第一个子元素。

-  :last-child  选择父元素的最后一个子元素。

-  :nth-child(n)  可以根据参数  n  的值选择父元素的特定子元素。 n  可以是具体的数字、表达式(如  2n  表示偶数位置的子元素, 2n + 1  表示奇数位置的子元素)或关键字(如  even  表示偶数位置, odd  表示奇数位置)。

-  :first-of-type  选择属于其父元素的同类型子元素中的第一个。

-  :last-of-type  选择属于其父元素的同类型子元素中的最后一个。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部