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

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

博主信息

博文 23

粉丝 0

访问量 29838

专题推荐

更多>

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>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2020-12-12 20:32:03