ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS选择器的全面解析与实战应用 [打印本页]

---

作者: 半亩花草    时间: 2024-10-1 12:34
标题: CSS选择器的全面解析与实战应用

---

选择器的作用：选择页面中对应的标签，方便后续设置样式
权重：
选择器示例权重值!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. 统一重置样式

• 在项目开始时，使用通配符选择器来重置或统一全部元素的默认样式是一个常见的做法。如许可以消除浏览器的默认样式差异，确保全部元素从一个统一的根本开始。
  

1. * {
2.     margin: 0;
3.     padding: 0;
4.     box-sizing: border-box;
5.     line-height: 1;
6.     font-size: 16px;
7.     font-family: Arial, sans-serif;
8. }

复制代码

1.2 清除浮动

• 可以使用通配符选择器来清除全部元素的浮动效果。
  

1. *::after {
2.     content: "";
3.     display: table;
4.     clear: both;
5. }

复制代码

2.标签选择器（div）

• 选择指定类型的 HTML 元素。通过标签名，找到页面中全部这类标签，设置样式。 标签选择器选择的是一类标签，而不是单独某一个；标签选择器无论嵌套关系有多深，都能找到对应的标签。
  

1. 全局样式重置

• 在大型项目中，通常会使用标签选择器来为全局的 HTML 元素设置初始样式或重置默认样式；确保在不同浏览器中呈现的一致性。
  

1. body, h1, h2, h3, p, ul, ol, li {
2.     margin: 0;
3.     padding: 0;
4.     box-sizing: border-box;
5.     font-family: Arial, sans-serif;
6. }

复制代码

2. 常见元素的样式界说

• 在页面设计中，常常需要为常见的文本元素（如段落、标题、列表等）设置统一的样式。使用标签选择器可以轻松界说这些元素的根本外观。
  

1. p {
2.     line-height: 1.6;
3.     margin-bottom: 16px;
4.     color: #333;
5. }
7. h1, h2, h3 {
8.     margin-bottom: 10px;
9.     color: #222;
10. }

复制代码

1.3 类名选择器（.class）

• 选择具有特定类名的元素。通过类名，找到页面中全部带有这个类名的标签，并设置样式。 类名可以由数字、字母、下划线、中划线构成，但不能由数字或中划线开头。 一个标签可以同时有多个类名，类名之间以空格隔开； 类名可以重复，一个类选择器可以同时选中多个标签。
  

1. 组件化样式管理

• 在当代前端开辟中，尤其是使用框架（如 React、Vue 等）时，类选择器常用于为可复用的组件界说样式。每个组件都有自己的类名，如许可以确保样式的独立性，避免与其他组件的样式辩论。
  

1. <div class="card">
2.     <h2 class="card-title">Card Title</h2>
3.     <p class="card-content">This is some card content.</p>
4. </div>

复制代码

1. .card {
2.     border: 1px solid #ccc;
3.     padding: 20px;
4.     border-radius: 8px;
5. }
7. .card-title {
8.     font-size: 18px;
9.     font-weight: bold;
10. }
12. .card-content {
13.     font-size: 14px;
14.     color: #555;
15. }

复制代码

2. 元素样式管理

• 类选择器常用于表现元素的不同状态，特殊是在交互设计中，如按钮的启用/禁用状态、表单输入的验证状态等。通过改变元素的类名，可以轻松地在不同状态之间切换样式；可以实现组件的样式复用和状态管理，增强了样式的灵活性和可维护性。
  

1. <button class="button">Submit</button>
2. <button class="button disabled" disabled>Disabled</button>

复制代码

1. .button {
2.     background-color: blue;
3.     color: white;
4.     padding: 10px 20px;
5.     border: none;
6.     cursor: pointer;
7. }
9. .button.disabled {
10.     background-color: grey;
11.     cursor: not-allowed;
12. }

复制代码

4. id选择器（#id）

• 选择具有特定 ID 的元素。为了使该元素被选中，它的 id 属性必须与选择器中给出的值完全匹配。
  
• id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！（强利用用会展示效果，但是不符合语法规范！！！）
  
• 一个标签上只能有一个id属性值
  
• 一个id选择器只能选中一个标签
  
• 类与id的区别：
  
  
  
  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
    
  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
    
  
  

1. 唯一元素的样式控制

• id选择器常用于页面中仅出现一次的唯一元素，如页面的导航栏、页脚、或特定的模块。这些元素通常有特定的样式需求，使用 id选择器可以确保这些样式只应用于这个唯一元素。
  

1. <header id="main-header">
2.     <h1>Welcome to My Website</h1>
3. </header>

复制代码

1. #main-header {
2.     background-color: #333;
3.     color: white;
4.     padding: 20px;
5.     text-align: center;
6. }

复制代码

2. 结合javascript操作DOM元素

• 在 JavaScript 中，id选择器常用于快速选择并操作特定的 DOM 元素。由于id是唯一的，可以保证选择到的是页面上唯一的那个元素。
  

1. <button id="submit-button">Submit</button>

复制代码

1. #submit-button {
2.     background-color: #007bff;
3.     color: white;
4.     border: none;
5.     padding: 10px 20px;
6.     cursor: pointer;
7. }

复制代码

1. document.getElementById('submit-button').addEventListener('click', function() {
2.     alert('Button clicked!');
3. });

复制代码

---

二、 属性选择器（attr）

• 根据元素的属性进行选择。CSS 属性选择器匹配那些具有特定属性或属性值的元素。
  
  
  
  

1. 对 存在xx属性 的元素设置特定样式

• 根据 required 属性，标记必填表单元素。
  

1. input[required] {
2.     border: 2px solid red;
3. }

复制代码

2. 对 存在xx属性且属性值匹配 的元素设置特定样式

• 根据 type 属性为不同类型的输入框应用不同的样式。
  

1. input[type="text"] {
2.     width: 300px;
3. }
5. input[type="submit"] {
6.     background-color: blue;
7.     color: white;
8. }

复制代码

3. 对 存在xx属性且包含属性值xx 的元素设置特定样式

• 这个选择器会选择 href 属性中包含子字符串 “example” 的全部<a>元素。不论 “example” 位于 href 属性的开头、中间照旧结尾，只要出现了这个子字符串，样式都会被应用。
  

1. a[href*="example"] {
2.     font-size: 2em;
3. }

复制代码

4. 对 属性值以指定的值开头的 元素设置特定样式

• 选择href属性以https字符串开头的全部<a>元素。
  

1. a[href^="https"] {
2.     color: red;
3.     font-weight: bold;
4. }

复制代码

5. 对 属性值以指定的值结尾 的元素设置特定样式

• 根据文件链接的后缀名，为不同类型的文件链接设置不同的样式。
  

1. a[href$=".pdf"] {
2.     color: red;
3.     font-weight: bold;
4. }

复制代码

6. 对 属性值是以空格分隔的值之一 的元素设置特定样式

• 这个选择器则选择 href 属性中含有以空格分隔的单词之一为 “example” 的 <a> 元素。它会将 href 属性值拆分为多个单词，并查抄其中是否有 “example” 这个单词。
  

1. a[href~="example"] {
2.     padding: 2px;
3. }

复制代码

• a[href*="example"]：选择 href 属性中包含 “example” 的链接，不管其在字符串中的位置。
  
• a[href~="example"]：选择 href 属性中包含独立单词 “example” 的链接，通常用在属性值为空格分隔的列表中。
  
• 在实际应用中，*= 选择器更为常用，因为它更加灵活，可以匹配部分字符串。而 ~= 选择器则在特定情况下有效，尤其是处置处罚以空格分隔的属性值时。
  

7. 状态控制

• 使用 data-* 属性结合属性选择器实现导航栏在不同装备下的样式调整。
  

1. nav[data-visible="true"] {
2.     display: block;
3. }
5. nav[data-visible="false"] {
6.     display: none;
7. }

复制代码

---

三、伪类选择器（：）

1. :hover

• 用于选择鼠标悬停在元素上时的状态。可以为按钮或链接添加悬停效果，以进步用户体验。
  

1. button:hover {
2.     background-color: #ddd;
3.     cursor: pointer;
4. }

复制代码

• 相关选择器：
  
  
  
  

2. :active

• 用于选择被激活的元素（通常是鼠标点击时）。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。可以为按钮添加点击时的反馈效果。
  

1. button:active {
2.     background-color: #bbb;
3. }

复制代码

3. :focus

• 用于选择获得焦点的元素。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。用于突出显示当前获得输入焦点的表单元素。
  

1. input:focus {
2.     border-color: blue;
3.     outline: none;
4. }

复制代码

4. :nth-child(n)

• 用于选择父元素中第 n 个子元素。n 可以是具体数字，也可以是公式。交替行样式的实现，如表格或列表的奇偶行不同样式。
  

1. li:nth-child(3) {
2.     background-color: #fff;
3. }
5. li:nth-child(n+3) {
6.     background-color: #111;
7. }
9. li:nth-child(odd) {
10.     background-color: #222;
11. }
13. li:nth-child(even) {
14.     background-color: #333;
15. }

复制代码

5. :first-child

• 用于选择父元素中的第一个子元素。为段落或列表中的第一个子元素设置特定样式。
  

1. p:first-child {
2.     font-weight: bold;
3. }

复制代码

6. :last-child

• 用于选择父元素中的最后一个子元素。去掉最后一个元素的底部边距，或为其设置不同的样式。
  

1. p:last-child {
2.     margin-bottom: 0;
3. }

复制代码

7. :not(selector)

• 用于选择不匹配 selector 的全部元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。为一组元素应用统一样式，同时排除某些特定元素。
  

1. input:not([type="submit"]) {
2.     width: 100%;
3. }

复制代码

8. :checked

• 用于选择被选中的复选框或单选按钮。自界说复选框或单选按钮的选中状态样式。
  

1. input[type="checkbox"]:checked {
2.     background-color: green;
3. }

复制代码

9. :disabled

• 用于选择禁用状态的表单元素。为禁用的表单元素设置不同的外观，通常用于提示不可操作。
  

1. input:disabled {
2.     background-color: #e0e0e0;
3.     cursor: not-allowed;
4. }

复制代码

10. :first-of-type

• 用于选择父元素中第一个同类型的子元素。设置特定类型元素中的第一个元素样式。
  

1. p:first-of-type {
2.     color: red;
3. }

复制代码

11. :last-of-type

• 用于选择父元素中最后一个同类型的子元素。为特定类型元素中的最后一个元素设置样式。
  

1. p:last-of-type {
2.     color: blue;
3. }

复制代码

12. :empty

• 用于选择没有任何子元素的元素（包括文本节点）。隐藏空元素，或为其设置占位符样式。
  

1. div:empty {
2.     display: none;
3. }

复制代码

13. :nth-of-type(n)

• 用于选择父元素中第 n 个同类型的子元素。为特定类型的子元素按顺序应用样式，如每个列表项中的第二个元素。
  

1. /* 奇数段 */
2. p:nth-of-type(2n + 1) {
3.   color: red;
4. }
6. p:nth-of-type(odd) {
7.   color: red;
8. }
10. /* 偶数段 */
11. p:nth-of-type(2n) {
12.   color: blue;
13. }
15. p:nth-of-type(even) {
16.   color: blue;
17. }
19. /* 第一段 */
20. p:nth-of-type(2) {
21.   font-weight: bold;
22. }
24. /* 这将匹配第三个段落，因为它匹配的元素是 2n+1 并且具有 fancy 类。
25.    第二个段落具有 fancy 类，但不匹配，因为它不是:nth-of-type(2n+1)。
26. */
27. p.fancy:nth-of-type(2n + 1) {
28.   text-decoration: underline;
29. }

复制代码

场景：
这些伪类选择器在日常的 CSS 开辟中非常实用，可以或许根据元素的状态、位置等特性来准确控制样式，从而提升用户体验和界面设计的灵活性。
MDN-CSS伪类选择器

---

四、 伪元素选择器（：：）

1. ::before

• ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。 伪元素默认是行内元素
  1. p::before {
  2.     content: "Note: ";
  3.     font-weight: bold;
  4. }

  复制代码

2. ::after

• 在 CSS 中，::after 会创建一个伪元素，作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。伪元素默认是行内元素
  1. p::after {
  2.     content: " (end)";
  3.     font-style: italic;
  4. }

  复制代码

3. ::first-line

• 选择某个块级元素的第一行。
  
• ::first-line 只能在块级元素中使用，即 ::first-line 伪元素 只在display属性值为 block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用。
  

1. /* 设置多行文本框 textarea 第一行文本的样式 */
2. textarea::first-line {
3.    font-size: 1.3em;
4.    font-weight: 600;
5.    margin-bottom: 8px;
6. }

复制代码

4. ::first-letter

• 选择某个块级元素的的第一个文字，并且文字所处的行之前没有其他内容。
  

1. /* 设置 p 元素的第一个字符的样式 */
2. p::first-letter {
3.    color: #000;
4.    font-weight: 600;
5. }

复制代码

5. 滚动条

• 在块级容器上设置属性，当块级内容区域超出块级元素范围的时间，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。
  

1. overflow:scroll /* x y 方向都会*/
2. overflow-x:scroll /*只是x方向*/
3. overflow-y:scroll  /*只是y方向*/

复制代码

设置scrollbar的为CSS伪元素，对应上图的数字：

1. ::-webkit-scrollbar              { /* 1 */ }
2. ::-webkit-scrollbar-button       { /* 2 */ }
3. ::-webkit-scrollbar-track        { /* 3 */ }
4. ::-webkit-scrollbar-track-piece  { /* 4 */ }
5. ::-webkit-scrollbar-thumb        { /* 5 */ }
6. ::-webkit-scrollbar-corner       { /* 6 */ }
7. ::-webkit-resizer                { /* 7 */ }
9. ::-webkit-scrollbar                                    //滚动条整体部分
10. ::-webkit-scrollbar-button                   //滚动条两端的按钮
11. ::-webkit-scrollbar-track                   // 外层轨道
12. ::-webkit-scrollbar-track-piece            //内层轨道，滚动条中间部分（除去）
13. ::-webkit-scrollbar-thumb                         //滚动条里面可以拖动的那个
14. ::-webkit-scrollbar-corner                   //边角
15. ::-webkit-resizer                                   //定义右下角拖动块的样式

复制代码

---

五、 组合选择器

1. 后代选择器（ancestor descendant）

• 根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素。 后代包括:儿子、孙子、重孙子…
  1. div p {
  2.     color: blue;
  3. }

  复制代码

2. 子选择器（parent > child）

• 根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素。 子代只包括:儿子。
  1. ul > li {
  2.     list-style: none;
  3. }

  复制代码

3. 相邻兄弟选择器（prev + next）

• 相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。
  
  1. h1 + p {
  2. margin-top: 0;
  3. }

  复制代码
  1. <p>Hello word!</p>
  2. <p>Hello word!</p>
  3. <h1>Hello word!</h1>
  4. <p>Hello word!</p>
  5. <p>Hello word!</p>
  6. <p>Hello word!</p>
  7. <p>Hello word!</p>

  复制代码

4. 通用兄弟选择器（prev ~ siblings）

• 作用是查找某一个指定元素的背面的全部兄弟结点。
  
  1. h1 ~ p {
  2.     color: grey;
  3. }

  复制代码
  1. <p>1</p>
  2. <h1>2</h1>
  3. <p>3</p>
  4. <p>4</p>
  5. <p>5</p>

  复制代码

5. 并集选择器

• 同时选择多组标签，设置相同的样式。 并集选择器中的每组选择器之间通过，分隔。并集选择器中的每组选择器可以是根本选择器或者复合选择器。并集选择器中的每组选择器通常一行写一个，进步代码的可读性。
  

1. /* p div span h1 文字颜色是红色 */
2. /* 选择器1, 选择器2 {} */
3. p,
4. div,
5. span,
6. h1 {
7.   color: red;
8. }

复制代码

6. 交集选择器

• 选中页面中同时满足多个选择器的标签。既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。 交集选择器中的选择器之间是紧挨着的，没有东西分隔。 交集选择器中假如有标签选择器，标签选择器必须写在最前面
  

1. /*必须是p标签,而且添加了box类 */
2. p.box {
3.   color: red;
4. }
5. /* .box是类选择器 */

复制代码

7. 子元素选择器（>）

1. div > p {
2.     color: purple;
3. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4