前端CSS基础2（CSS基本选择器和复合选择器）

embedded/2024/12/23 5:54:32/

前端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. 布局属性：如display、position、float等，它们影响着元素在页面上的布局。
  4. 尺寸属性：包括width、height、margin、padding等，这些属性决定了元素的尺寸和间距。
  5. 边框属性：像border-style、border-width、border-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>css">#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>css">.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>css">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>css">
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>css">
p~span,
p~a {/* 这里是你的样式规则 */
}
</style>

属性选择器

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

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

  1. 针对具有特定属性的元素：可以简单地通过将属性名放入一对方括号中来选择具有该属性的所有元素。例如，要将所有带有title属性的元素的文本颜色变为蓝色，可以使用以下规则：
    css">[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的元素，并为其添加边框样式，可以使用以下规则：
    css">[title=hhhhh] {border: 5px solid green;
}<div title="hhhhh">欧买噶</div>
  3. 多值属性选择：对于包含多个值的属性，可以使用波浪号~或管道符|来匹配。例如，要选择title属性中包含hello值的元素，或者lang属性值为en的元素，可以使用以下规则：
    css">[title~=hello] {color: blue;
}
[lang|=en] {color: blue;
}
  4. 在表单元素中使用：属性选择器特别适用于表单元素的样式设计，无需使用class或id即可对特定类型的输入框进行样式化。例如，要为所有required属性的输入框添加特殊样式，可以使用以下规则：
    css">input[required] {background-color: yellow;
}

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


http://www.ppmy.cn/embedded/1774.html

相关文章

【代码随想录】【单调栈】day58:每日温度和下一个最大元素

【代码随想录】【单调栈】day58:每日温度和下一个最大元素

单调栈&#xff1a;栈里的元素是递增或者是递减的 适用于寻找当前元素的右边或左边第一个大的或者第一个小的元素&#xff0c;计算那个元素和当前元素的距离 如果是寻找大的元素&#xff0c;就构造递增的单调栈&#xff08;从栈头到栈底&#xff09;保证栈头是最小的 每日温…
阅读更多...
java通过minio下载pdf附件

java通过minio下载pdf附件

java通过minio下载pdf附件 文章目录 java通过minio下载pdf附件一、java通过minio下载pdf附件getObject方法 一、java通过minio下载pdf附件getObject方法 Resourceprivate MinioClient minioClient;/*** 通过minio下载pdf附件* param fileName:"sdgregrtgfr.pdf" 为…
阅读更多...
LeetCode 面试题 02.07. 链表相交

LeetCode 面试题 02.07. 链表相交

LeetCode 面试题 02.07. 链表相交 1、题目 力扣题目链接&#xff1a;面试题 02.07. 链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交…
阅读更多...
阿里云2核2G服务器可以干什么？

阿里云2核2G服务器可以干什么？

阿里云2核2G服务器可以干什么&#xff1f;2核2G云服务器可以用来搭建网站、爬虫、邮件服务器、接口服务器、个人博客、企业官网、数据库应用、大数据计算、AI人工智能、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;目前2核2G阿里云服务器61元一年&#xff0c;老…
阅读更多...
简述Kafka的高可靠性

简述Kafka的高可靠性

什么叫可靠性&#xff1f; 大家都知道&#xff0c;系统架构有三高&#xff1a;「高性能、高并发和高可用」&#xff0c;三者的重要性不言而喻。 对于任意系统&#xff0c;想要同时满足三高都是一件非常困难的事情&#xff0c;大型业务系统或者传统中间件都会搭建复杂的架构来…
阅读更多...
webSocket + springboot+vue3用法

webSocket + springboot+vue3用法

领导安排个任务&#xff0c;大屏显示数据&#xff0c;要与后台数据一致&#xff0c;所以用到了websocket&#xff0c;涉及的前后端代码整理如下&#xff0c;希望对大家有所帮助。 后端代码 pom文件添加依赖 <!--websocket依赖--> <dependency><groupId>or…
阅读更多...
数据库-Redis（17）

数据库-Redis（17）

目录 81.什么是Redis Cluster&#xff1f; 82.说说Redis哈希槽的概念&#xff1f;为什么是16384个&#xff1f; 83.Redis集群会有写操作丢失吗&#xff1f;为什么&#xff1f; 84.Redis客户端有哪些&#xff1f; 85.Redis如何做大数据量插入&#xff1f; 81.什么是Redis C…
阅读更多...
Unity - ScrollView被内部的IDragHandler等接口对象阻挡滑动问题

Unity - ScrollView被内部的IDragHandler等接口对象阻挡滑动问题

原因&#xff1a;滑动冲突&#xff0c;内部的Image会阻挡Input 解决办法&#xff1a; 在内部的onDrag、onBeginDrag、onEndDrag内主动调用 GameObject.Find("Scroll View").GetComponent<ScrollRect>().OnBeginDrag(eventData); GameObject.Find("Scr…
阅读更多...
最新文章

Copyright @ 2022~2023