Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > css引入方式与上下文选择器 伪类结构相关
Blogger Information
Blog 47
fans 3
comment 0
visits 38502
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css引入方式与上下文选择器 伪类结构相关
吳
Original
581 people have browsed it

css引入方式与上下文选择器 伪类结构相关

1.css三种引入方式

CSS引入三种方式:内部样式表、外部样式表、行内样式
内部样式：仅对当前页面的元素有效，使用style标签
外部样式：适用于所有引用了这个css样式表的html文档，使用link标签
行内样式：仅适用于当前页面中的指定的元素，使用style属性

内部样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css第一种引入方式：内部样式表</title>   
  7.     <style>
  8.         h1 {
  9.             color: blue;
  10.             border: 1px solid red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1>PHP中文网</h1>
  16. </body>
  17. </html>

演示截图
内部样式

外部样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css外部样式</title>
  7.     <link rel="stylesheet" href="css/demo1.css">
  8. </head>
  9. <body>
  10.     <h1>php中文网</h1>
  11. </body>
  12. </html>
  • 演示截图
行内样式
  1.    <h1 style="color: violet;">php中文网</h1>
  • 演示截图

2. css选择器

css选择器分为三大类：

1.简单选择器
选择器 描述 示例
标签选择器 根据元素标签名称进行匹配 li {...}
类选择器 根据元素的class属性进行匹配 .a {...}
ID选择器 根据元素的ID属性进行匹配 #a {...}
标签选择器案例
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>css简单选择器</title>
  6.     <style>
  7.         /* 标签选择器，返回一组 方法：li {...}*/
  8.         li{
  9.             color: violet;
  10.         }
  12.         /* 类选择器，返回一组 方法：.a {...} */
  13.         .a {
  14.             color: red;
  15.             border: 1px solid black;
  16.         }
  18.         /* id选择器，返回一个 方法：#b {...} */
  19.         #b {
  20.             color: blue;
  21.             border: 1px solid yellow;
  22.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <ul>
  28.         <li class="a">test1</li>
  29.         <li id="b">test1</li>
  30.         <li class="a">test1</li>
  31.         <li id="b">test1</li>
  32.         <li>test1</li>
  33.     </ul>
  34. </body>
  35. </html>

演示截图

3.上下文选择器

1.后代选择器：ul li中间加空格，选择当前元素的所有层级
2.子选择器：body>ul>li选择当前元素的父层级和子层级
3.同级相邻选择器：.a + li当前元素相邻的第一个兄弟元素
4.同级所有选择器：.a ~ li当前元素相邻的后面所有元素

实战案例
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>上下文选择器</title>
  5.     <style>
  6.         /* 后代选择器 */
  7.         ul li {
  8.             background-color: violet;
  9.         }
  10.         /* 子元素选择器 */
  11.         body>ul>li {
  12.             background-color: yellow;
  13.         }
  14.         /* 同级相邻选择第一个兄弟元素 */
  15.         .a + li {
  16.             background-color: green;
  17.         }
  18.         /* 同级相邻选择后面所有兄弟元素 */
  19.         .a ~ li {
  20.             background-color: red;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <ul>
  26.         <li>test1</li>
  27.         <li class="a">test1</li>
  28.         <li>test1</li>
  29.         <li>test1
  30.             <ul>
  31.                 <li>tset2</li>
  32.                 <li>tset2</li>
  33.                 <li>tset2</li>
  34.             </ul>
  35.         </li>
  36.         <li>test1</li>
  37.     </ul>
  38. </body>
  39. </html>
演示截图

4.伪类选择器
结构伪类
选择器 描述 示例
nth-of-type(an+b) 匹配任意位置的子元素;<br>n全部n+3偏移量往后的所有元素;<br>2n或者even选择所有索引为偶数的元素;<br>2n-1或2n+1或者odd选择所有索引为奇数的元素 ul li:nth-of-type(3){...}
:nth-last-of-type{an+b} 反向获取任意位置的子元素 ul li:nth-last-of-type(3){...}
:first-of-type 选择第一个子元素 ul li:first-of-type
:last-of-type 选择最后一个子元素 ul li:last-of-type
:only-of-type 选择父元素下唯一的子元素 ul li:only-of-type
  • 匹配任意位置的子元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.         /* 匹配任意位置的子元素 */
  8.         ul li:nth-of-type(5){
  9.             background-color: yellow;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截图

  • 选择为偶数的元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.         /* 选择所有为偶数的元素 */
  8.         ul li:nth-of-type(even){
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

  • 选择所有为奇数的元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.         /* 选择所有为奇数的元素 */
  8.         ul li:nth-of-type(odd){
  9.             background-color: yellow;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截图

  • 快速匹配第一个元素
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>伪类选择器</title>
  5.     <style>
  6.         /* 快速匹配第一个元素 */
  7.         ul li:first-of-type{
  8.             background-color: violet;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>tset1</li>
  15.         <li>tset2</li>
  16.         <li>tset3</li>
  17.         <li>tset4</li>
  18.         <li>tset5</li>
  19.         <li>tset6</li>
  20.         <li>tset7</li>
  21.         <li>tset8</li>
  22.         <li>tset9</li>
  23.         <li>tset10</li>
  24.     </ul>
  25. </body>
  26. </html>

演示截图

  • 快速匹配倒数第一个元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.         /* 快速匹配倒数第一个元素 */
  8.         ul li:last-of-type{
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  26. </body>
  27. </html>

演示截图

  • 选择父元素下唯一的子元素
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器</title>
  6.     <style>
  7.         /* 选择父元素下唯一的子元素 */
  8.         ul li:only-of-type{
  9.             background-color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>tset1</li>
  16.         <li>tset2</li>
  17.         <li>tset3</li>
  18.         <li>tset4</li>
  19.         <li>tset5</li>
  20.         <li>tset6</li>
  21.         <li>tset7</li>
  22.         <li>tset8</li>
  23.         <li>tset9</li>
  24.         <li>tset10</li>
  25.     </ul>
  27.     <ul>
  28.         <li>test1</li>
  29.     </ul>
  30. </body>
  31. </html>

演示截图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post