CSS学习（1）-选择器

一、基本选择器

1. 通配选择器

作用：可以选中所有的 HTML 元素。
语法：

* {
属性名: 属性值;
}

举例：

/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}

主要用于：清除样式。

2. 元素选择器

作用：为页面中 某种元素 统一设置样式。
语法：

标签名 {
属性名: 属性值;
}

举例：

/* 选中所有h1元素 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p元素 */
p {
color: blue;
font-size: 60px;
}

注意：
元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

3. 类选择器

作用：根据元素的 class 值，来选中某些元素。
语法：

.类名 {
属性名: 属性值;
}

举例：

/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}

注意点：

  1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

  2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用
    英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名
    要有意义，做到 “见名知意”。

  3. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

    <!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

4. id 选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。
语法：

#id值 {
属性名: 属性值;
}

举例：

/* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}

注意：

  1. id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空
    格、区分大小写。
  2. 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
  3. 一个元素可以同时拥有 id 和 class 属性。

5. 基本选择器总结

在这里插入图片描述

二、复合选择器

1. 交集选择器

作用：选中同时符合多个条件的元素。
语法：

选择器1选择器2选择器3...选择器n {}

举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

注意：

  1. 有标签名，标签名必须写在前面。
  2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没
    有意义。
  3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元
    素。
  4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2. 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。
语法：

选择器1, 选择器2, 选择器3, ... 选择器n {}

多个选择器通过 , 连接，此处的含义就是：或。

举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}

注意：

  1. 并集选择器，我们一般竖着写。
  2. 任何形式的选择器，都可以作为并集选择器的一部分 。
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

3. HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

  1. 父元素：直接包裹某个元素的元素，就是该元素的父元素。
  2. 子元素：被父元素直接包含的元素（简记：儿子元素）。
  3. 祖先元素：父亲的父亲…，一直往外找，都是祖先。
  4. 后代元素：儿子的儿子…，一直往里找，都是后代。
  5. 兄弟元素：具有相同父元素的元素，互为兄弟元素。

4. 后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：

选择器1选择器2  选择器3......选择器n{
}

（先写祖先，再写后代）
选择器之间，用空格隔开，空格可以理解为：
“xxx中的”，其实就是后代的意思。
举例：

/*选中ul中的所有li*/
ulli{color:red; 
}
/*选中ul中所有li中的a*/
ullia{color:orange;
}
/*选中类名为subject元素中的所有li*/
.subjectli{
color:blue;
}
/*选中类名为subject元素中的所有类名为front-end的li*/
.subjectli.front-end{color:blue;}

注意：

  • 后代选择器，最终选择的是后代，不选中祖先。
  • 儿子、孙子、重孙子，都算是后代。

5. 子元素选择器

作用：
选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
子代选择器又称：子元素选择器、子选择器。
语法：

选择器1>选择器2>选择器3>......选择器n{
}

举例：

/* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}

注意：

  1. 子代选择器，最终选择的是子代，不是父级。
  2. 子、孙子、重孙子、重重孙子 … 统称后代；子就是指儿子。注意二者的区别。

6. 兄弟选择器

6.1 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。所谓相邻，就是紧挨着他的下一个。
语法：

选择器1+选择器2 {
}

示例：

/* 选中div后相邻的兄弟p元素 */
div+p {color:red;
}
6.2 通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。
语法：

选择器1~选择器2 {
}

实例：

/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}

注意：两种兄弟选择器，选择的是下面的兄弟。

7. 属性选择器

作用：选中属性值符合一定要求的元素。
语法：

1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

8. 伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

常用的伪类选择器

8.1 动态伪类

  1. :link 超链接未被访问的状态。

  2. :visited 超链接访问过的状态。

  3. :hover 鼠标悬停在元素上的状态。

  4. :active 元素激活的状态。

    什么是激活？—— 按下鼠标不松开。
    注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active。

  5. :focus 获取焦点的元素。

    表单类元素才能使用 :focus 伪类。
    当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
    得焦点。

8.2 结构伪类

常用的：

  1. :first-child 所有兄弟元素中的第一个。
  2. :last-child 所有兄弟元素中的最后一个。
  3. :nth-child(n) 所有兄弟元素中的第 n 个。
  4. :first-of-type 所有同类型兄弟元素中的第一个。
  5. :last-of-type 所有同类型兄弟元素中的最后一个。
  6. :nth-of-type(n) 所有同类型兄弟元素中的第n个 。

关于 n 的值：

  1. 0 或 不写 ：什么都选不中 —— 几乎不用。
  2. n ：选中所有子元素 —— 几乎不用。
  3. 1~正无穷的整数 ：选中对应序号的子元素。
  4. 2n 或 even ：选中序号为偶数的子元素。
  5. 2n+1 或 odd ：选中序号为奇数的子元素。
  6. -n+3 ：选中的是前 3 个。

9. 伪元素选择器

作用：选中元素中的一些特殊位置。
常用伪元素：
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

三、选择器的优先级（权重）

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
优先级如下：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

  1. 计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

    a : ID 选择器的个数。
    b : 类、伪类、属性 选择器的个数。
    c : 元素、伪元素 选择器的个数。

    例如：
    在这里插入图片描述

  2. 比较规则：
    按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)
  1. 特殊规则：
    1. 行内样式权重大于所有选择器。
    2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/750821.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何引入ElementUI组件库，快速上手Element

如何引入ElementUI组件库，快速上手Element

前言&#xff1a;在上篇文章中分享了如何快速上手Vue框架项目&#xff0c;本篇文章则介绍的是Element的使用&#xff0c;通过本篇文章的分享&#xff0c;我们就可以将Vue和Element结合使用&#xff0c;快速构建出精美的网页界面 目录 一.Element和ElementUI 二.如何引入Eleme…
阅读更多...
leetcod 685. 冗余连接 II

leetcod 685. 冗余连接 II

久违的没做太出来的题目&#xff0c;leetcod 685. 冗余连接 II 题目 在本问题中&#xff0c;有根树指满足以下条件的 有向 图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节点都有且只有一个父节点&#xff0c;而根节点没有…
阅读更多...
关于Oracle Primavera P6的各数据库帐号用途

关于Oracle Primavera P6的各数据库帐号用途

在使用/维护P6时&#xff0c;经常会用到各种不同的P6数据库用户&#xff0c;如在连接配置P6 Professional时用到的公共帐号pubuser&#xff0c;进入后台维护p6配置信息(adminpv)或开发常连接的privuser&#xff0c;亦或是配置BI Report/BUSINESS Intelligence报表套件用到的pxr…
阅读更多...
OpenAI Q-Star：AGI距离自我意识越来越近

OpenAI Q-Star：AGI距离自我意识越来越近

最近硅谷曝出一份54页的内部文件&#xff0c;揭露了去年OpenAI宫斗&#xff0c;导致Altman&#xff08;奥特曼&#xff09;差点离职的神秘项目——Q-Star&#xff08;神秘代号Q*&#xff09;。 根据该文件显示&#xff0c;Q-Star多模态大模型拥有125万亿个参数&#xff0c;比现…
阅读更多...
ARM架构中导致独占式内存访问Exclusive access 指令（LDXR/STXR）失败的原因分析

ARM架构中导致独占式内存访问Exclusive access 指令（LDXR/STXR）失败的原因分析

在之前的博文当中&#xff0c;笔者介绍了ARM中支持同步和信号量的硬件实现机制&#xff1a;Exclusive access&#xff08;独占式访问&#xff09;以及Load-Exclusive/Store-Exclusive指令的使用&#xff1a; ARMv8 同步和信号量&#xff08;Synchronization and semaphores&…
阅读更多...
7.Java整合MongoDB—项目创建

7.Java整合MongoDB—项目创建

整合MongoDB MongoDB的基本知识有所了解之后&#xff0c;我们开始着手上代码了&#xff0c;进来先来项目创建&#xff0c;如何引入mongodb&#xff0c;以及测试一下能否连接数据库。 1 新建springboot项目 其实只需要spring boot mongodb这个依赖就行&#xff0c;加那么多纯属…
阅读更多...
【TB作品】MSP430，波形发生器，单片机，Proteus仿真

【TB作品】MSP430，波形发生器，单片机，Proteus仿真

文章目录 题目效果梯形波100个点产生方法锯齿波100个点产生方法c代码和proteus仿真 题目 114 波形发生器的制作 设计要求 设计一个能产生正弦波、方波、三角波、梯形波、锯齿波的波形发生器。设置5个开关K1~K5(从 上到下),分别对应正弦波、方波、三角波、梯形波、锯齿波,按一下…
阅读更多...
短剧分销怎么赚钱的？保姆级教程助你短剧cps推广赚大钱

短剧分销怎么赚钱的？保姆级教程助你短剧cps推广赚大钱

短剧分销怎么赚钱的&#xff1f;小白也能月入过万/“蜂小推“保姆级教程&#xff0c;助你短剧分销赚大钱&#xff01; 相信大家或多或少都在某些群里看到一些“霸道总裁爱上职场小菜鸟...”“这类链接&#xff0c;无利不起早&#xff0c;为什么会有那么多在群里分享这些狗血视…
阅读更多...
Pycharm连接远程服务器Anoconda中的虚拟环境

Pycharm连接远程服务器Anoconda中的虚拟环境

在配置远程解释器时&#xff0c;踩过一些坑&#xff0c;现在记录一下配置过程&#xff1a; 步骤1&#xff1a; 打开pycharm的File里面的Settings 里面的Project:你的项目名称目录下的Python Interpreter。 步骤二&#xff1a; 点击右上角的“add interpreter”&#xff0c;选择…
阅读更多...
Tomcat内存马

Tomcat内存马

Tomcat内存马 前言 描述Servlet3.0后允许动态注册组件 这一技术的实现有赖于官方对Servlet3.0的升级&#xff0c;Servlet在3.0版本之后能够支持动态注册组件。 而Tomcat直到7.x才支持Servlet3.0&#xff0c;因此通过动态添加恶意组件注入内存马的方式适合Tomcat7.x及以上。…
阅读更多...
【AI+编程】利用chatGPT编写python程序处理日常excel工作提升效率小技巧

【AI+编程】利用chatGPT编写python程序处理日常excel工作提升效率小技巧

之前写过一篇AI编程相关的文章 【人工智能】为啥我最近很少写python编程文章了&#xff0c;浅谈AI编程RPA提升工作效率 。 最近有同学私信我&#xff0c;怎么利用AI编程来提升工作效率&#xff0c;除了文章里讲的 使用AI帮忙写算法、代码提示、代码优化、不同语言转换(如J…
阅读更多...
Axios异步框架和Json数据格式

Axios异步框架和Json数据格式

一.Axios异步框架 对原生的Ajax进行封装&#xff0c;简化书写。 给大家提供一下axios的源码&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ZSrUBe0B4dIq7d6NpUzqOQ 提取码&#xff1a;gr86 将源码粘贴到项目之中。 1.基础使用 首先单独创建一个Servlet&#xf…
阅读更多...
Godot 学习笔记(2):信号深入讲解

Godot 学习笔记(2):信号深入讲解

文章目录 前言相关链接环境信号简单项目搭建默认的信号先在label里面预制接收函数添加信号 自定义无参数信号为了做区分&#xff0c;我们在label新增一个函数 自定义带参数信号Button代码label代码连接信号 自定义复杂参数信号自定义GodotObject类ButtonLabel连接信号 信号函数…
阅读更多...
数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目&#xff08;9&#xff09;—基于Verilog的SNN加速器 写在前面的话项目整体框图完整电路框图 项目简介和学习目的软件环境要求 Wave&CoverageTiming&#xff0c;Area & Power总结 写在前面的话 项目介绍&#xff1a; SNN硬件加速器是一种专为脉冲神经网…
阅读更多...
uniapp样式穿透修改uview的按钮button图标

uniapp样式穿透修改uview的按钮button图标

需求&#xff1a; 想给按钮icon和text改字体颜色&#xff0c;结果发现图标颜色并没有改变 .u-button{width: 300rpx;background-color: aliceblue;color: #aaaa7f;margin-top: 20rpx; }接下来用样式穿透解决 1、首先&#xff0c;给UI组件包裹一层view <view class"t…
阅读更多...
ElasticSearch：数据的魔法世界

ElasticSearch：数据的魔法世界

​ 欢迎来到ElasticSearch的奇妙之旅&#xff01;在这个充满魔法的搜索引擎世界中&#xff0c;数据不再是沉闷的数字和字母&#xff0c;而是变得充满活力和灵动。无论你是刚刚踏入数据探索的小白&#xff0c;还是已经对搜索引擎有所了解的行者&#xff0c;本篇博客都将为你揭示…
阅读更多...
unity内存优化之AB包篇（微信小游戏）

unity内存优化之AB包篇（微信小游戏）

1.搭建资源服务器使用(HFS软件(https://www.pianshen.com/article/54621708008/)) using System.Collections; using System.Collections.Generic; using UnityEngine;using System;public class Singleton<T> where T : class, new() {private static readonly Lazy<…
阅读更多...
【集成开发环境】-VS Code：C/C++ 环境配置

【集成开发环境】-VS Code：C/C++ 环境配置

简介 VS Code&#xff0c;全称Visual Studio Code&#xff0c;是一款由微软开发的跨平台源代码编辑器。它支持Windows、Linux和macOS等操作系统&#xff0c;并且具有轻量级、高效、可扩展等特点&#xff0c;深受广大开发者的喜爱。 VS Code拥有丰富的功能特性&#xff0c;包括…
阅读更多...
计算机三级网络技术综合题第三题、第四题详细解析

计算机三级网络技术综合题第三题、第四题详细解析

第三大题 DHCP报文分析&#xff08;10分&#xff09; 一、DHCP工作流程&#xff08;一般情况下&#xff09; 报文摘要 对应上面报文1—4 报文1、3DHCP&#xff1a;Request&#xff1b; 报文2、4DHCP&#xff1a;Reply。 例题&#xff08;第三套&#xff09;&#xff1a;在一…
阅读更多...
程序员入行忠告！

程序员入行忠告！

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 关注我&#xff0c;紧跟本系列专栏文章&#xff0c;咱们下篇再续&#xff01; 作者简介&#xff1a;魔都技术专家兼架构&#xff0c;多家大厂后端一线研发经验&#xff0c;各大技术社区头部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023