简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS引入、标签选择器的实例应用

CSS引入、标签选择器的实例应用

a.
a.原创
2020年12月16日 00:35:51785浏览

CSS 样式引入方式

任何元素如果想引入到 HTML 文档中，必须要使用一个适当的标签，CSS 也不例外

方式 说明
1.内部样式 仅对当前文档的元素有效，使用的是 style 标签来定义的
2.外部样式/公共样式 适用于所有引入了 CSS 样式表的 HTML 文档，使用的是 link 标签
3.行内样式 仅适用于当前页面中的指定的，特定的元素。使用的是 style 属性

如下代码 :

  1. <html>
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <title>引入CSS样式的几种方式</title>
  5.     <!--使用link标签外部引入-->
  6.     <link rel="stylesheet" href="style.css" />
  8.     <style>
  9.       /* 内部样式 */
  11.       h1 {
  12.         color: blue;
  13.       }
  14.       /* 外部引入  */
  15.       @import url(style.css);
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <h1>引入CSS样式的几种方式</h1>
  20.     <!--style属性 -->
  21.     <h1 style="color:red">style属性样式</h1>
  22.   </body>
  23. </html>

选择器

1.标签选择器

  • 返回的是一组元素
  1. li {
  2.   background-color: violet;
  3.   color: darkred;
  4. }

2.类选择器

  • 返回一组，选取一类具有共同特征的
  1. .on {
  2.   background-color: wheat;
  3. }

3.ID 选择器

  • 浏览器不检查 ID 的唯一性，必须由开发者自行保证
  1. #foo {
  2.   background-color: blue;
  3. }

4.上下文选择器

因为 HTML 是一个结构化的文档：第一个元素在文档中有确切的位置,所以根据元素的上下文环境来选择是完全没有问题的

1.后代选择器 :所有层级
  1. ul li {
  2.   background-color: red;
  3. }
2.子元素选择器 :仅父子层级
  1. body > ul > li {
  2.   background-color: blue;
  3. }
3.同级相邻选择器：仅选择与之相邻的第一个兄弟元素
  1. .start + li {
  2.   background-color: tomato;
  3. }
4.同级所有选择器：选中与之相邻的所有兄弟元素
  1. .start1 ~ li {
  2.   background-color: rgb(255, 230, 0);
  3. }

HTML

  1. <html>
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <title>上下文选择器</title>
  5.     <style>
  6.       ul li {
  7.         background-color: red;
  8.       }
  10.       body > ul > li {
  11.         background-color: blue;
  12.       }
  14.       .start + li {
  15.         background-color: tomato;
  16.       }
  17.       .start1 ~ li {
  18.         background-color: rgb(255, 230, 0);
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <ul>
  24.       <li>上下文选择器</li>
  25.       <li>上下文选择器</li>
  26.       <li class="start">上下文选择器</li>
  27.       <li>上下文选择器</li>
  28.       <li>
  29.         上下文选择器
  30.         <ul>
  31.           <li>adfasdf</li>
  32.           <li>adfasdf</li>
  33.           <li>adfasdf</li>
  34.           <li>adfasdf</li>
  35.           <li>adfasdf</li>
  36.         </ul>
  37.       </li>
  38.       <li>上下文选择器</li>
  39.       <li class="start1">上下文选择器</li>
  40.       <li>上下文选择器</li>
  41.       <li>上下文选择器</li>
  42.       <li>上下文选择器</li>
  43.     </ul>
  44.   </body>
  45. </html>

重点
1.空格所有层级
2.>:父子级
3.+：相邻兄弟
4.~：所有相邻兄弟

5.伪类选择器

结构伪类

1.匹配任意位置的元素：nth-of-type(an+b);an+b: an 起点，b 是偏移量，n = (0,1,2,3,4….)

2.反向获取任意位置的元素：nth-last-of-type(an+b)

3.只选择索引为偶数的子元素：nth-of-type(2n)，nth-of-type(even);只选择索引为奇数的子元素：nth-of-type(2n-1)，nth-of-type(2n+1),nth-of-type(odd)

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>结构伪类</title>
  7.     <style>
  8.       /* 选中第三个li元素
  9.       .start li:nth-of-type(0n + 3) {
  10.         background-color: salmon;
  11.       }
  12.       */
  13.       /* 因为0*0等于0所以 0n就没有意义可以简化为： */
  14.       .start li:nth-of-type(3) {
  15.         background-color: salmon;
  16.       }
  18.       /*全部选中
  19.       如果直接全选这样就没有意义，可直接使用标签选择器。但是带上偏移量就不同了
  21.       .start1 li:nth-of-type(1n) {
  22.         background-color: sandybrown;
  23.       }
  24.       */
  25.       /*从第4个开始全部选中
  26.       .start1 li:nth-of-type(1n + 4) {
  27.         background-color: seagreen;
  28.       }
  29.       1*1还是等于1可简化如下写法：
  30.       */
  31.       .start1 li:nth-of-type(n + 4) {
  32.         background-color: seagreen;
  33.       }
  35.       /* 选中最后3个
  36.       .start1 li:nth-of-type(n + 8) {
  37.         background-color: skyblue;
  38.       }
  39.       考虑到有可能元素过多，可以使用反向获取 ：
  40.         */
  41.       .start1 li:nth-last-of-type(-n + 3) {
  42.         background-color: rgb(255, 0, 0);
  43.       }
  45.       /*选中倒数第2个*/
  46.       .start1 li:nth-last-of-type(2) {
  47.         background-color: rgb(0, 174, 255);
  48.       }
  49.       /*选中所有索引为偶数的元素 */
  50.       /*
  51.       .start2 li:nth-of-type(2n) {
  52.         background-color: yellowgreen;
  53.       }
  54.       */
  55.       /*选中所有索引为偶数的元素 */
  56.       /*
  57.       .start2 li:nth-of-type(2n + 1) {
  58.         background-color: rgb(223, 51, 151);
  59.       }
  60.       */
  61.       /*这里还可以用even odd */
  62.       .start2 li:nth-of-type(even) {
  63.         /*偶数*/
  64.         background-color: yellowgreen;
  65.       }
  66.       .start2 li:nth-of-type(odd) {
  67.         /*奇数*/
  68.         background-color: rgb(223, 51, 151);
  69.       }
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <ul class="start1">
  74.       <li>item1</li>
  75.       <li>item2</li>
  76.       <li>item3</li>
  77.       <li>item4</li>
  78.       <li>item5</li>
  79.       <li>item6</li>
  80.       <li>item7</li>
  81.       <li>item8</li>
  82.       <li>item9</li>
  83.       <li>item10</li>
  84.     </ul>
  85.     <ul class="start2">
  86.       <li>item101</li>
  87.       <li>item102</li>
  88.       <li>item103</li>
  89.       <li>item104</li>
  90.       <li>item105</li>
  91.       <li>item106</li>
  92.       <li>item107</li>
  93.       <li>item108</li>
  94.       <li>item109</li>
  95.       <li>item1010</li>
  96.     </ul>
  97.   </body>
  98. </html>

语法糖

  • 选择第一个子元素
    first-of-type
  1. ul li:first-of-type {
  2.   background-color: blue;
  3. }
  • 选中最后一个子元素
    last-of-type
  1. ul li:last-of-type {
  2.   background-color: red;
  3. }
  • 如果只想匹配父元素中唯一子元素，使用 only-of-type 可快速实现
  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>only-of-type</title>
  7.     <style>
  8.       /*选中最后一个ul里的所有子元素 */
  9.       ul:last-of-type li {
  10.         background-color: yellowgreen;
  11.       }
  12.       /*也可以用only-of-type */
  13.       ul li:only-of-type {
  14.         background-color: rgb(205, 50, 115);
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <ul>
  20.       <li>item11</li>
  21.       <li>item12</li>
  22.       <li>item13</li>
  23.       <li>item14</li>
  24.       <li>item15</li>
  25.     </ul>
  26.     <ul>
  27.       <li>item21</li>
  28.       <li>item22</li>
  29.       <li>item23</li>
  30.       <li>item24</li>
  31.       <li>item25</li>
  32.     </ul>
  33.   </body>
  34. </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>使用伪类选择器给每行表格添加区别颜色</title>
  7.     <style>
  8.       tr:nth-of-type(even) {
  9.         background-color: rgb(236, 241, 226);
  10.       }
  11.       tr:nth-last-of-type(3) td:first-of-type {
  12.         background-color: rgb(255, 255, 255);
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <table border="1" height="400" width="500" cellspacing="0" cellpadding="10">
  18.       <caption>
  19.         XX小学冬季课程表
  20.       </caption>
  21.       <thead>
  22.         <tr>
  23.           <th colspan="2">X</th>
  25.           <th>周一</th>
  26.           <th>周二</th>
  27.           <th>周三</th>
  28.           <th>周四</th>
  29.           <th>周五</th>
  30.         </tr>
  31.       </thead>
  32.       <tbody>
  33.         <tr>
  34.           <td rowspan="4">上午</td>
  35.           <td>语文</td>
  36.           <td>生物</td>
  37.           <td>英语</td>
  38.           <td>音乐</td>
  39.           <td>美术</td>
  40.           <td>语文</td>
  41.         </tr>
  42.         <tr>
  43.           <td>数学</td>
  44.           <td>数学</td>
  45.           <td>语文</td>
  46.           <td>语文</td>
  47.           <td>语文</td>
  48.           <td>语文</td>
  49.         </tr>
  50.         <tr>
  51.           <td>英语</td>
  52.           <td>英语</td>
  53.           <td>语文</td>
  54.           <td>语文</td>
  55.           <td>语文</td>
  56.           <td>语文</td>
  57.         </tr>
  58.         <tr>
  59.           <td>体育</td>
  60.           <td>体育</td>
  61.           <td>语文</td>
  62.           <td>语文</td>
  63.           <td>语文</td>
  64.           <td>语文</td>
  65.         </tr>
  66.         <tr align="center">
  67.           <td colspan="7">中午休息</td>
  68.         </tr>
  69.         <tr>
  70.           <td rowspan="3">下午</td>
  71.           <td>思想品德</td>
  72.           <td>语文</td>
  73.           <td>英语</td>
  74.           <td>音乐</td>
  75.           <td>美术</td>
  76.           <td>语文</td>
  77.         </tr>
  78.         <tr>
  79.           <td>美术</td>
  80.           <td>数学</td>
  81.           <td>语文</td>
  82.           <td>语文</td>
  83.           <td>语文</td>
  84.           <td>语文</td>
  85.         </tr>
  86.         <tr>
  87.           <td>课外活动</td>
  88.           <td colspan="5">自行活动(自愿参加)</td>
  89.         </tr>
  90.       </tbody>
  91.     </table>
  92.   </body>
  93. </html>
上一条：css的基本语法 和样式引用 标签选择器 上下文选择器 以及结构伪类选择器下一条：12月16日学习笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多