CSS引入、标签选择器的实例应用 - PHP学习

Home > List of blog posts > CSS引入、标签选择器的实例应用

Blogger Information

Blog 23

fans 0

comment 3

visits 23615

Special Recommendation

More>

Related recommendations

CSS 样式引入方式

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

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

如下代码 :

<html>
  <head>
    <meta charset="UTF-8" />
    <title>引入CSS样式的几种方式</title>
    <!--使用link标签外部引入-->
    <link rel="stylesheet" href="style.css" />
    <style>
      /* 内部样式 */
      h1 {
        color: blue;
      }
      /* 外部引入  */
      @import url(style.css);
    </style>
  </head>
  <body>
    <h1>引入CSS样式的几种方式</h1>
    <!--style属性 -->
    <h1 style="color:red">style属性样式</h1>
  </body>
</html>

选择器

1.标签选择器

返回的是一组元素

li {
  background-color: violet;
  color: darkred;
}

2.类选择器

返回一组，选取一类具有共同特征的

.on {
  background-color: wheat;
}

3.ID 选择器

浏览器不检查 ID 的唯一性，必须由开发者自行保证

#foo {
  background-color: blue;
}

4.上下文选择器

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

1.后代选择器 :所有层级

ul li {
  background-color: red;
}

2.子元素选择器 :仅父子层级

body > ul > li {
  background-color: blue;
}

3.同级相邻选择器：仅选择与之相邻的第一个兄弟元素

.start + li {
  background-color: tomato;
}

4.同级所有选择器：选中与之相邻的所有兄弟元素

.start1 ~ li {
  background-color: rgb(255, 230, 0);
}

HTML

<html>
  <head>
    <meta charset="UTF-8" />
    <title>上下文选择器</title>
    <style>
      ul li {
        background-color: red;
      }
      body > ul > li {
        background-color: blue;
      }
      .start + li {
        background-color: tomato;
      }
      .start1 ~ li {
        background-color: rgb(255, 230, 0);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
      <li class="start">上下文选择器</li>
      <li>上下文选择器</li>
      <li>
        上下文选择器
        <ul>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
        </ul>
      </li>
      <li>上下文选择器</li>
      <li class="start1">上下文选择器</li>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
    </ul>
  </body>
</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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结构伪类</title>
    <style>
      /* 选中第三个li元素
      .start li:nth-of-type(0n + 3) {
        background-color: salmon;
      }
      */
      /* 因为0*0等于0所以 0n就没有意义可以简化为： */
      .start li:nth-of-type(3) {
        background-color: salmon;
      }
      /*全部选中
      如果直接全选这样就没有意义，可直接使用标签选择器。但是带上偏移量就不同了
      .start1 li:nth-of-type(1n) {
        background-color: sandybrown;
      }
      */
      /*从第4个开始全部选中
      .start1 li:nth-of-type(1n + 4) {
        background-color: seagreen;
      }
      1*1还是等于1可简化如下写法：
      */
      .start1 li:nth-of-type(n + 4) {
        background-color: seagreen;
      }
      /* 选中最后3个
      .start1 li:nth-of-type(n + 8) {
        background-color: skyblue;
      }
      考虑到有可能元素过多，可以使用反向获取 ：
        */
      .start1 li:nth-last-of-type(-n + 3) {
        background-color: rgb(255, 0, 0);
      }
      /*选中倒数第2个*/
      .start1 li:nth-last-of-type(2) {
        background-color: rgb(0, 174, 255);
      }
      /*选中所有索引为偶数的元素 */
      /*
      .start2 li:nth-of-type(2n) {
        background-color: yellowgreen;
      }
      */
      /*选中所有索引为偶数的元素 */
      /*
      .start2 li:nth-of-type(2n + 1) {
        background-color: rgb(223, 51, 151);
      }
      */
      /*这里还可以用even odd */
      .start2 li:nth-of-type(even) {
        /*偶数*/
        background-color: yellowgreen;
      }
      .start2 li:nth-of-type(odd) {
        /*奇数*/
        background-color: rgb(223, 51, 151);
      }
    </style>
  </head>
  <body>
    <ul class="start1">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
    <ul class="start2">
      <li>item101</li>
      <li>item102</li>
      <li>item103</li>
      <li>item104</li>
      <li>item105</li>
      <li>item106</li>
      <li>item107</li>
      <li>item108</li>
      <li>item109</li>
      <li>item1010</li>
    </ul>
  </body>
</html>

语法糖

选择第一个子元素
first-of-type

ul li:first-of-type {
  background-color: blue;
}

选中最后一个子元素
last-of-type

ul li:last-of-type {
  background-color: red;
}

如果只想匹配父元素中唯一子元素，使用 only-of-type 可快速实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>only-of-type</title>
    <style>
      /*选中最后一个ul里的所有子元素 */
      ul:last-of-type li {
        background-color: yellowgreen;
      }
      /*也可以用only-of-type */
      ul li:only-of-type {
        background-color: rgb(205, 50, 115);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>item11</li>
      <li>item12</li>
      <li>item13</li>
      <li>item14</li>
      <li>item15</li>
    </ul>
    <ul>
      <li>item21</li>
      <li>item22</li>
      <li>item23</li>
      <li>item24</li>
      <li>item25</li>
    </ul>
  </body>
</html>

课表颜色区别实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用伪类选择器给每行表格添加区别颜色</title>
    <style>
      tr:nth-of-type(even) {
        background-color: rgb(236, 241, 226);
      }
      tr:nth-last-of-type(3) td:first-of-type {
        background-color: rgb(255, 255, 255);
      }
    </style>
  </head>
  <body>
    <table border="1" height="400" width="500" cellspacing="0" cellpadding="10">
      <caption>
        XX小学冬季课程表
      </caption>
      <thead>
        <tr>
          <th colspan="2">X</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>语文</td>
          <td>生物</td>
          <td>英语</td>
          <td>音乐</td>
          <td>美术</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>数学</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>英语</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>体育</td>
          <td>体育</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr align="center">
          <td colspan="7">中午休息</td>
        </tr>
        <tr>
          <td rowspan="3">下午</td>
          <td>思想品德</td>
          <td>语文</td>
          <td>英语</td>
          <td>音乐</td>
          <td>美术</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>美术</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>课外活动</td>
          <td colspan="5">自行活动(自愿参加)</td>
        </tr>
      </tbody>
    </table>
  </body>
</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

HTML中元素、标签、属性之间关联与区别

2020-12-12 20:32:03