还不会 CSS 选择器？超详细基础讲解

CSS简称为样式表是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。一、三种CSS引入方法1.行内式行内样式是各种引入CSS最直接的一种也叫内联样式。行内样式就是通过直接设置各个元素的style属性从而达到设置样式的目的。!-- 第一种行内式 -- p stylecolor: red; font-size: 10rpx;第一种通过style属性直接在元素里配置样式/p2.内嵌式在HTML文件的 head 标签里用 style 标签包裹CSS代码作用于当前整个页面。!-- 第二种内嵌式 -- style /* 标签选择器直接用标签名选中某个元素 */ h3 { color: aqua; font-size: 15rpx; } /style3.3. 外链式把CSS代码单独写在 .css 文件里再用 link 标签引入到HTML中可被多个页面共用。!-- 第三种外链式 (允许相对路径绝对路径和URL)-- link relstylesheet href./css/style.css二三种基本选择样式1.标签选择器作用直接用 HTML 标签名当选择器选中页面里所有同名标签!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1.标签选择器选中所有标签名一样的元素 */ p { color: red; } /style /head body p荔枝/p p苹果/p p手套/p /body /html2.ID选择器必须以 # 开头后面接元素的 id 属性值。作用精准选中页面中唯一的一个元素注同一个 id 在页面中不能重复!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1.标签选择器选中所有标签名一样的元素 */ #p { color: red; } /* 2.ID选择器根据元素唯一的id选中元素 */ #p1 { color: blue; } #p3 { color: green; } /style /head body p idp1荔枝/p p idp2苹果/p p idp3手套/p /body /html为什么苹果是黑色的呢因为页面里没有id“p”的元素而我们也没有定义id“p2”的颜色所以它就变成默认的黑色。3.类选择器作用用 . 加上元素的 class 属性值选中所有带这个类名的元素。特点一个 class 可以给多个元素用复用性强是开发里用得最多的选择器。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title三种基本选择器/title style /* 1.标签选择器选中所有标签名一样的元素 */ #p { color: red; } /* 2.ID选择器根据元素唯一的id选中元素 */ /*#p1 { color: blue; } #p3 { color: green; } */ /* 3.类选择器根据元素所属的类选中元素 */ /* 注意相同优先级的样式表遵从“后来居上”原则 */ #p1 { color: yellow; } .fruit { color: red; } .daily { color: blueviolet; } /style /head body p idp1 classfruit荔枝/p p idp2 classfruit苹果/p p idp3 classdaily手套/p /body /html上面可以看到我把id选择器那里注释掉了要是没有注释的话根据优先级原则我们的手套还是绿色的不会变成紫色。一些关于基本选择器的注意事项1. 浏览在渲染css样式时先根据优先级渲染然后对相同优先级的样式按照“后来居上”原则最后一个会覆盖前面的渲染例.fruit { color: red; } .fruit { color: blue; /* 最终生效 */ }2. 优先级 行内样式 id选择器样式 类选择器样式 标签选择器样式 无需遵循后来居上原则优先级高的会直接覆盖优先级低的3.ID 必须唯一一个页面不能重复4.类可以重复一个标签也可以加多个类5.选择器的写法标签选择器p{}ID选择器#id“名字”类选择器.类名{}