css中常用的选择器有哪几类

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,选择器可以根据不同的情形选择不同的HTML元素。一般而言,CSS包含了多种选择器,这些选择器在实现CSS样式化中均具有重要的作用。根据选择器的作用及其语法特点,CSS中的选择器可以分为以下

在CSS中,选择器可以根据不同的情形选择不同的HTML元素。一般而言,CSS包含了多种选择器,这些选择器在实现CSS样式化中均具有重要的作用。

根据选择器的作用及其语法特点,CSS中的选择器可以分为以下几类:

1.元素选择器:
   直接使用HTML标签名作为选择器,可以选择所有使用该标签的元素
   例如:p { color: red; } 表示选择所有的<p>标签,并将字体颜色设置成红色。

2.ID选择器:
   使用“#name”的方式选择具有特定id属性的HTML元素
   例如:#logo {width: 200px; height: 100px;} 表示选择id为”logo”的元素,将其宽度设为200px,高度为100px。

3.类选择器:
    使用“.name”的方式选择具有特定class属性的HTML元素
    例如:.nav { font-weight: bold; } 表示选择class为”nav”的元素,并将字体加粗。

4.后代选择器:
    使用“ancestor descendant”形式选择元素,表示选择包含于某个祖先元素中的后代元素
    例如:.wrapper p { font-size: 16px; } 表示选择所有包含于class为“wrapper”的元素内的<p>标签,并将字号设为16px。

5.子元素选择器:
    使用“parent > child”的方式选择元素,表示选择某个父元素的直接子元素
    例如:nav > ul { list-style:none; } 表示仅选择直接子元素为ul的nav元素,并去除列表样式。

6.通用选择器:
    使用“*”选择所有HTML元素
    例如:* { margin:0; padding:0; } 表示给所有元素都添加margin和padding值为0。

其他选择器还包括属性选择器、伪类选择器等。选择器是CSS编写不可或缺的一部分,对于前端开发,选择器的掌握和运用是非常关键的。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中常用的选择器有哪几类

粉丝

0

关注

0

收藏

0

已有0次打赏