做网站推广一年多少钱,做ppt模板网站有哪些,犀牛云做网站编辑上传,网站开发php教程CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器#xff08;*#xff09;2.标签选择器#xff08;div#xff09;1.3 类名选择器#xff08;.class#xff09;4. id选择器#xff08;#id#xff09; 二、 属性选择器#xff08;attr#xff09;三、伪… CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器*2.标签选择器div1.3 类名选择器.class4. id选择器#id 二、 属性选择器attr三、伪类选择器四、 伪元素选择器五、 组合选择器 选择器的作用选择页面中对应的标签方便后续设置样式
权重
选择器示例权重值!importantcolor: #000 !important正无穷大内联样式style“…”1 0 0 0ID选择器#id0 1 0 0类伪类、属性选择器.content1 0 0 0标签选择器、伪元素选择器div0 0 0 1继承属性inherit0 0 0 0 一、基本选择器
1.1 通配符选择器*
通配选择器会找到页面中所有的标签并设置样式。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候省略掉通配选择器会有同样的效果。比如*.warning 和.warning 的效果完全相同。通配符选择器在 CSS 中虽然功能强大但由于它选择所有元素通常不建议频繁使用因为可能会影响性能并导致意外的样式覆盖。 开发中使用极少只会在特殊情况下使用 用于去除标签默认的margin和padding等。
1. 统一重置样式
在项目开始时使用通配符选择器来重置或统一所有元素的默认样式是一个常见的做法。这样可以消除浏览器的默认样式差异确保所有元素从一个统一的基础开始。
* {margin: 0;padding: 0;box-sizing: border-box;line-height: 1;font-size: 16px;font-family: Arial, sans-serif;
}1.2 清除浮动
可以使用通配符选择器来清除所有元素的浮动效果。
*::after {content: ;display: table;clear: both;
}2.标签选择器div
选择指定类型的 HTML 元素。通过标签名找到页面中所有这类标签设置样式。 标签选择器选择的是一类标签而不是单独某一个标签选择器无论嵌套关系有多深都能找到对应的标签。
1. 全局样式重置
在大型项目中通常会使用标签选择器来为全局的 HTML 元素设置初始样式或重置默认样式确保在不同浏览器中呈现的一致性。
body, h1, h2, h3, p, ul, ol, li {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;
}2. 常见元素的样式定义
在页面设计中经常需要为常见的文本元素如段落、标题、列表等设置统一的样式。使用标签选择器可以轻松定义这些元素的基本外观。
p {line-height: 1.6;margin-bottom: 16px;color: #333;
}h1, h2, h3 {margin-bottom: 10px;color: #222;
}1.3 类名选择器.class
选择具有特定类名的元素。通过类名找到页面中所有带有这个类名的标签并设置样式。 类名可以由数字、字母、下划线、中划线组成但不能由数字或中划线开头。 一个标签可以同时有多个类名类名之间以空格隔开 类名可以重复一个类选择器可以同时选中多个标签。
1. 组件化样式管理
在现代前端开发中尤其是使用框架如 React、Vue 等时类选择器常用于为可复用的组件定义样式。每个组件都有自己的类名这样可以确保样式的独立性避免与其他组件的样式冲突。
div classcardh2 classcard-titleCard Title/h2p classcard-contentThis is some card content./p
/div.card {border: 1px solid #ccc;padding: 20px;border-radius: 8px;
}.card-title {font-size: 18px;font-weight: bold;
}.card-content {font-size: 14px;color: #555;
}
2. 元素样式管理
类选择器常用于表示元素的不同状态特别是在交互设计中如按钮的启用/禁用状态、表单输入的验证状态等。通过改变元素的类名可以轻松地在不同状态之间切换样式可以实现组件的样式复用和状态管理增强了样式的灵活性和可维护性。
button classbuttonSubmit/button
button classbutton disabled disabledDisabled/button.button {background-color: blue;color: white;padding: 10px 20px;border: none;cursor: pointer;
}.button.disabled {background-color: grey;cursor: not-allowed;
}4. id选择器#id 选择具有特定 ID 的元素。为了使该元素被选中它的 id 属性必须与选择器中给出的值完全匹配。 id属性值类似于身份证号码在一个页面中是唯一的不可重复的强行使用会展示效果但是不符合语法规范 一个标签上只能有一个id属性值 一个id选择器只能选中一个标签 类与id的区别 class类名相当于姓名可以重复一个标签可以同时有多个class类名id属性值相当于身份证号码不可重复一个标签只能有一个id属性值
1. 唯一元素的样式控制
id选择器常用于页面中仅出现一次的唯一元素如页面的导航栏、页脚、或特定的模块。这些元素通常有特定的样式需求使用 id选择器可以确保这些样式只应用于这个唯一元素。
header idmain-headerh1Welcome to My Website/h1
/header#main-header {background-color: #333;color: white;padding: 20px;text-align: center;
}2. 结合javascript操作DOM元素
在 JavaScript 中id选择器常用于快速选择并操作特定的 DOM 元素。由于id是唯一的可以保证选择到的是页面上唯一的那个元素。
button idsubmit-buttonSubmit/button#submit-button {background-color: #007bff;color: white;border: none;padding: 10px 20px;cursor: pointer;
}document.getElementById(submit-button).addEventListener(click, function() {alert(Button clicked!);
});二、 属性选择器attr
根据元素的属性进行选择。CSS 属性选择器匹配那些具有特定属性或属性值的元素。
1. 对 存在xx属性 的元素设置特定样式
根据 required 属性标记必填表单元素。
input[required] {border: 2px solid red;
}2. 对 存在xx属性且属性值匹配 的元素设置特定样式
根据 type 属性为不同类型的输入框应用不同的样式。
input[typetext] {width: 300px;
}input[typesubmit] {background-color: blue;color: white;
}3. 对 存在xx属性且包含属性值xx 的元素设置特定样式
这个选择器会选择 href 属性中包含子字符串 “example” 的所有a元素。不论 “example” 位于 href 属性的开头、中间还是结尾只要出现了这个子字符串样式都会被应用。
a[href*example] {font-size: 2em;
}4. 对 属性值以指定的值开头的 元素设置特定样式
选择href属性以https字符串开头的所有a元素。
a[href^https] {color: red;font-weight: bold;
}5. 对 属性值以指定的值结尾 的元素设置特定样式
根据文件链接的后缀名为不同类型的文件链接设置不同的样式。
a[href$.pdf] {color: red;font-weight: bold;
}6. 对 属性值是以空格分隔的值之一 的元素设置特定样式
这个选择器则选择 href 属性中含有以空格分隔的单词之一为 “example” 的 a 元素。它会将 href 属性值拆分为多个单词并检查其中是否有 “example” 这个单词。
a[href~example] {padding: 2px;
}a[href*example]选择 href 属性中包含 “example” 的链接不管其在字符串中的位置。a[href~example]选择 href 属性中包含独立单词 “example” 的链接通常用在属性值为空格分隔的列表中。在实际应用中* 选择器更为常用因为它更加灵活可以匹配部分字符串。而 ~ 选择器则在特定情况下有用尤其是处理以空格分隔的属性值时。
7. 状态控制
使用 data-* 属性结合属性选择器实现导航栏在不同设备下的样式调整。
nav[data-visibletrue] {display: block;
}nav[data-visiblefalse] {display: none;
}三、伪类选择器
1. :hover
用于选择鼠标悬停在元素上时的状态。可以为按钮或链接添加悬停效果以提高用户体验。
button:hover {background-color: #ddd;cursor: pointer;
}相关选择器
2. :active
用于选择被激活的元素通常是鼠标点击时。当用鼠标交互时它代表的是用户按下按键和松开按键之间的时间。可以为按钮添加点击时的反馈效果。
button:active {background-color: #bbb;
}3. :focus
用于选择获得焦点的元素。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时它会被触发。用于突出显示当前获得输入焦点的表单元素。
input:focus {border-color: blue;outline: none;
}4. :nth-child(n)
用于选择父元素中第 n 个子元素。n 可以是具体数字也可以是公式。交替行样式的实现如表格或列表的奇偶行不同样式。
li:nth-child(3) {background-color: #fff;
}li:nth-child(n3) {background-color: #111;
}li:nth-child(odd) {background-color: #222;
}li:nth-child(even) {background-color: #333;
}5. :first-child
用于选择父元素中的第一个子元素。为段落或列表中的第一个子元素设置特定样式。
p:first-child {font-weight: bold;
}6. :last-child
用于选择父元素中的最后一个子元素。去掉最后一个元素的底部边距或为其设置不同的样式。
p:last-child {margin-bottom: 0;
}7. :not(selector)
用于选择不匹配 selector 的所有元素。由于它的作用是防止特定的元素被选中它也被称为反选伪类negation pseudo-class。为一组元素应用统一样式同时排除某些特定元素。
input:not([typesubmit]) {width: 100%;
}8. :checked
用于选择被选中的复选框或单选按钮。自定义复选框或单选按钮的选中状态样式。
input[typecheckbox]:checked {background-color: green;
}9. :disabled
用于选择禁用状态的表单元素。为禁用的表单元素设置不同的外观通常用于提示不可操作。
input:disabled {background-color: #e0e0e0;cursor: not-allowed;
}10. :first-of-type
用于选择父元素中第一个同类型的子元素。设置特定类型元素中的第一个元素样式。
p:first-of-type {color: red;
}11. :last-of-type
用于选择父元素中最后一个同类型的子元素。为特定类型元素中的最后一个元素设置样式。
p:last-of-type {color: blue;
}12. :empty
用于选择没有任何子元素的元素包括文本节点。隐藏空元素或为其设置占位符样式。
div:empty {display: none;
}13. :nth-of-type(n)
用于选择父元素中第 n 个同类型的子元素。为特定类型的子元素按顺序应用样式如每个列表项中的第二个元素。
/* 奇数段 */
p:nth-of-type(2n 1) {color: red;
}p:nth-of-type(odd) {color: red;
}/* 偶数段 */
p:nth-of-type(2n) {color: blue;
}p:nth-of-type(even) {color: blue;
}/* 第一段 */
p:nth-of-type(2) {font-weight: bold;
}/* 这将匹配第三个段落因为它匹配的元素是 2n1 并且具有 fancy 类。第二个段落具有 fancy 类但不匹配因为它不是:nth-of-type(2n1)。
*/
p.fancy:nth-of-type(2n 1) {text-decoration: underline;
}场景
这些伪类选择器在日常的 CSS 开发中非常实用能够根据元素的状态、位置等特性来精确控制样式从而提升用户体验和界面设计的灵活性。
MDN-CSS伪类选择器 四、 伪元素选择器
1. ::before
::before 创建一个伪元素其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。 伪元素默认是行内元素p::before {content: Note: ;font-weight: bold;
}2. ::after
在 CSS 中::after 会创建一个伪元素作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。伪元素默认是行内元素p::after {content: (end);font-style: italic;
}3. ::first-line
选择某个块级元素的第一行。::first-line 只能在块级元素中使用即 ::first-line 伪元素 只在display属性值为 block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用。
/* 设置多行文本框 textarea 第一行文本的样式 */
textarea::first-line {font-size: 1.3em;font-weight: 600;margin-bottom: 8px;
}4. ::first-letter
选择某个块级元素的的第一个文字并且文字所处的行之前没有其他内容。
/* 设置 p 元素的第一个字符的样式 */
p::first-letter {color: #000;font-weight: 600;
}5. 滚动条
在块级容器上设置属性当块级内容区域超出块级元素范围的时候就会以滚动条的形式展示你可以滚动里面的内容里面的内容不会超出块级区域范围。
overflow:scroll /* x y 方向都会*/
overflow-x:scroll /*只是x方向*/
overflow-y:scroll /*只是y方向*/设置scrollbar的为CSS伪元素对应上图的数字
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }::-webkit-scrollbar //滚动条整体部分
::-webkit-scrollbar-button //滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece //内层轨道滚动条中间部分除去
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner //边角
::-webkit-resizer //定义右下角拖动块的样式五、 组合选择器
1. 后代选择器ancestor descendant
根据HTML标签的嵌套关系选择父元素后代中满足条件的元素。 后代包括:儿子、孙子、重孙子…div p {color: blue;
}2. 子选择器parent child
根据HTML标签的嵌套关系选择父元素子代中满足条件的元素。 子代只包括:儿子。ul li {list-style: none;
}3. 相邻兄弟选择器prev next 相邻兄弟选择器可选择紧接在另一个元素后的元素且二者具有相同的父亲元素。 h1 p {margin-top: 0;
}pHello word!/p
pHello word!/p
h1Hello word!/h1
pHello word!/p
pHello word!/p
pHello word!/p
pHello word!/p4. 通用兄弟选择器prev ~ siblings 作用是查找某一个指定元素的后面的所有兄弟结点。 h1 ~ p {color: grey;
}p1/p
h12/h1
p3/p
p4/p
p5/p5. 并集选择器
同时选择多组标签设置相同的样式。 并集选择器中的每组选择器之间通过分隔。并集选择器中的每组选择器可以是基础选择器或者复合选择器。并集选择器中的每组选择器通常一行写一个提高代码的可读性。
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {color: red;
}6. 交集选择器
选中页面中同时满足多个选择器的标签。既又原则)找到页面中既能被选择器1选中又能被选择器2选中的标签设置样式。 交集选择器中的选择器之间是紧挨着的没有东西分隔。 交集选择器中如果有标签选择器标签选择器必须写在最前面
/*必须是p标签,而且添加了box类 */
p.box {color: red;
}
/* .box是类选择器 */7. 子元素选择器
div p {color: purple;
}
