CSS 基础知识-01

CSS 基础知识

1.CSS概述

2. CSS引入方式

3. 选择器





4.文字控制属性













5. 复合选择器



6. CSS 特性





7.背景属性







8.显示模式


9.选择器



py 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类选择器-基本使用</title>
  <style>
    /* 第一个 */
    /* li:first-child {
      background-color: green;
    } */

    /* 最后一个 */
    /* li:last-child {
      background-color: green;
    } */

    /* 任意个 */
    /* li:nth-child(3) {
      background-color: green;
    } */

    li:nth-child(1) {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
  </ul>
</body>
</html>
py 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类选择器-公式用法</title>
  <style>
    /* 偶数 */
    /* li:nth-child(2n) {
      background-color: green;
    } */

    /* 奇数 */
    /* li:nth-child(2n+1) {
      background-color: green;
    } */

    /* 倍数 */
    /* li:nth-child(5n) {
      background-color: green;
    } */

    /* n 从0开始 */
    /* 第5个以后的标签 */
    /* li:nth-child(n+5) {
      background-color: green;
    } */

    /* 第5个以前的标签 */
    li:nth-child(-n+5) {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
    <li>li 9</li>
    <li>li 10</li>
  </ul>
</body>
</html>

10.盒子模型













相关推荐
西陵11 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld12 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷13 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军13 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离13 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw14 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip14 小时前
http缓存
前端·javascript
我不只是切图仔14 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在15 小时前
macOS是开发的终极进化版吗?
前端·后端