devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-04-16 07:28:54

赞

踩

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

前端CSS基础2（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>
        #love{
            color: red;
        }
        #dislike{
            color:black;
        }
    </style>
   </head>
<body>
    <h2 id="love">我爱你</h2>
    <h2 id="dislike">我不喜欢你</h2>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

注意：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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

标签选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

群组选择器

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

通配选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

层次选择器

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

属性选择器

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

伪类选择器

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

伪元素选择器

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

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

CSS复合选择器

交集选择器

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

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

div.classA {
  color: red;
}

  • 1
  • 2
  • 3

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

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

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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

多个选择器

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

并集选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

后代选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

子元素选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

兄弟选择器

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

属性选择器

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;
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
  2. 针对特定属性和值的元素：如果想要更精确地选择具有特定属性值的元素，可以在方括号中指定属性名和值。例如，要选择title属性值为runoob的元素，并为其添加边框样式，可以使用以下规则：
    [title=hhhhh] {
  border: 5px solid green;
}
   <div title="hhhhh">欧买噶</div>
   

    • 1
    • 2
    • 3
    • 4
    • 5
  3. 多值属性选择：对于包含多个值的属性，可以使用波浪号~或管道符|来匹配。例如，要选择title属性中包含hello值的元素，或者lang属性值为en的元素，可以使用以下规则：
    [title~=hello] {
  color: blue;
}
[lang|=en] {
  color: blue;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  4. 在表单元素中使用：属性选择器特别适用于表单元素的样式设计，无需使用class或id即可对特定类型的输入框进行样式化。例如，要为所有required属性的输入框添加特殊样式，可以使用以下规则：
    input[required] {
  background-color: yellow;
}

    • 1
    • 2
    • 3

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/433022
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号