!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1. 浏览在渲染css样式时先根据优先级渲染然后对相同优先级的样式按照“后来居上”原则渲染 2. 优先级 行内样式 id选择器样式 类选择器样式 标签选择器样式 无需遵循后来居上原则 */ /* 1.标签选择器选中所有标签名一样的元素 */ /* p { color: red; } */ /* 2.ID选择器根据元素唯一的id选中元素 */ /* #p1 { color: red; } */ /* #p3 { color: green; } */ /* 3.类选择器根据元素所属的类选中元素 */ /* 注意相同优先级的样式表遵从“后来居上”原则 */ #p2 { color: yellowgreen; } #p3 { color: rebeccapurple; } .fruit { color: red; } .fruit { color: rgb(25, 52, 225); } /style /head body !-- 搜索引擎优化要求尽可能为每个元素配置合适的id和class -- p idp1 classfruit 把我留在你身边是否就是幸福 两个人的世界你是否就很满足 对我你只有一再的约束 我的痛苦 你不清楚/p p idp2 classfruit 爱是愚人的国度 看我们演的好辛苦 是你所谓的领悟我不懂 我不哭看悲欢喜怒每一步 是疲惫还是依赖的束缚/p p idp3 classanimal50万加仑的水 42公斤的体重88个琴键24分钟车程33转的LP一个任性的我一个离开的你/p /body /html1. 标签选择器选中所有同名标签示例中被注释2. ID选择器#选中唯一id的元素优先级最高3. 类选择器.选中同一类名的元素可复用• 优先级行内样式 ID选择器 类选择器 标签选择器• 同优先级遵循后来居上后面写的样式覆盖前面的#p2 { color: yellowgreen; } #p3 { color: rebeccapurple; }这两个都是id选择器所以优先级最高显示color里面的颜色.fruit { color: red; } .fruit { color: rgb(25, 52, 225); }这两个是类·选择器 要遵循后来者居上原则显示.fruit {color: rgb(25, 52, 225);}颜色!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1. 浏览在渲染css样式时先根据优先级渲染然后对相同优先级的样式按照“后来居上”原则渲染 2. 优先级 行内样式 id选择器样式 类选择器样式 标签选择器样式 无需遵循后来居上原则 */ /* 1.标签选择器选中所有标签名一样的元素 */ p { color: red; } /* 2.ID选择器根据元素唯一的id选中元素 */ /* #p1 { color: red; } */ /* #p3 { color: green; } */ /* 3.类选择器根据元素所属的类选中元素 */ /* 注意相同优先级的样式表遵从“后来居上”原则 */ /*#p2 { color: yellowgreen; } #p3 { color: rebeccapurple; } .fruit { color: red; } .fruit { color: rgb(25, 52, 225); } /style /head body !-- 搜索引擎优化要求尽可能为每个元素配置合适的id和class -- p idp1 classfruit 把我留在你身边是否就是幸福 两个人的世界你是否就很满足 对我你只有一再的约束 我的痛苦 你不清楚/p p idp2 classfruit 爱是愚人的国度 看我们演的好辛苦 是你所谓的领悟我不懂 我不哭看悲欢喜怒每一步 是疲惫还是依赖的束缚/p p idp3 classanimal50万加仑的水 42公斤的体重88个琴键24分钟车程33转的LP一个任性的我一个离开的你/p /body /html我把其他选择器注释后只留标签选择器的效果如下总结1. 优先级从高到记顺序◦ 行内样式 ID选择器 类选择器 标签选择器◦ 优先级越高样式越强优先级低的样式高优先级样式会直接覆盖。2. 同优先级规则◦ 相同优先级后面的样式覆盖前面“后来居上”。