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.盒子模型













相关推荐
江城开朗的豌豆2 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er11 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆16 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山24 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端