CSS选择器

基本选择器

通配选择器

可以选中所有的HTML元素，清除样式时可以使用

* {color: orange;font-size: 40px;
}

元素选择器

为元素统一设置样式，故无法实现差异化设置

/* 为所有h1元素添加样式 */
h1 {color: red;font-size: 60px;
}/* 为所有p元素添加样式 */
p {color: red;font-size: 60px;
}

类选择器

根据元素的class值选中元素添加样式

一个标签只能有一个class，但class可以有多值，使用空格隔开

.inner {background-color: red;font-size: 20px;
}/* 后来者居上原则，neibu的样式会优先于inner*/
.neibu {background-color: blue;font-size: 20px;
}/* class的值可以有多个值 */
<div class="inner neibu">学习CSS</div>

ID选择器

根据元素的id值，精准的为某个元素添加样式

规范：

  • id属性值：由字母、数字、下划线_、短杠-组成，最好以字母开头、不要包含空格、区分大小写
  • 一个元素只能拥有一个id属性，可以同时拥有id和class属性，且多个元素的id属性值不能相同
#top-div-inner {color: red;font-size: 60px;
}<div id="top-div-inner" class="inner">学习CSS</div>

复合选择器

交集选择器

交集有并且的含义（通俗理解：即...又...的意思）

用于选中同时符合多个条件的元素

/* 选中类名为outer的div元素 div元素名必须放在前面，*/
div.outer {background-color: red;width: 300px;height: 300px;
}/* 选中包含inner和interior的元素 */
.inner.interior {background-color: black;width: 200px;height: 200px;
}<div class="outer"><div class="inner interior"></div>
</div>

注意：

  1. 有元素时，元素必须写在前面

  2. id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用（没有意义）

  3. 交集选择器中不能出现两个元素选择器，因为一个元素不可能即是p元素又是span元素

  4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

并集选择器

用于选中多个选择器对应的元素，又称分组选择器，并集就是或的意思，多个选择器通过,连接

.outer, .inner {}/* 也可以竖着写 */
#outer2, 
.inner2 {}<div class="outer"><div class="inner"></div>
</div><div id="outer2"><div class="inner2"></div>
</div>

元素关系

父、子元素

直接包裹某个元素的元素，就是该元素的父元素，被父元素直接包含的元素称为子元素

<div><!-- h1和ul是div的子元素 --><h1>h1</h1><ul><li>1</li><li>2</li><li>3</li></ul>
</div>

祖先、后代元素

父元素也算是祖先元素的一种

<div><h1>h1</h1><ul><!-- li的祖先元素是ul和div --><li>1</li><li>2</li><li>3</li></ul>
</div>

兄弟元素

具有相同父元素的元素，互为兄弟元素

<div><!-- h1和ul是兄弟元素 --><h1>h1</h1><ul><li>1</li><li>2</li><li>3</li></ul>
</div>

后代选择器

选择器之间用空格隔开

    <style>/* 选中ul中的所有li */ul li {color: red;}/* 选中ul中所有li中的a元素 */ul li a {color: orange;}/* 选中类名为ul元素中的所有li */.ul li {color: blue;}/* 选中类名为ul元素中的类名为demo的li */.ul li.demo {color: red;}</style><div><ul><li>广州</li><!-- ul是li的祖先元素，只要在里面就算 --><li>天河区</li><li>深圳</li><li>佛山</li></ul>
</div>

子选择器

选择器之间使用>隔开

    <style>/* div中的子代span元素 */div > span {color: red;}/* 类名为ul的元素中的子li元素 */.ul > li {color: black;}</style><div><span>广东省</span><ul class="ul"><li>广州</li><!-- ul是li的祖先元素，只要在里面就算 --><li>天河区</li><li>深圳</li><li>佛山</li></ul>
</div>

兄弟选择器

相邻兄弟选择器

相邻兄弟元素（紧挨着的下一个元素），兄弟选择器选择的是向下的兄弟级，不向上查找，使用+分割

    <!-- 选中h1下一个p元素 --><style>h1 + p {color: red;}</style><div><p>0</p><h1>1</h1><!-- 选中的是2 --><p>2</p><p>3</p>
</div>

通用兄弟选择器

符合条件的所有兄弟元素，通过~分割

    <!-- 选中h1后的所有的兄弟p元素 --><style>h1 ~ p {color: red;}</style><div><p>0</p><h1>1</h1><!-- 选中的是2、3 --><p>2</p><p>3</p>
</div>

属性选择器

选中属性值符合一定要求的元素

语法：

语法含义
[属性名]选中具有某个属性的元素
[属性名="值"]选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"]选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"]选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*=“值”]选择包含某个属性，属性值包含指定值的元素
    <style>[title] {color: red;}[title = "itzhuzhu0"] {color: black;}[title ^= "itzhu"] {color: chartreuse;}[title $= "2"] {color: orange;}[title *= "zhuzhu"] {color: blue;}</style><div title="itzhuzhu0">0</div>
<div title="itzhuzhu1">1</div>
<div title="itzhuzhu2">2</div>

伪类选择器

是元素的一种特殊状态，伪：假的，伪类：像类，但不是类

动态伪类

顺序不能乱，在css里的规则是后来者居上，通过:分割

元素含义
link超链接未被访问的状态
visited超链接访问过的状态
hover鼠标悬停在元素上的状态
active元素激活（按下鼠标不松开）的状态
focus获取焦点的元素（表单类的元素才能使用）
    <style>a:link {color: darkgreen;}a:visited{color: red;}a:hover{color: silver;}a:active {color: blue;}input:focus {color: darkgreen;}</style><a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<input type="text">

结构伪类

语法含义
:first-child所有兄弟元素中的第一个
:last-child所有兄弟元素中的最后一个
:nth-child(n)所有兄弟元素中的第n个
:first-of-type所有同类型兄弟元素中的第一个
:last-of-type所有同类型兄弟元素中的最后一个
:nth-of-type(n)所有同类型兄弟元素中的第n个
:nth-last-child(n)所有兄弟元素中的倒数第n个
:nth-last-of-type(n)所有同类型兄弟元素中的 倒数第n个
:only-child选择没有兄弟的元素（独生子女）
:only-of-type选择没有同类型兄弟的元素
:root 根元素（html标签）
:empty内容为空元素（空格也算内容）

n的值：

值含义
0/不写什么都选不中
1~正无穷的整数选中对应序号的子元素
2n或even选中序号为偶数的子元素
2n+1或odd选中序号为奇数的子元素
-n+3选中的是前 3 个
3n+4（公式写法）结果为：3*0+4=4
    <style>p:first-child {color: red;}p:last-child {color: red;}/* 不包含span，上面两个也是*/p:nth-child(2) {color: red;}span:first-of-type {color: red;}p:last-of-type {color: red;}p:nth-of-type(2) {color: red;}p:nth-last-child(2) {color: blue;}p:nth-last-of-type(2) {color: blue;}a:only-child {color: blue;}a:only-of-type {color: red;}/* 根元素就是html标签 */:root {background-color: red;}:empty {width: 10px;height: 10px;background-color: red;}</style><div><!-- 所有的兄弟元素第一个/最后一个是span，所以谁都选不中 --><span>0</span><p>1</p><p>2</p><p>3</p><span>4<a>a</a></span><div></div>
</div>

否定伪类

not（选择器）排除满足括号中条件的元素

    <style>/* 排除div中的p元素，且类名为last的元素 */div > p:not(.last) {color: red;}div > p:not(:last-child) {color: red;}</style><div><p>1</p><p>2</p><p>3</p><p class="last">4</p>
</div>

UI伪类

  • checked：被选中的复选框或单选按钮
  • enable：可用的表单元素（没有 disabled 属性）
  • disabled：不可用的表单元素（有 disabled 属性）
    <style>/* checked、radio无法设置背景色 */input:checked {width: 100px;height: 100px;}input:enabled {background-color: blue;}input:disabled {background-color: red;}</style><input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>

目标伪类

target：选中锚点指向的元素

    <style>div {background-color: red;height: 200px;}div:target {background-color: blue;}</style><a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a><div id="one">第1个</div>
<div id="two">第2个</div>
<div id="three">第3个</div>

语言伪类

:lang()：根据指定的语言选择元素（本质是看 lang 属性的值）

<!DOCTYPE html>
<!-- 这里还有设置lang -->
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div:lang(en) {color: red;}div:lang(zh-CN) {color: blue;}</style>
</head>
<body><!-- 通过div中的lang="zh-CN"确定的 -->
<div lang="zh-CN">itzhuzhu你好啊</div>
<div>itzhuzhu你好啊</div>
</body>
</html>

伪元素选择器

选中元素中的一些特殊位置，通过::，冒号前后不能空格

常用伪元素：

元素含义
first-letter选中元素中的第一个文字
first-line选中元素中的第一行文字
selection选中被鼠标选中的内容
placeholder选中输入框的提示文字
before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
after在元素最后的位置，创建一个子元素（必须用content属性指定内容）
    <style>p::first-letter {font-size: 20px;}p::first-line {background-color: red;}p::selection {background-color: orange;}input::placeholder {color: blue;}p::before {content: "￥";}p::after {content: ".00元";}</style>
</head>
<body><p>199</p>
<input type="text" placeholder="请输入用户名">

选择器优先级

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

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

注意：并集选择器的每一个部分是分开计算权重的

计算选择器权重格式： (a,b,c)

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

鼠标放在选择器上就能快速查看权重，并集选择器可以放在每一个元素上查看权重

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

特殊规则：

  1. 行内样式权重大于所有选择器

  2. !important的权重，大于行内样式，权重最高

    <style>#box {width: 100px;height: 100px;background-color: red;}#box {width: 100px;height: 100px;background-color: blue;!important}</style><div id="box"></div>

CSS三大特性

层叠性

如果发生了样式冲突，那就会根据选择器优先级进行样式的层叠（覆盖），如果权重相同，就比较书写顺序

什么是样式冲突？

  • 元素的同一个样式名，被设置了不同的值，这就是冲突
 #box {width: 100px;height: 100px;background-color: red;}#box {width: 100px;height: 100px;background-color: blue;!important}

继承性

元素会自动拥有其父元素、或祖先元素上所设置的某些样式（参照MDN网站，可查询属性是否可被继承）

继承规则：就近继承（先去父元素找，再去爷爷元素找…）

    <style>div {color: red;}p {color: blue;}</style><div><span>1</span><p><!-- 这个span的父元素有属性就继承父元素的，否则就继承爷爷元素 --><span>2</span></p>
</div>

优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式

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

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

相关文章

【C++ • STL • 力扣】详解string相关OJ

【C++ • STL • 力扣】详解string相关OJ

文章目录 1、仅仅翻转字母2、字符串中的第一个唯一字符3、字符串里最后一个单词的长度4、验证一个字符串是否是回文5、字符串相加总结 ヾ(๑╹◡╹)&#xff89;" 人总要为过去的懒惰而付出代价 ヾ(๑╹◡╹)&#xff89;" 1、仅仅翻转字母 力扣链接 代码1展示&…
阅读更多...
ENVI_IDL: 基础语法详解

ENVI_IDL: 基础语法详解

01 题目 02 代码说明 题目本身很简单&#xff0c;但是我自己加了一些东西进去增加难度。主要包括print函数的封装、格式化字符串&#xff0c;但是不影响代码的阅读。&#xff08;注&#xff1a;对于没有语言基础的人而言相对阅读困难&#xff0c;但是由于IDL是解释型语言&…
阅读更多...
antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮 效果图代码解析 效果图 代码解析 import { Form, Upload, message } from antd; import { PlusOutlined } from ant-design/icons; import { useState, useEffect } from react; import { BASE_URL } from /utils/…
阅读更多...
网络爬虫-----初识爬虫

网络爬虫-----初识爬虫

目录 1. 什么是爬虫&#xff1f; 1.1 初识网络爬虫 1.1.1 百度新闻案例说明 1.1.2 网站排名&#xff08;访问权重pv&#xff09; 2. 爬虫的领域&#xff08;为什么学习爬虫 ?&#xff09; 2.1 数据的来源 2.2 爬虫等于黑客吗&#xff1f; 2.3 大数据和爬虫又有啥关系&…
阅读更多...
stm32---基本定时器（TIM6，TIM7）

stm32---基本定时器（TIM6，TIM7）

STM32F1的定时器非常多&#xff0c;由两个基本定时器&#xff08;TIM6&#xff0c;TIM7&#xff09;、4个通用定时器&#xff08;TIM2-TIM5&#xff09;和两个高级定时器&#xff08;TIM&#xff11;&#xff0c;TIM&#xff18;&#xff09;组成。基本定时器的功能最为简单&am…
阅读更多...
〔022〕Stable Diffusion 之 生成视频 篇

〔022〕Stable Diffusion 之 生成视频 篇

✨ 目录 &#x1f388; 视频转换 / mov2mov&#x1f388; 视频转换前奏准备&#x1f388; 视频转换 mov2mov 使用&#x1f388; 视频转换 mov2mov 效果预览&#x1f388; 视频无限缩放 / Infinite Zoom&#x1f388; 视频无限缩放 Infinite Zoom 使用 &#x1f388; 视频转换 /…
阅读更多...
ITIL 4—创建、交付和支持—设定工作优先级和管理供应商

ITIL 4—创建、交付和支持—设定工作优先级和管理供应商

5. 设定工作优先级和管理供应商 5.1 为什么我们要对工作优先级排序? 只要工作需求超出了在预期时间内能完成的产能&#xff0c;就会出现排队的情况。在理想情况下&#xff0c;组织的需求没有任何变化&#xff0c;并且拥有满足需求所需的适当质量和数量的资源。但现实里&…
阅读更多...
Tomcat多实例部署和动静分离

Tomcat多实例部署和动静分离

一、多实例部署&#xff1a; 多实例&#xff1a;多实例就是在一台服务器上同时开启多个不同的服务端口&#xff0c;同时运行多个服务进程&#xff0c;这些服务进程通过不同的socket监听不同的服务端口来提供服务。 1.前期准备&#xff1a; 1.关闭防火墙&#xff1a;systemctl …
阅读更多...
Multi Query Attention Group Query Attention

Multi Query Attention Group Query Attention

Multi Query Attention(MQA)在2019年就被提出来了&#xff0c;用于推理加速&#xff0c;但在当时并没有受到很多关注&#xff0c;毕竟一张2080就能跑Bert-base了。随着LLM的大火&#xff0c;MQA所带来的收益得以放大。 思路 Multi Query Attention(MQA)跟Multi Head Attention…
阅读更多...
计算机视觉实战项目（图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别）

计算机视觉实战项目（图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别）

图像分类 教程博客_传送门链接:链接 在本教程中&#xff0c;您将学习如何使用迁移学习训练卷积神经网络以进行图像分类。您可以在 cs231n 上阅读有关迁移学习的更多信息。 本文主要目的是教会你如何自己搭建分类模型&#xff0c;耐心看完&#xff0c;相信会有很大收获。废话不…
阅读更多...
自动驾驶汽车下匝道路径优化控制策略研究

自动驾驶汽车下匝道路径优化控制策略研究

摘要 随着社会不断进步&#xff0c; 经济快速发展&#xff0c; 科学技术也在突飞猛进&#xff0c; 交通行业是典型的领域之一。现阶段的交通发展&#xff37; 实现智能交通系统为目标&#xff0c; 正逐渐从信息化步入智能化&#xff0c;朝着智慧化迈进。近年来&#xff0c;一系…
阅读更多...
DeepinV20/Ubuntu安装postgresql方法

DeepinV20/Ubuntu安装postgresql方法

首先&#xff0c;建议看一下官方的安装文档PostgreSQL: Linux downloads (Ubuntu) PostgreSQL Apt Repository 简单的说&#xff0c;就是Ubuntu下的Apt仓库&#xff0c;可以用来安装任何支持版本的PgSQL。 If the version included in your version of Ubuntu is not the one…
阅读更多...
MYBATIS-PLUS入门使用、踩坑记录

MYBATIS-PLUS入门使用、踩坑记录

转载&#xff1a; mybatis-plus入门使用、踩坑记录 - 灰信网&#xff08;软件开发博客聚合&#xff09; 首先引入MYBATIS-PLUS依赖&#xff1a; SPRING BOOT项目&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus…
阅读更多...
C++信息学奥赛1170：计算2的N次方

C++信息学奥赛1170：计算2的N次方

#include <iostream> #include <string> #include <cstring>using namespace std;int main() {int n;cin >> n; // 输入一个整数nint arr[100];memset(arr, -1, sizeof(arr)); // 将数组arr的元素初始化为-1&#xff0c;sizeof(arr)表示arr数组的字节…
阅读更多...
分类预测 | Matlab实现基于BP-Adaboost数据分类预测

分类预测 | Matlab实现基于BP-Adaboost数据分类预测

分类预测 | Matlab实现基于BP-Adaboost数据分类预测 目录 分类预测 | Matlab实现基于BP-Adaboost数据分类预测效果一览基本介绍研究内容程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于BP-Adaboost数据分类预测&#xff08;Matlab完整程序和数据&#xff09; 2.多特征输入…
阅读更多...
刷刷刷——双指针算法

刷刷刷——双指针算法

双指针算法 这里的双指针&#xff0c;可能并不是真正意义上的指针&#xff0c;而是模拟指针移动的过程。 常见的有两种&#xff1a; 双指针对撞&#xff1a; 即在顺序结构中&#xff0c;指针从两端向中间移动&#xff0c;然后逐渐逼近 终止条件一般是&#xff1a; left ri…
阅读更多...
Java面试笔试acm版输入

Java面试笔试acm版输入

首先区分scanner.nextInt()//输入一个整数&#xff0c;只能读取一个数&#xff0c;空格就停止。 scanner.next()//输入字符串&#xff0c;只能读取一个字符串&#xff0c;空格就停止&#xff0c;但是逗号不停止。 scanner.nextLine() 读取一行&#xff0c;换行停止&#xff0c…
阅读更多...
Excel、Jira、Bugfree 应该选哪个做bug管理？深度对比

Excel、Jira、Bugfree 应该选哪个做bug管理？深度对比

如何选择最适合您团队的Bug管理系统&#xff1f;本指南提供了全面的选型建议&#xff0c;并深度对比了7类主流工具如PingCode、Jira、 Mantis等&#xff0c;涵盖功能、成本、易用性等多个关键因素。适用于软件开发团队、项目经理和决策者。 一、适合的BUG管理工具在产品开发中的…
阅读更多...
Web Component -- 即将爆发的原生的 UI 组件化标准

Web Component -- 即将爆发的原生的 UI 组件化标准

Web Component 概述 Web Component 是一种用于构建可复用用户界面组件的技术&#xff0c;开发者可以创建自定义的 HTML 标签&#xff0c;并将其封装为包含逻辑和样式的独立组件&#xff0c;从而在任何 Web 应用中重复使用。 每个 Web Component 都具有自己的 DOM 和样式隔离&a…
阅读更多...
2023-09-12 LeetCode每日一题（课程表 IV）

2023-09-12 LeetCode每日一题（课程表 IV）

2023-03-29每日一题 一、题目编号 1462. 课程表 IV二、题目链接 点击跳转到题目位置 三、题目描述 你总共需要上 numCourses 门课&#xff0c;课程编号依次为 0 到 numCourses-1 。你会得到一个数组 prerequisite &#xff0c;其中 prerequisites[i] [ai, bi] 表示如果你…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023