CSS引入到HTML方式和CSS伪类选择器 - html

首页 > 博客列表 > CSS引入到HTML方式和CSS伪类选择器

博主信息

博文 9

粉丝 0

访问量 11984

专题推荐

更多>

CSS引入到HTML的三种方式

1.直接通过<style>标签引入

<style>
        h2 {
            color: green;
        }
</style>

2.通过<link>标签引入外部共享样式表

<link rel="stylesheet" href="css/style.css">

3.通过style属性设置样式

<h2 style="color:bule">蓝色钻石一样的颜色</h2>

CSS选择器

CSS选择器- 标签类和ID

比较简单的选择器包括标签类和ID

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器:标签 类和ID</title>
    <style>
      li {
        background-color: aqua;
      }
      .hehe {
        background-color: greenyellow;
      }
      #four {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li class="hehe">item2</li>
      <li>item3</li>
      <li id="four">item4</li>
      <li>item5</li>
    </ul>
  </body>
</html>

CSS选择器-上下文选择器

空格: 所有层级, >: 仅父子层级, +: 后面相邻一个兄弟, ~: 后面相邻所有兄弟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器-上下文选择器</title>
    <style>
      /* 空格: 所有层级 */
      ul li {
        background-color: blueviolet;
      }
      /* >: 仅父子层级 */
      body > ul > li {
        background-color: burlywood;
      }
      /* +: 后面相邻一个兄弟 */
      .third + li {
        background-color: chartreuse;
      }
      /* ~: 后面相邻所有兄弟 */
      .third ~ li {
        background-color: darkcyan;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li class="third">列表3</li>
      <li>列表4</li>
      <ul>
        <li>列表4-1</li>
        <li>列表4-2</li>
        <li>列表4-3</li>
      </ul>
      <li>列表5</li>
    </ul>
  </body>
</html>

css选择器-伪类选择器

主要语法： nth-of-type()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css选择器-伪类</title>
    <style>
      /* 匹配第5个 正序  */
      ul li:nth-of-type(5) {
        background-color: aqua;
      }
      /* 倒数第一个 倒序 */
      ul li:nth-last-of-type(1) {
        background-color: brown;
      }
      /* 偶数行 even或者2n  */
      ul li:nth-of-type(even) {
        background-color: coral;
      }
      /* 奇数行 odd或者2n-1  */
      ul li:nth-of-type(odd) {
        background-color: cornflowerblue;
      }
      /* 带偏移量 移动8  an+b  */
      ul li:nth-of-type(n + 8) {
        background-color: darkorange;
      }
      /* 第一个  */
      ul li:first-of-type {
        background-color: darkseagreen;
      }
      /* 最后一个  */
      ul li:last-of-type {
        background-color: darkseagreen;
      }
      /* 只对含有一个元素的有效  */
      ul li:only-of-type {
        background-color: darkgreen;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
      <li>列表4</li>
      <li>列表5</li>
      <li>列表6</li>
      <li>列表7</li>
      <li>列表8</li>
      <li>列表9</li>
      <li>列表10</li>
    </ul>
    <ul>
      <li>只有这个一个li</li>
    </ul>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

html基本标签

2020-12-12 15:43:22

CSS引入到HTML的三种方式

CSS选择器

CSS选择器- 标签 类和ID

CSS选择器-上下文选择器

css选择器-伪类选择器

CSS选择器- 标签类和ID