江苏龙网

  1. 首页 > 生活 > >

特定的样式■css基础篇04--CSS基本选择器

css就如同一件化妆品，能够使得单调的网页变得丰富多彩。在这装饰网页的背后，本质上就是对一个一个html标签进行修饰，如何选择特定的html标签，这就尤其关键。
目标

  • 选择器的意义？
  • 3种基本选择器的用法
选择器的意义 如果想改变一张图片的某个部分的颜色，例如将下面图片左侧头发改变为红色，或者将左侧的衣服改为黑色。
首先肯定是先选择一个目标（头发，衣服），然后对这个目标进行样式的修改。
特定的样式■css基础篇04--CSS基本选择器
文章图片
对比图
一个网页里，往往包含了众多的html标签，因为有选择器存在，你才能够选择特定的目标（html标签）来进行样式的修改。
标签选择器 这种选择器是css最基本的选择器类型，以html标签作为选择器
优点：简单明了，可以对全局标签做统一样式标准
缺点：所有同一个标签都只能使用同一个样式，无法对特定标签做差异化
特定的样式■css基础篇04--CSS基本选择器
文章图片
html标签
特定的样式■css基础篇04--CSS基本选择器
文章图片
标签选择器
特定的样式■css基础篇04--CSS基本选择器
文章图片
效果
ID选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，这个标识如同人的身份证，具有唯一性。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
虽然浏览器现允许多个相同id出现，但十分不建议这样，因为在js里，它无法知道哪个是真的id 选择器。
优点：可以对某个元素指定特定的样式
缺点：无法对样式复用，只能用于一个元素
特定的样式■css基础篇04--CSS基本选择器
文章图片
html标签
特定的样式■css基础篇04--CSS基本选择器
文章图片
id选择器
特定的样式■css基础篇04--CSS基本选择器
文章图片
效果
Class选择器 Class选择器是css经常使用的选择器类型，用于描述一组元素的样式，class 选择器有别于id选择器，class最大的特点是可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
【 特定的样式■css基础篇04--CSS基本选择器】优点：可以对某个元素指定特定的样式；可以对多个元素使用同一个样式，达到复用效果
缺点：无
特定的样式■css基础篇04--CSS基本选择器
文章图片


    推荐阅读


    上一篇： 女人■女人过了40岁，优雅比性感更重要，来打造属于你的法式优雅吧

    下一篇： 『皮肤』敏感肌修复太难了！不妨看看这里分享关于敏感肌最全指南