【前端CSS基础2(CSS基本选择器和复合选择器)】

前端CSS基础2(CSS基本选择器和复合选择器)

  • HTML和HTML的区别和联系
  • HTML元素和CSS属性
  • CSS基本选择器
    • ID选择器
    • 类选择器
    • 标签选择器
    • 群组选择器
    • 通配选择器
    • 层次选择器
    • 属性选择器
    • 伪类选择器
    • 伪元素选择器
  • CSS复合选择器
    • 交集选择器
    • 并集选择器
    • 后代选择器
    • 子元素选择器
    • 兄弟选择器
    • 属性选择器

HTML和HTML的区别和联系

HTML和CSS是构建网页的基石,它们各自承担着不同的角色,但又紧密相连。以下是它们的主要区别和联系:

区别

  • HTML(HyperText Markup Language):是一种标记语言,负责创建和组织网页的结构和内容。它使用一系列标签来定义标题、段落、列表、链接等元素,构成了网页的基本骨架。
  • CSS(Cascading Style Sheets):是一种样式表语言,用于指定HTML元素的外观和布局。它允许开发者为HTML页面中的元素设置颜色、字体、大小、间距等视觉样式。
  • 联系
  • HTML提供了网页的结构,而CSS则提供了这些结构的样式。没有CSS,网页将缺乏视觉效果和美观的布局;没有HTML,网页将没有内容和结构。
  • CSS通过选择器来定位HTML文档中的元素并应用样式。这意味着CSS依赖于HTML元素的标签或类名、ID等属性来施加样式。
  • 实际应用
  • 在开发过程中,HTML和CSS通常需要配合使用。例如,HTML用于创建一个新闻文章的页面结构,包括标题、作者、日期和文章内容等,而CSS则用于设置这些元素的字体、颜色、布局等,以确保页面既易读又吸引人。

总结来说,HTML和CSS虽然有着不同的职责,但它们共同协作,使得静态的HTML结构变得生动且具有吸引力。在现代网页设计和开发中,两者缺一不可。

HTML元素和CSS属性

CSS属性是用于定义HTML元素的视觉样式和布局的规范,而元素则是HTML页面中的基本构成单位

首先,让我们来了解CSS属性:

  1. 字体属性:这些属性包括font-family(字体系列)、font-size(字体大小)、font-weight(字体粗细)等,它们控制文本的显示方式。
  2. 颜色和背景属性:例如color(文本颜色)、background-color(背景颜色)等,这些属性定义了元素的颜色。
  3. 布局属性:如displaypositionfloat等,它们影响着元素在页面上的布局。
  4. 尺寸属性:包括widthheightmarginpadding等,这些属性决定了元素的尺寸和间距。
  5. 边框属性:像border-styleborder-widthborder-color等,用于设置元素的边框样式。
  6. 其他视觉属性:还有如text-align(文本对齐方式)、text-decoration(文本装饰)等,也是CSS的一部分。

接下来,我们来看HTML元素:

  1. 块级元素:如<div><p>(段落)、<h1><h6>(标题)等,它们通常独占一行,可以设置宽度和高度。
  2. 内联元素:如<span><a>(链接)、<em>(强调)等,它们不独占一行,宽度随内容而定。
  3. 空元素:如<br>(换行)、<img>(图像)、<input>(输入框)等,这些元素为空元素,因为它们没有闭合标签。
  4. 表单元素:如<form><textarea><button>等,用于创建用户交互的表单。

综上所述,CSS属性和HTML元素共同构成了网页的结构和样式。通过CSS属性,开发者可以为HTML元素应用各种样式,从而创造出丰富多样的网页设计。

CSS基本选择器

CSS基本选择器主要包括ID选择器、类选择器、标签选择器、群组选择器、通配选择器、层次选择器、属性选择器以及伪类和伪元素选择器

ID选择器

通过元素的ID来选取元素,例如#myID。它在文档中是唯一的,常用于选取页面中唯一的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>欧买噶的CSS学习</title><style>#love{color: red;}#dislike{color:black;}</style></head>
<body><h2 id="love">我爱你</h2><h2 id="dislike">我不喜欢你</h2>
</body>
</html>

注意:1、id属性值:尽量由字母,数字,下划线,短杠组成,最好以字母开头,不要包括空格,区分大小写。
2、一个元素只能拥有一个Id属性,多个元素id属性值不能相同。
3、一个元素可以同时拥有id和class属性。

类选择器

通过元素的类名来选取元素,例如.myClass。类选择器可以应用于多个元素,非常适合用于选取具有共同样式的一组元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>欧买噶的CSS学习</title><style>.a{color:red;}.b{color: green;}</style>
<body><p class="a">1</p><span class="a" >2</span><p class="a">3</p><p class="b">10</p><p class="b">20</p><p class="b">30</p>
</body>
</html>

注意:
元素的class属性值不带. 但css的类选择器要带.
class的值是自定义的,尽量用英文与数字的组合,且命名要有意义。
一个元素不能写多个class属性

标签选择器

直接使用HTML标签名称来选取元素,例如p。它会选择页面上所有的该标签元素。

    <style>h2{color:orange;font-size: 40px;}</style>

所有的h2标签的元素都变成该类型该颜色大小。

群组选择器

可以将多个选择器放在一起,以应用相同的样式规则,例如.class1, #id2, element。这样可以减少代码重复,并使得样式更加整洁。

通配选择器

使用星号*来选取所有元素,例如*。通常用于重置所有元素的样式或设置全局样式。

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

选中所有的HTML元素,所有的设置都为该类型。

层次选择器

利用空格 来选取元素的子元素,例如div p会选择div内的所有p元素。

属性选择器

根据元素的属性和属性值来选取元素,例如[type="text"]会选择所有input元素中type属性为text的元素。

伪类选择器

根据元素的特定状态来选取元素,例如:hover用于选取鼠标悬停时的元素。

伪元素选择器

选取元素的特定部分,例如::first-line用于选取元素的第一行文本。

这些基本选择器是CSS样式化页面的基础,它们可以单独使用,也可以与其他选择器组合使用,以实现更复杂的样式选择。在实际开发中,合理地使用这些选择器可以提高样式的精确度和效率。

CSS复合选择器

交集选择器

CSS交集选择器是一种用于选取两个或多个选择器共同选中的元素的选择器。它由两个或多个选择器组成,这些选择器之间用空格分隔。只有当元素同时满足所有选择器的条件时,才会被选中并应用样式。

例如,以下是一个使用交集选择器的CSS规则:

div.classA {color: red;
}

在这个例子中,div 和 .classA 都是选择器,它们之间用空格分隔。这个规则将选中所有同时满足以下条件的

元素:
1、它是一个
元素;
2、它有一个名为 classA 的类。
只有当这两个条件都满足时,元素的文本颜色才会被设置为红色。

        <!--类-->.b{color: green;}<!--交集选择器,标签且类名-->p.yanse{color: green;}<!--类的使用--><p class="b">30</p><!--交集选择器的使用--><p class="yanse">绿色</p>

多个选择器

        <!--交集选择器,标签且类名且id-->p.yanse#ls{color: green;}<!--交集选择器的使用--><p class="yanse" id="ls">绿色</p>

并集选择器

并集选择器是一种CSS选择器,用于选取满足任一条件的元素。具体来说,并集选择器允许你指定多个选择器,然后选取这些选择器中的任何一个所匹配的元素。
并集选择器的使用方法是将多个选择器用逗号,分隔开来。

p, .classA {/* 这里是你的样式规则 */
}
<!--想选择所有的<p>元素以及所有的带有.classA类的<div>元素
在这个例子中,无论是<p>标签还是带有.classA类的<div>标签
只要满足其中一个条件,该样式规则就会应用到该元素上-->

这与交集选择器不同,交集选择器要求元素必须同时满足所有指定的条件。,就是或者的意思。

后代选择器

后代选择器是CSS中常用的一种选择器,它用于选取一个元素的所有后代元素,不论这些后代元素被嵌套的层次有多深。
语法与应用:
基本语法:后代选择器的语法格式是ancestor descendant,其中ancestor代表祖先元素,descendant代表后代元素。(用空格分割开来)

<style>
div p
{color:red;
}
</style>
表示选择所有在<div>元素内部的<p>元素的文本颜色为红色,无论它们被嵌套得多深。

具体应用:后代选择器可以用于为祖先元素内的特定后代元素设置样式。
与其他选择器的区别:后代选择器与子元素选择器不同,子元素使用>符号来指定直接子元素。而后代选择器不限制代数,它将选中所有层级的后代元素。

子元素选择器

子代选择器的使用方法是在父元素和子元素之间用大于号>隔开。这与后代选择器不同,后者使用空格来分隔选择器,会选择所有层级的后代元素。子代选择器更加具体,它只会选择那些直接作为指定元素子元素的元素。

<!--例如,如果你想要选择一个<div>元素直接包含的所有<p>元素,而不是这个<div>元素内其他元素间接包含的<p>元素,你可以使用这样的规则:-->
div > p {/* 这里是我们的样式规则 */
}
.person>a
{
color:red;
}

语法:选择器1>选择器2>选择器3>…选择器n,选择器1234…n可以是任何一种选择器。

兄弟选择器

相邻兄弟选择器(Adjacent sibling selector),是CSS中的一种选择器,它允许你选择那些与指定元素具有相同父元素并紧跟在其后面的兄弟元素。这种选择器的语法是在两个选择器之间使用加号+。
语法:选择器1+选择器2
{
}

<!--例如,如果你想要选择一个紧接在<div>元素后的<p>元素,你可以使用以下规则:-->
div+p
{
color:red;
}

通用兄弟选择器:
通用兄弟选择器的语法是使用波浪号~来表示,它位于两个选择器之间。这种选择器会选择所有与指定元素具有相同父元素的其他子元素,不论它们在HTML代码中的顺序如何。

```html
<div><p>这是一个段落。</p><span>这是一个span元素。</span><a href="#">这是一个链接。</a>
</div>
<!--我们想要选择所有<p>元素的同级元素,可以使用以下CSS规则-->
<style>
p~span,
p~a {/* 这里是你的样式规则 */
}
</style>

属性选择器

CSS属性选择器可以根据元素的特定属性或属性值来应用样式,而不仅仅是通过class和id。

属性选择器的使用方式如下:

  1. 针对具有特定属性的元素:可以简单地通过将属性名放入一对方括号中来选择具有该属性的所有元素。例如,要将所有带有title属性的元素的文本颜色变为蓝色,可以使用以下规则:
    [title] {color: blue;
    }
    <a href="https://www.example.com" title="这是一个示例网站">点击访问示例网站</a>
    <div title="hhhhh">欧买噶</div>/*选中具有title属性,且属性值以字母a开头的元素*/[title^="a"]
    {color:aliceblue;
    }/*选中具有title属性,且属性值以字母b结尾的元素*/[title$="b"]
    {color:aliceblue;
    }/*选中具有title属性,且属性值含有u的元素*/[title*="u"]
    {color:aliceblue;
    }
  2. 针对特定属性和值的元素:如果想要更精确地选择具有特定属性值的元素,可以在方括号中指定属性名和值。例如,要选择title属性值为runoob的元素,并为其添加边框样式,可以使用以下规则:
    [title=hhhhh] {border: 5px solid green;
    }<div title="hhhhh">欧买噶</div>
  3. 多值属性选择:对于包含多个值的属性,可以使用波浪号~或管道符|来匹配。例如,要选择title属性中包含hello值的元素,或者lang属性值为en的元素,可以使用以下规则:
    [title~=hello] {color: blue;
    }
    [lang|=en] {color: blue;
    }
    
  4. 在表单元素中使用:属性选择器特别适用于表单元素的样式设计,无需使用class或id即可对特定类型的输入框进行样式化。例如,要为所有required属性的输入框添加特殊样式,可以使用以下规则:
    input[required] {background-color: yellow;
    }
    

需要注意的是,IE7和IE8需要声明!DOCTYPE才支持属性选择器,而IE6及更低版本的浏览器不支持属性选择器。在使用属性选择器时,应确保目标浏览器支持该特性,或者提供适当的后备方案。

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

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

相关文章

华院计算参编《金融业人工智能平台技术要求》标准

随着人工智能技术的迅猛发展&#xff0c;金融机构正在从业务场景化向企业智能化演进&#xff0c;金融业对智能化的需求愈加迫切。为引导产业有序发展、规范行业自律、加快金融行业智能化转型&#xff0c;中国信通院依托中国人工智能产业发展联盟&#xff08;AIIA&#xff09;及…

auto的工作原理

类型推导&#xff1a; 当使用 auto 关键字声明变量时&#xff0c;编译器会根据变量初始化的表达式推导出其类型。编译器会分析初始化表达式&#xff0c;并根据表达式的类型来确定变量的类型。 类型保留&#xff1a; 编译器在编译时将 auto 关键字替换为实际的类型&#xff0c;…

CommunityToolkit.Mvvm笔记---Ioc

使用MVVM模式提高应用程序代码库中的模块化程度的最常用模式是使用某种形式的反转控制&#xff08;Ioc&#xff09;。其中最常见的解决方案是使用依赖关系注入&#xff0c;该解决方案存在于创建多个注入后端类的服务&#xff08;即以参数的形式传递给 viewmodel 构造函数&#…

ELK+Filebeat日志分析系统

一、ELK基本介绍&#xff1a; 1.ELK 简介: ELK平台是一套完整的日志集中处理解决方案(日志系统)。 将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 ELK --> ELFK --> ELFKMQ2.ELK组件介绍…

IDEA创建jsp文件具体步骤

1. 创建普通项目 2.文件->项目结构->模块&#xff0c;点击号&#xff0c;选择web 点击确认 3.配置工件 4.配置tomcat 点击确定 5.创建jsp文件&#xff0c;注意创建位置 6.然后换调试位置 注意此时不能有其他的web项目运行,否则就选不了路径 完成后运行即可

Python代码打包成exe程序

国内镜像源 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple阿里云 https://mirrors.aliyun.com/pypi/simple/豆瓣 https://pypi.douban.com/simple/ 百度云 https://mirror.baidu.com/pypi/simple/中科大 https://pypi.mirrors.ustc.edu.cn/simple/华为云 https://mirror…

Pytorch - 张量转换拼接

目录 张量转换为 numpy 数组 numpy 转换为张量 标量张量和数字的转换 张量拼接操作 张量索引操作 &#x1f606;&#x1f606;&#x1f606;感谢大家的观看&#x1f606;&#x1f606;&#x1f606; 张量转换为 numpy 数组 &#x1f50e;使用 Tensor.numpy 函数可以将张量…

Gradle JDK 和项目JDK的区别

compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget “1.8” } 在Android项目中&#xff0c;compileOptions和kotlinOptions的配置与Gradle所使用的JDK版本没有直接冲突。这些选项是用…

MySQL 使用C语言

一般使用MySQL很少用命令行&#xff0c;一般都是通过程序内部使用&#xff0c;MySQL也为不同的语言定制了不同的头文件和库函数&#xff0c;可以在自己的程序中通过包含头文件和编译时候链接库函数来使用MySQL。 现在一般安装MySQL的时候就会自动给你安装库函数和头文件。 可…

数据资产管理制度探索——浙江篇

在行政事业单位数据资产管理领域&#xff0c;浙江省以创新性思维与高质量发展的战略眼光&#xff0c;积极探索并构建了具有前瞻性和实效性的数据资产管理制度。作为财政部数据资产管理试点省份&#xff0c;浙江省财政厅与省标准化研究院强强联合&#xff0c;充分运用数据溯源、…

【报错】TypeError: Cannot read property ‘meta‘ of undefined

&#x1f608;解决思路 首先这里很明显我们能看到是缺少该参数&#xff1a;meta。 但是经过查找后发现和该参数无关。 &#x1f608;解决方法 后来我上网搜了下&#xff0c;网上的回答大部分偏向于是package.json这个文件中的tabBar.list数组对象只有一条的问题。 网上的大…

基于SpringBoot + Vue实现的租房管理系统设计与实现+毕业论文+开题报告​(包运行成功)

介绍 管理员的主要功能设计为&#xff1a;密码信息管理、注册用户管理、区域管理、出租管理等模块。 房主的主要功能设计为&#xff1a;密码信息管理、个人信息管理、订单管理等模块。 用户的主要功能设计为&#xff1a;用户登录、密码管理、出租管理、收藏管理等模块。 源码论…

数据结构---线性表

1&#xff0c;顺序表实现---动态分配 #include<stdlib.h> #define InitSize 10 typedef struct {int *data;//静态分配int length;int MaxSize; }SqList; void InitList(SqList& L) {L.data (int*)malloc(InitSize * sizeof(int));//分配空间L.length 0;L.MaxSize…

编译 dtbocfg 模块是遇到的问题

编译 dtbocfg 模块 报错1 在编译 dtbocfg.c CC [M] /home/book/imx6ull/kernal_modul/00_dtbocfg/dtbocfg.o /home/book/imx6ull/kernal_modul/00_dtbocfg/dtbocfg.c:253:1: warning: data definition has no type or storage classCONFIGFS_ATTR(dtbocfg_overlay_item_, dt…

【测试开发学习历程】python常用的模块(上)

前言&#xff1a; 感觉全是机器人给我点赞和收藏&#xff08;QWQ&#xff09;&#xff0c;能不能来个活人评论我啊&#xff0c;行行好&#xff08;QAQ&#xff09; 目录 1 模块的导入 2 随机模块-random 3 字符串模块-string 4 os模块及其常用函数 1 模块的导入 库、包、…

关于SpringCloud,你了解多少?

Why SpringCloud&#xff1f; Spring cloud 是一系列框架的有序集合。它利用 spring boot 的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用 spring boot 的开发风格做到一…

C++ 标准库中的 <algorithm> 头文件

C 标准库中的 <algorithm> 头文件包含了一系列非常有用的算法函数&#xff0c;这些函数可以用于处理容器&#xff08;如向量、列表、数组等&#xff09;中的元素。这些算法可以极大地简化编程任务&#xff0c;使代码更加简洁和易于理解。 以下是一些 <algorithm> …

论坛直击|发展新质生产力,高校怎么做?

新质生产力浪潮涌动 三大议题聚焦高校人才培养 今年全国两会的政府工作报告将“大力推进现代化产业体系建设&#xff0c;加快发展新质生产力”列在2024年政府工作任务首位&#xff0c;发展新质生产力的先导是培养拔尖创新人才&#xff0c;高等教育改革必须以立德树人为根本任…

带你从BIOS 小工到年薪百万 之 sense amplifier 的作用以及MRC 如何初始化它

做过BIOS 的同学&#xff0c;肯定看过这张图片 对世界充满好奇心的你&#xff0c;是否想过 其中 Sense amplifier 是做什么用的&#xff1f; 是如何工作的&#xff1f; BIOS 又是如何训练它的&#xff1f; 明天接着写

[C++11] 初始化语法、explicit关键字、final override关键字、delete default关键字

说明&#xff1a;C11 引入了初始化语法、explicit关键字、final && override关键字、delete && default关键字 等新特性&#xff0c;旨在改善语言的功能性、安全性和表达能力。具体说明如下&#xff1a; 引入初始化列表和统一的初始化语法的原因&#xff1a;在…