CSS常用选择器和CSS文件三种引入方式

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>
    <link rel="stylesheet" href="style.css" />
    <!-- <style>
      @import url(style.css);
    </style> -->
  </head>
  <body>
    <p class="on">CSS三种引入方式</p>
    <ul>
      <li>link引入</li>
      <li>style标签用@import引入</li>
      <li>用@import引入到一个CSS文件中,再用link引入单个文件</li>
    </ul>
  </body>
</html>

link 引用的 css 文件

@import url(style1.css);
p {
  color: aqua;
  font-size: 1.5em;
}

import 引用的 css 文件

ul {
  color: rgb(41, 61, 21);
}

选择器演示

ID class 标签属性后代选择子元素选择相邻同级选择相邻后同级所有

<!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>
      /* 标签,类,ID,属性选择器 */
      p {
        color: blueviolet;
      }
      .sp {
        color: brown;
      }
      #divID {
        color: coral;
      }
      div[name="div-name"] {
        font-size: 20px;
        font-weight: 800;
      }
      /* 上下文选择器 */
      /* 后代写法 */
      ul li {
        font-weight: 800;
      }
      /* 子元素写法 */
      ul > p {
        color: chartreuse;
        font-size: 18px;
      }
      /* 同级相邻写法 */
      .one + li {
        color: darkred;
      }
      /* 同级后面所有 */
      .tow ~ li {
        color: red;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <!-- 标签选择 -->
    <p>演示标签选择器</p>
    <!-- 类选择 -->
    <span class="sp">演示class选择器</span>
    <!-- ID选择 -->
    <div id="divID">演示ID选择器</div>
    <!-- 属性选择 -->
    <div name="div-name">演示属性选择器</div>
    <!-- 上下文选择 -->
    <p>上下文选择器有4种:1.后代选择 2.子元素选择 3.同级相邻 4.同级所有</p>
    <ul>
      <p>UL的子元素</p>
      <li class="one">首页</li>
      <li class="tow">资讯</li>
      <li>动态</li>
      <li>娱乐</li>
      <li>论坛</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>CSS伪类选择演示</title>
    <style>
      /* 匹配任意位置元素 */
      /* ul li:nth-of-type(an+b)  a是启点,从0开始,n是一个循环数从0开始++, b是偏移量, 三者关系是a*n+b,一直循环找到所有 */
      ul li:nth-of-type(2n) {
        color: red;
      }
      /* 反向获取 */
      ul li:nth-last-of-type(-n + 3) {
        font-weight: 800;
        color: royalblue;
      }
      /* 几个语法糖 */
      /* 偶数 */
      ul li:nth-of-type(even) {
        color: royalblue;
      }
      /* 奇数 */
      ul li:nth-of-type(odd) {
        color: saddlebrown;
      }
      /* 第一个 */
      ul li:first-of-type {
        color: seagreen;
      }
      /* 最后一个 */
      ul li:last-of-type {
        color: violet;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li>
      <li>项目四</li>
      <li>项目五</li>
      <li>项目六</li>
    </ul>
  </body>
</html>

css 三种引入方式

link 引用的 css 文件

import 引用的 css 文件

选择器演示

相关文章