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://xiahunao.cn/news/2869575.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

JavaWeb笔记 --- 四、HTMlCSS

JavaWeb笔记 --- 四、HTMlCSS

四、HTMl&CSS HTML入门 基本标签 图片、音频、视频标签 尺寸单位 px&#xff1a;像素 百分比 超链接标签 列表标签 表格标签 布局标签 表单标签 CSS导入方式 CSS选择器
阅读更多...
Python Web开发记录 Day12：Django part6 用户登录

Python Web开发记录 Day12：Django part6 用户登录

名人说&#xff1a;东边日出西边雨&#xff0c;道是无晴却有晴。——刘禹锡《竹枝词》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、登录界面2、用户名密码校验3、cookie与session配置①cookie与session②配置…
阅读更多...
ideaSSM失物招领管理系统网页模式开发mysql数据库web结构java编程计算机网页源码maven项目

ideaSSM失物招领管理系统网页模式开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea ssm 失物招领管理系统是一套完善的完整信息管理系统&#xff0c;结合SSM框架完成本系统SpringMVC spring mybatis &#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数…
阅读更多...
pytorch 入门基础知识二（Pytorch 02）

pytorch 入门基础知识二（Pytorch 02）

一 微积分 1.1 导数和微分 微分就是求导&#xff1a; %matplotlib inline import numpy as np from matplotlib_inline import backend_inline from d2l import torch as d2l def f(x):return 3 * x ** 2 - 4 * x 定义&#xff1a; 然后求 f(x) 在 x 1 时的导数&#xff…
阅读更多...
掌握人工智能：人工智能工程师必须了解的顶级编程语言

掌握人工智能：人工智能工程师必须了解的顶级编程语言

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Linux-centos如何搭建yum源仓库

Linux-centos如何搭建yum源仓库

1.本地搭建&#xff08;无需连接外网&#xff09; 1.1检查网络配置&#xff0c;及网络连接 打开虚拟机&#xff0c;点击【编辑——虚拟网络编辑器】 点击【仅主机模式】查看子网段是否和局内IP匹配 进入局内&#xff0c;查看网络IP是否在你上述设置的网段内&#xff0c;如果不…
阅读更多...
Linux操作系统-汇编LED驱动程序基础

Linux操作系统-汇编LED驱动程序基础

一、汇编LED原理分析 IMX6ULL-LED灯硬件原理分析&#xff1a; 1、使能时钟&#xff0c;CCGR0-CCGR6这7个寄存器控制着IMX6ULL所有外设时钟的使能。为了简单&#xff0c;设置CCGR0-CCGR6这7个寄存器全部为0XFFFFFFFF&#xff0c;相当于使能全部外设时钟。&#xff08;在IMX6ULL芯…
阅读更多...
学习数据结构和算法的第16天

学习数据结构和算法的第16天

单链表的实现 链表的基本结构 #pragma once #include<stdio.h> #include<stlib.h> typedf int SLTDataType; typedy struct SListNode {SLTDataType data;struct SListNode*next; }SLTNode;void Slisprint(SLTNode*phead); void SListPushBack(SLTNode**pphead,S…
阅读更多...
SQLiteC/C++接口详细介绍之sqlite3类（十三）

SQLiteC/C++接口详细介绍之sqlite3类（十三）

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十二&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十四&#xff09;&#xff08;未发表&#xff09; 40.sqlite3…
阅读更多...
相机拍照与摄影学基础

相机拍照与摄影学基础

1.相机拍照 相机可能形状和大小不同&#xff0c;但基本功能相同&#xff0c;包括快门速度、光圈和感光度&#xff0c;这些是摄影的通用概念。即使是一次性相机也是基于这三个理念工作的。不同类型相机在这三个概念上的唯一区别是你可以控制这些功能的程度。这三个参数被称为相…
阅读更多...
HCIP—OSPF课后练习一

HCIP—OSPF课后练习一

本实验模拟了一个企业网络场景&#xff0c;R1、R2、R3为公司总部网络的路由器&#xff0c;R4、R5分别为企业分支机构1和分支机构2的路由器&#xff0c;并且都采用双上行方式与企业总部相连。整个网络都运行OSPF协议&#xff0c;R1、R2、R3之间的链路位于区域0&#xff0c;R4与R…
阅读更多...
计算机设计大赛 题目：基于大数据的用户画像分析系统 数据分析 开题

计算机设计大赛 题目：基于大数据的用户画像分析系统 数据分析 开题

文章目录 1 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…
阅读更多...
波奇学Linux：线程安全和自选锁和读写锁

波奇学Linux：线程安全和自选锁和读写锁

STL不是线程安全的 单例模式的线程安全 自选锁&#xff1a;当线程申请锁失败时&#xff0c;不是挂起&#xff0c;而是一直申请 挂起等待锁 &#xff1a;当线程申请锁失败时&#xff0c;把锁挂起 一般临界区时间短的适合自选锁&#xff0c;长的适合挂起等待锁
阅读更多...
Linux系统——Session ID（负载均衡如何保持会话）

Linux系统——Session ID（负载均衡如何保持会话）

目录 一、实验环境搭建 二、部署Nginx代理服务器配置 三、部署后端真是服务器Tomcat配置 四、配置Tomcat的Session ID会话保持 五、测试 此次实验是Tomcat后端服务器如何做Session ID会话保持 一、实验环境搭建 [rootlocalhost ~]#systemctl stop firewalld [rootlocalho…
阅读更多...
Qt QTableWidget 实现行选中及行悬浮高亮

Qt QTableWidget 实现行选中及行悬浮高亮

表格整行的 selected、hover 高亮需求很常见&#xff0c;但使用 Qt 提供的开箱即用的方法根本无法实现这个需求&#xff08;至少在当前的时间节点是不行的&#xff09;&#xff1b;想要实现这个效果必须要费一点点力气&#xff0c;我们尽量选择较为简单的方法。 话不多说&…
阅读更多...
“import ... =“ 只能在 TypeScript 文件中使用

“import ... =“ 只能在 TypeScript 文件中使用

当你遇到这个问题很苦恼。 可以按照以下解决办法 使用ctrlshiftP 修改"javascript.validate.enable": false
阅读更多...
从大模型到Agentscope——分布式Multi-Agent应用开发与部署

从大模型到Agentscope——分布式Multi-Agent应用开发与部署

目录 Why需要分布式 案例 多进程的分布书版本能快速提升速度 分布式的挑战 AgentScope分布式解决 方案 实现RPC Agent 基于Actor模式的并行调度缺点&#xff1a;需要Agent内部决定消息传递目标 被调用的Agent立即返回占位符placeholder to_dist: 开启自动将单机进行扩展…
阅读更多...
android中单例模式为什么会引起内存泄漏？

android中单例模式为什么会引起内存泄漏？

单例模式使用不恰当会造成内存泄漏。因为单例的静态特性使得单例的生命周期和应用的生命周期一样长&#xff0c; 如果一个对象已经不需要使用了&#xff0c;但是单例对象还持有该对象的引用&#xff0c;那么这个对象就不能被正常回收&#xff0c;因此会导致内存泄漏。 举个例子…
阅读更多...
＜Linux＞ 线程的同步与互斥

＜Linux＞ 线程的同步与互斥

目录 前言&#xff1a; 一、资源共享问题 &#xff08;一&#xff09;多线程并发访问 &#xff08;二&#xff09;临界资源与临界区 &#xff08;三&#xff09;“锁” 是什么 二、多线程抢票场景 &#xff08;一&#xff09;并发抢票 &#xff08;二&#xff09;并发访…
阅读更多...
学习笔记--强化学习（1）

学习笔记--强化学习（1）

参考&#xff1a;https://blog.csdn.net/koulongxin123/article/details/122676149 1.什么是强化学习&#xff1f; (1)定义 基于环境的反馈而行动&#xff0c;通过不断与环境的交互、试错&#xff0c;最终完成特定目的或者使得整体行动收益最大化&#xff08;是一种通过与环境…
阅读更多...
最新文章

Copyright @ 2022~2023