search

博客列表 >css引入方式与上下文选择器 伪类结构相关

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

吳
吳 原创
2020年12月17日 02:20:58576浏览

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>

演示截图

上一条：iframe仿写网站小后台页面|css优先级下一条：1216-选择器提权-字体图标-盒模型常用属性缩写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多