文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS选择器的详细介绍

2024-04-02 19:55

关注

这篇文章主要讲解了“CSS选择器的详细介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择器的详细介绍”吧!

一、什么是选择器?

选择器是CSS最重要的方面之一,因为它们用于选择网页上的元素,以便可以设置样式。可以通过多种方式定义选择器。

二、通用选择器

通用选择器(用 *  星号或星号表示)与页面上的每个单个元素匹配。如果目标元素上存在其他条件,则可以省略通用选择器。此选择器通常用于从元素中删除默认的边距和填充,以进行快速测试。

例:

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>CSS通用选择器例:</title>         <style>             * {                 margin: 0;                 padding: 0;             } </style>     </head>     <body style="background-color: aqua;">         <h2>This is heading</h2>         <p>This is a paragraph.</p>     </body> </html>

*选择器内的样式规则将应用于文档中的每个元素。

CSS选择器的详细介绍

注意:

不建议* 在生产环境中使用通用选择器,因为此选择器会匹配页面上的每个元素,这会对浏览器造成不必要的压力。

三、元素类型选择器

元素类型选择器将文档树中元素的每个例:与相应的元素类型名称进行匹配。

例:

<style>     h2 {       color: red;     }     p {         color: blue;     } </style>

CSS选择器的详细介绍

p选择器中的样式规则将应用于

文档中的每个元素,并使其颜色为蓝色,无论它们在文档树中的位置如何。

1. ID选择器

id选择器用于为单个或唯一元素定义样式规则,ID选择器的定义是一个井号(#),后跟ID值。

例:

<style>         #error {         color: #ff0000;     } </style>

CSS选择器的详细介绍

此样式规则将id属性设置为的元素文本呈现为红色error。

2. class类选择器

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。

用一个句号(.)紧随其后的类值定义类选择器。

例:

<style>         .blue {         color: #0000ff;     } </style>

CSS选择器的详细介绍

以上样式规则将 class 属性中设置为的文档中每个元素的文本显示为蓝色blue。可以使其更加具体。

例:

p.blue {     color: blue;     }

CSS选择器的详细介绍

选择器中的样式规则p.blue仅<p>将class属性设置为的那些元素呈现为蓝色blue,而对其他段落没有影响。

2.1 后代选择器

当需要选择一个元素是另一个元素的后代时,可以使用这些选择器。例如,如果只想定位无序列表中包含的那些定位点,而不要定位所有定位点元素。

例:

<style>             h2 em {                 color: green;             }              ul.menu {                 padding: 0;                 list-style: none;             }              ul.menu li {                 display: inline;             }              ul.menu li a {                 margin: 10px;                 text-decoration: none;             } </style>

注:

选择器内的样式规则ul.menu li a仅适用于包含在具有class 的无序列表内的那些即锚元素.menu,并且对文档内的其他链接没有影响。

同样,h2 em 选择器内的样式规则仅适用于heading内包含的元素。

2.2 子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成,两个选择器之间用大于号(即>)隔开。例如,可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

例:

<style>     ul > li {         list-style: square; }     ul > li ol {         list-style: none; } </style>

CSS选择器的详细介绍

选择器内的样式规则ul > li仅适用于<li>作为<ul>元素直接子元素的那些元素,并且对其他列表元素没有影响。

2.3 分组选择器

样式表中的多个选择器通常共享相同的样式规则声明。可以将它们分组为一个逗号分隔的列表,以最大程度地减少样式表中的代码。它还可以防止一遍又一遍地重复相同的样式规则。

例:

h2 {     font-size: 36px;     font-weight: normal;    } h3 {     font-size: 28px;     font-weight: normal;    } h4 {     font-size: 22px;     font-weight: normal;    }

可以在上面的例:中看到,相同的样式规则font-weight: normal; 是由选择共享h2,h3和h4。

因此,可以将其分为逗号分隔的列表。

例:

<style>       h2,h3,h4 {         font-weight: normal;       }        h2 {         font-size: 36px;       }        h3 {         font-size: 28px;       }        h4 {         font-size: 22px;       } </style>

CSS选择器的详细介绍

感谢各位的阅读,以上就是“CSS选择器的详细介绍”的内容了,经过本文的学习后,相信大家对CSS选择器的详细介绍这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯