如何开网站详细步骤图,医疗手机网站开发,wordpress文章函数,中文域名注册官网导语#xff1a; 在上一章节中#xff0c;我们了解了 CSS 的一些基本语法概念#xff0c;那么在这一章节中我们就带来 CSS 选择器知识的分享#xff0c;选择器这一章的知识点有一点多#xff0c;不过我们只要认真去理解#xff0c;学习它也是没什么问题的#xff0c;还有… 导语 在上一章节中我们了解了 CSS 的一些基本语法概念那么在这一章节中我们就带来 CSS 选择器知识的分享选择器这一章的知识点有一点多不过我们只要认真去理解学习它也是没什么问题的还有当我们掌握好CSS选择器的使用后并能熟练的去运用它这对于我们之后的正式开发是有很多帮助的。 文章目录 基本选择器通配符选择器元素选择器类选择器ID选择器基本选择器总结 复合选择器基础复合选择器交集选择器并集选择器补充HTML元素间的结构关系后代选择器子级选择器兄弟选择器 高级复合选择器属性选择器伪类选择器动态伪类结构伪类否定伪类UI 伪类目标伪类语言伪类 伪元素选择器 CSS 选择器优先级权重CSS 的三大特性层叠性继承性优先级 总结 基本选择器
概念: 本章节分析讲解的顺序是按照简单到进阶的过程讲解首先 基本选择器作为 CSS 中的基础项可以更加简单直接的选定元素。缺点是处理复杂场景下的选项时效率一般。 通配符选择器
作用可以选中所有的 HTML 元素。语法
* {属性名: 属性值;
}示例
/* 选中 HTML中的 所有元素 为其设定样式*/
* {color: red;font-size: 25px;
}使用场景 常用于为其全局 HTML清楚默认样式。 元素选择器
作用为页面中 某种元素 统一设置样式。语法
直接写元素标签名 {属性名: 属性值;
}示例
/* 选中页面中所有的 h1 元素 */
h1 {color: rgb(0, 255, 60);font-size: 25px;
}/* 选中页面中所有的 p 元素 */
p {color: aquamarine;font-weight: bold;
}注意 元素选择器 无法实现差异化设置例如上面的代码中全局所有的 p 元素效果都一样。 类选择器
作用根据元素的 class 值来将某些元素进行归类并选中这些元素。语法
.类名 {属性名: 属性值;
}示例
/* 选中所有class值为speak的元素 */
.speak {background-color: blueviolet;font-size: 25px;
}/* 选中所有class值为answer的元素 */
.answer {color: aquamarine;font-weight: 600;
}值得注意 ID选择器
作用根据元素的 ID 属性值来精准的选中某个元素。语法
#id值 {属性名: 属性值;
}示例
/* 选中id值为earthy的那个元素 */
#earthy {color: red;font-size: 60px;
}【值得注意】 id 属性值尽量由字母、数字、下划线( _ )、短杠( - )组成最好以字母开头、不要包含空格、区分大小写。一个元素只能拥有一个 id 属性多个元素的 id 属性值不能相同,具有 唯一性。一个元素可以同时拥有 id 和 class 属性。 基本选择器总结
基本选择器特性用法通配选择器选中所有标签一般用于清除全局默认样式。* {color:red}元素选择器选中所有同种标签但是不能差异化选择。h1 {color:red}类选择器选中所有特定类名 class 值的元素 —— 使用频率很高。.say {color:red}ID选择器选中特定 id 值的那个元素具有唯一性。#earthy {color:red}
复合选择器
复合选择器建立在基本选择器之上由多个基础选择器通过不同的方式组合而成。复合选择器可以在复杂结构中快速而准确的选中元素。
基础复合选择器
交集选择器 作用选中 同时符合 多个条件的元素。语法 示例
/* 选中类名为 speak 的 h1 元素*/
h1.speak {color: aqua;
}/* 选中类名为beauty的p元素为此种写法用的非常多 */
p.beauty {color: blue;
}/* 选中类名包含rich和beauty的元素 */
.rich.beauty {color: green;
}值得注意
有标签名标签名必须写在前面。id 选择器、通配选择器理论上可以作为交集的条件但实际应用中几乎不用 —— 因为没有意义。交集选择器中 不可能 出现两个元素选择器因为一个元素不可能即是 p 元素又是 span 元素。用的最多的交集选择器是元素选择器配合类名选择器例如p.beauty 并集选择器
概念所谓并集就是 或者 的含义通俗理解要么......要么...... 的意思。 作用选中多个选择器对应的元素又称【分组选择器】。 语法 多个选择器通过 ,连接此处 , 的含义就是或。 示例
/* 选中id为peiqi或类名为rich或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}值得注意:
并集选择器我们一般竖着写结构更清晰点。任何形式的选择器都可以作为并集选择器的一部分 。并集选择器通常用于集体声明可以缩小样式表体积。 补充HTML元素间的结构关系
结构关系可分为
父元素子元素祖先元素后代元素兄弟元素
【父元素】直接包裹某个元素的元素就是该元素的父元素。 【子元素】被父元素直接包含的元素简记儿子元素。 【祖先元素】父亲的父亲…一直往外找都是祖先元素 注明备注父元素也算是祖先元素的一种。 【后代元素】儿子的儿子…一直往里找都是后代元素 注明备注子元素也算是后代元素的一种。 【兄弟元素】具有相同父元素的元素互为兄弟元素。 后代选择器 作用选中指定元素中符合要求的后代元素 语法 选择器之间用空格隔开空格可以理解为 xxx 中的其实就是后代的意思。 示例
/* 选中ul中的所有li */
ul li {color: red;
}/* 选中ul中所有li中的a */
ul li a {color: orange;
}/* 选中类名为subject元素中的所有li */
.subject li {color: blue;
}/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {color: blue;
}值得注意
后代选择器最终选择的是后代不选中祖先元素。儿子、孙子、重孙子都算是后代。结构一定要符合 HTML 嵌套规则要求例如不能 p 中写 h1 ~ h6 。 子级选择器 作用选中指定元素中符合要求的子元素儿子元素。先写父再写子 别名子元素选择器、子选择器、子代选择器。 语法 选择器之间用 隔开 可以理解为 xxx 的子代其实就是儿子的意思。 示例
/* div中的子级a元素 */
diva {color: red;
}/* 类名为persons的元素中的子级a元素 */
.personsa {color: red;
}值得注意
子代选择器最终选择的是子代不是父级子、孙子、重孙子、重重孙子 … 统称后代子就是指儿子。 兄弟选择器
相邻兄弟选择器 作用选中指定元素后符合条件并且紧挨着相邻兄弟的元素语法选择器1 选择器2 {} 。示例
/* 选中div后相邻的兄弟p元素 */
divp {color: red;
}通用兄弟选择器 作用选中指定元素后符合条件的 所有兄弟元素语法选择器1 ~ 选择器2 {} 。示例
/* 选中div后的所有的兄弟p元素 */
div~p {color: red;
}值得注意
两种兄弟选择器查找兄弟的时候都是顺序从上向下找去匹对的。 高级复合选择器
属性选择器 作用选中属性值符合一定要求的元素。 语法 [ 属性名 ] 选中 具有 某个属性的元素。[ 属性名值 ] 选中包含某个属性且属性值 等于 指定值的元素。[ 属性名^值 ] 选 包含 某个属性且属性值以指定的值 开头 的元素。[ 属性名$值 ] 选中 包含 某个属性且属性值以指定的值 结尾 的元素。[ 属性名*“值” ] 选择包含某个属性属性值 包含 指定值的元素。 示例
/* 选中具有title属性的元素 */
div[title] {color: red;
}/* 选中 title 属性值为cor的元素 */
div[titlecor] {color: red;
}/* 选中title属性值以c开头的元素 */div[title^c] {color: red;
}/* 选中title属性值以r结尾的元素 */
div[title$r] {color: red;
}/* 选中title属性值包含o的元素 */
div[title*o] {color: red;
}伪类选择器
作用选中特殊状态的元素概念如何理解 【伪类】 — 像类( class )但不是类是元素的一种特殊状态。
动态伪类
:link:超链接 未被访问的状态 【超链接a 标签独享】:visited:超链接 被访问过的状态 【超链接a 标签独享】:hover:超链接 鼠标悬停在元素上的状态:active 元素 激活 的状态。 :focus : 元素获取焦点时的状态
注明只有表单类元素才能使用 :focus 伪类。 结构伪类
:first-child 所有兄弟元素中的 第一个。:last-child 所有兄弟元素中的 最后一个。:nth-child(n) 所有兄弟元素中的 第 N 个元素。:first-of-type所有 同类型兄弟元素中的 第 一个元素。:last-of-type所有 同类型兄弟元素中的 最后一个元素。:nth-of-type(n) 所有 同类型兄弟元素中的 第 N 个元素。
注意关于 n 的 取值范围 结构伪类扩展补充【了解即可】:
语法描述:nth-last-child(n)所有兄弟元素中的倒数第 n 个。:nth-last-of-type(n)所有同类型兄弟元素中的 倒数第n个:only-of-type 选择没有同类型兄弟的元素。:only-child选择没有兄弟的元素独生子女。:root选中全局 html 根元素。:empty内容为空元素空格也算内容。 否定伪类
:not(选择器): 排除 满足括号中条件的元素 UI 伪类
:checked 被选中获取焦点的复选框或单选按钮:enable 可用的表单元素没有 disabled 属性。:disabled 不可用的表单元素有 disabled 属性。
使用场景UI 伪类主要运用在 表单元素。 目标伪类
:target 选中锚点指向的元素使用场景常用于锚点跳转时为其匹配到的锚点元素指定样式 语言伪类
:lang() 根据指定的语言类型选择元素本质是看 lang 属性的值。 伪元素选择器
作用选中元素中的一些特殊位置在某个位置创建一个元素并为其指定样式填充
语法描述::first-letter 选中元素中的第一个文字。::first-line选中元素中的第一行文字。::selection 选中被鼠标选中的内容::placeholder 选中输入框的提示文字。::before在元素最开始的位置创建一个子元素并为其指定样式需配合content指定内容::after 在元素最后的位置创建一个子元素并为其指定样式也需配合content指定内容 CSS 选择器优先级权重
概述 通过不同的选择器选中相同的元素时,并且为相同的样式名设置了不同的属性值时就触发了样式的冲突! 这时候就需要通过计算选择器的权重优先级来适配样式了 基础选择器权重 复合选择器需通过计算规则决定优先级 计算方式 每个选择器都可计算出一组权重格式为 (a,b,c) 比较规则按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比,胜出者为最终展示的样式。 如 特殊规则 行内样式权重大于所有选择器。!important 的权重大于行内样式大于所有选择器权重最高 CSS 的三大特性
层叠性
概念如果发生了样式冲突会触发一定的规则先匹配选择器的优先级优先级如果相同则后声明样式覆盖掉前面样式。
继承性
概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式继承规则优先继承距离最近的。常见可继承属性 CSS中有许多可继承属性这些属性可以被子元素继承并应用到其父元素。以下是一些常见的可继承属性 可继承属性类可继承属性值字体属性font、font-size、font-style、font-weight、line-height …文本属性text-align、text-indent、text-transform、text-decoration …颜色属性color列表属性list-style、list-style-type、list-style-position …表格属性border-collapse、border-spacing、caption-side …元素可见性属性visibility光标属性cursor
值得注意并非所有的CSS属性都是可继承的因此需要根据需要手动为子元素设置相应的样式。
优先级
直观理解 !important 行内样式 ID选择器 类选择器 元素选择器 * 通配符选择器 继承来的样式。细致分析需计算权重 总结 本章节详细的聊了有关 CSS 选择器有关的知识同时也分析了 CSS 选择器的 权重的计算方式最后还总结了 CSS 的三大特性。毫无疑问本章节知识点还是值得大家去参考学习的这也是博主创作结束博文的初衷 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
