css基础学习总结(一)

文章目录

  • [一. 选择器](#一. 选择器)
    • [1. 标签选择器](#1. 标签选择器)
    • [2. 类选择器](#2. 类选择器)
    • [3. ID选择器](#3. ID选择器)
    • [4. 分组选择器](#4. 分组选择器)
    • [5. 派生与子元素选择器](#5. 派生与子元素选择器)
    • [6. 属性选择器](#6. 属性选择器)
    • [7. 伪类选择器](#7. 伪类选择器)
    • [8. 伪对象选择器](#8. 伪对象选择器)
    • [9. 选择器的优先级别](#9. 选择器的优先级别)
      • [css优先级 的 6大分类](#css优先级 的 6大分类)

一. 选择器

1. 标签选择器

选择器 例子 描述
element p/div/span 选择所有含有指定标签的元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           color: red;
       }
       span {
           color: blue;
       }
       p {
           color: green;
       }
   </style>
</head>
<body>
   <div>Hello</div>
   <span>World</span>
   <p>你好</p>
</body>
</html>

2. 类选择器

选择器 例子 描述
.class .info 选择 class="info" 的所有元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .info{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="info">Hello</div>
    <div class="a">World</div>
    <div class="b">你好</div>
</body>
</html>

3. ID选择器

选择器 例子 描述
#id #Oh 选择 id="Oh" 的元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       #Oh{
           color: red;
       }
   </style>
</head>
<body>
   <div class="info" id="o1">Hello</div>
   <div class="a" id="Oh">World</div>
   <div class="b" id="o2">你好</div>
</body>
</html>

4. 分组选择器

选择器 例子 描述
element,element div, p 选择所有div元素和所有p元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div,p {
           color: red;
       }
   </style>
</head>
<body>
   <div class="info" id="o1">Hello</div>
   <p class="a" id="Oh">World</p>
   <span class="b" id="o2">你好</span>
</body>
</html>

5. 派生与子元素选择器

选择器 例子 描述
element element.class ul li.name 选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       ul li.name {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <li>World</li>
       <li class="name">你好</li>
   </ul>
</body>
</html>
选择器 例子 描述
element>element ul > li 选择父元素是 ul 的所有 li 元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       ul > li {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <ol>
           <li>World</li>
       </ol>
       <li class="name">你好</li>
   </ul>
</body>
</html>

6. 属性选择器

选择器 例子 描述
[attribute] [target] 选择带有 target 属性的所有元素
css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       [target] {
           color: red;
       }
   </style>
</head>
<body>
   <ul>
       <li>Hello</li>
       <ol>
           <li target="世界">World</li>
       </ol>
       <li class="name">你好</li>
   </ul>
</body>
</html>

7. 伪类选择器

选择器 例子 描述
:active a:active 选择活动链接。
:checked input:checked 选择每个被选中的 input 元素。
:default input:default 选择默认的 input 元素。
:disabled input:disabled 选择每个被禁用的 input 元素。
:empty p:empty 选择没有子元素的每个 p 元素(包括文本节点)。
:enabled input:enabled 选择每个启用的 input 元素。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 p 元素。
:focus input:focus 选择获得焦点的 input 元素。
:fullscreen :fullscreen 选择处于全屏模式的元素。
:hover a:hover 选择鼠标指针位于其上的链接。
:in-range input:in-range 选择其值在指定范围内的 input 元素。
:indeterminate input:indeterminate 选择处于不确定状态的 input 元素。
:invalid input:invalid 选择具有无效值的所有 input 元素。
:lang(language) p:lang(it) 选择 lang 属性等于 "it"(意大利)的每个 p 元素。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素。
:visited a:visited 选择所有已访问的链接。
:first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。

8. 伪对象选择器

选择器 例子 描述
::after p::after 在每个p的内容之后插入内容。
::before p::before 在每个 p 的内容之前插入内容。
::first-letter p::first-letter 选择每个 p 元素的首字母。
::first-line p::first-line 选择每个 p 元素的首行。

9. 选择器的优先级别

行内样式(style="...")>ID 选择器(#box{...})>类选择器(.con{...})>标签选择器(dic{...})>通用选择器(*{...})

css优先级 的 6大分类

通常可以将css的优先级由高到低分为6组:

  1. 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

  2. 第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。

  3. 第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3pxl}

  4. 第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

  5. 第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}

  6. 第六优先级:通配选择器,如*{marigin:6px;}

相关推荐
limengshi13839213 分钟前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
Nan_Shu_61425 分钟前
Web前端面试题(2)
前端
知识分享小能手32 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126911 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
周周记笔记2 小时前
学习笔记:第一个Python程序
笔记·学习
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
优雅鹅2 小时前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
..过云雨2 小时前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习