CSS的基本选择器和关系选择器语法教程！

于 2024-10-09 23:09:28 发布
阅读量666 收藏 6
点赞数 11
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CH040708/article/details/142791760
版权

#CSS中的基本选择器和关系选择器常用于可以实现复杂而精细的页面布局和样式效果。比如，当你想要为特定页面区域内的元素应用独特样式时，关系选择器就能发挥很大的作用，帮助你准确地定位到所需的元素，基本选择器提供了对常见元素类型、类和 ID 的直接控制#

一、基本选择器

1.id选择器

①前言

  • 根据元素的 id  属性的值进行选择（id名是唯一一个）常用 （#id）使用。
  • ⭐在选择器中，id选择器 优先级最高

②id选择器语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>

    <style>  
     /* id选择器 */
      #jinyon2{
         color: red;
      } 
    </style>
 </head>
<body>
    
    <h1 class="book_name"id="jinyon2"> 《天龙八部》</h1>
    <ul class="huimu">第一回
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
    
</body>
</html>
运行代码后如下：

2.类选择器

①前言

  • 通过元素的 class  属性的值来选择元素，常用（.class）使用
  • ⭐在选择器中，类选择器优先级处于中间。

②类选择器语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>

    /* 类选择器 */
      .book_name{
        color: brown;
     }

    </style>
</head>
<body>
    <h1 class="book_name" id="jinyon1"> 《书剑恩仇录》</h1>
    <ul>第一章
        <li></li>
        <li></li>
    </ul>
    <h1 class="book_name"id="jinyon2"> 《天龙八部》</h1>
    <ul class="huimu">第一回
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
</html>
运行代码后如下

3.标签选择器

①前言

  • 标签选择器是通过 HTML 元素的标签名来选择元素的，可以快速选择大量相同类型的元素。
  • ⭐在选择器中，标签选择器优先级处于中间。

②标签选择器语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>

    /* 标签选择器 */
      h1{
        color: blue;
       }  
    </style>

</head>
<body>
    <h1 class="book_name"id="jinyon3"> 《书剑恩仇录碧血剑》</h1>
        <li></li>
        <li></li>
    </ul>
</body>
运行代码后如下

4.交集选择器

①前言

  • 常用于选择同时具有多个指定类、ID 或其他属性的特定元素。
  • 由两个选择器紧密相连组成，中间没有空格。

②交集选择器的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>

     /* 交集选择器 */
      ul.huimu{
        color: aquamarine;
     } 
      h1#jinyon2{
        color: red;
     } 

</head>
<body>
    <h1 class="book_name"id="jinyon2"> 《天龙八部》</h1>
    <ul class="huimu">第一回
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
运行代码后如下

5.并集选择器

①前言

  • 并集选择器用于同时选择多个不同的选择器所匹配的元素。
  • 在多个选择器之间用逗号分隔。

②并集选择器的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>

     /* 并集选择器 */
     #jinyon1,#jinyon2,#jinyon3{
        color: red;
     }
    #jinyon1{
        font-size: 30px;
    }
    #jinyon2{
        font-size: 20px;
    }
    #jinyon3{
        font-size: 40px;
    } 

</head>
<body>
    <h1 class="book_name" id="jinyon1"> 《书剑恩仇录》</h1>
    <ul>第一章
        <li></li>
        <li></li>
    </ul>
    <h1 class="book_name"id="jinyon2"> 《天龙八部》</h1>
    <ul class="huimu">第一回
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
    <h1 class="book_name"id="jinyon3"> 《书剑恩仇录碧血剑》</h1>
        <li></li>
        <li></li>
    </ul>
</body>
运行代码后如下

二、关系选择器

1.后代选择器

①前言

  • 后代选择器（空格） ：选择后代元素（包括子元素、孙元素等等），如选择A中包含的B元素，<ul>中的< li >.
  • 在选择器中，后代选择器可以跨代.

②后代选择器语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
     /* 后代选择器 (可跨代） */
    ul li  #first_section{
       color: red;
    }
   </style>

</head>
<body>
    <h1 class="header" > 《书剑恩仇录》</h1>
    <ul>第一章
        <li>
            <h6 id="first_section">第一节</h6>
        </li>
        <li>
            <h6 id="second_section">第二节</h6>
        </li>
        <li>
            <h6 id="third_section">第三节</h6>
        </li>
    </ul>
</body>
</html>
运行代码后如下

2.子代选择器

①前言

  • 选择直接子元素。
  • 例如li > #类元素{color: green; }并将其改变颜色。

②子代选择器语法的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    /* 子代选择器 */
    li>#second_section{
    color: green;
    } 

    </style>

</head>
<body>
    <h1 class="header" > 《书剑恩仇录》</h1>
    <ul>第一章
        <li>
            <h6 id="first_section">第一节</h6>
        </li>
        <li>
            <h6 id="second_section">第二节</h6>
        </li>
        <li>
            <h6 id="third_section">第三节</h6>
        </li>
    </ul>
</body>
</html>
运行代码后如下

3.相邻兄弟选择器

①前言

  • 相邻兄弟选择题选择紧接在指定元素之后的第一个兄弟元素。
  • 例如， h1 +ui{ color: rgb;  }，紧跟在 <h1>  元素后面的第<ul>  元素将具有改变其颜色。

②相邻兄弟选择器的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    /* 相邻兄弟选择器 */
    h1+ul{
     color: rgb(34, 185, 190);
    } 
    </style>

</head>
<body>
    <h1 class="header" > 《书剑恩仇录》</h1>
    <ul>第一章
        <li>
            <h6 id="first_section">第一节</h6>
        </li>
        <li>
            <h6 id="second_section">第二节</h6>
        </li>
        <li>
            <h6 id="third_section">第三节</h6>
        </li>
    </ul>
</body>
</html>
运行代码后如下

4.通用兄弟选择器

①前言

  • 通用兄弟选择器选择在指定元素之后的所有兄弟元素.
  • h1 ~li{ color: brown;; }  ， <h1>  元素后面的所有 <li>  元素都会改变其颜色。

②通用选择器的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    /* 通用兄弟选择器 */
     h1~ul{
    color: brown;
    } 
    </style>

</head>
<body>
    <h1 class="header" > 《书剑恩仇录》</h1>
    <ul>第一章
        <li>
            <h6 id="first_section">第一节</h6>
        </li>
        <li>
            <h6 id="second_section">第二节</h6>
        </li>
        <li>
            <h6 id="third_section">第三节</h6>
        </li>
    </ul>
</body>
</html>
运行代码后如下

#希望以上的介绍能让你对 CSS 中的关系选择器和基本选择器有更清晰的理解和掌握，从而更好地进行网页样式的设计和开发!

CH040708
关注
【CSS】关系选择器
luckyboy!的博客
08-19 2907
关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。
02-CSS-语法和选择器
记录java学习日常~
05-13 1200
如果有多个选择器针对同一个元素定义了不同的样式，那么拥有 ID 选择器的规则将覆盖元素选择器的规则。需要注意的是，由于通用选择器能匹配到 HTML 中的所有标签，因此在代码中大量滥用通用选择器会导致 CSS 选择器的匹配过程变慢，影响页面性能。利用元素选择器，可以控制某个页面或整个网站内的某类 HTML 元素的样式，这些元素可以是段落、标题、图像、表格等标准的 HTML 元素。元素选择器根据元素名称来选择 HTML 元素。元素选择器会选择文档中所有符合条件的元素，并将相同的样式应用于所有选中元素。
css--关系选择器
MondayCui的博客
09-14 209
父元素 - 直接包含子元素的元素叫做父元素 子元素 - 直接被父元素包含的元素是子元素 祖先元素 - 直接或间接包含后代元素的元素叫做祖先元素 - 一个元素的父元素也是它的祖先元素 后代元素 - 直接或间接被祖先元素包含的元素叫做后代元素 - 子元素也是后代元素 兄弟元素 - 拥有相同父元素的元素是兄弟元素 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素 <!DOCTYPE htm...
css_关系选择器
weixin_42371832的博客
08-14 176
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #frist p{/*包...
CSS_关系选择器
qq_55961861的博客
08-09 203
CSS_关系选择器！
css关系选择器
dayu5992的博客
12-20 166
1.包含选择符（E F） 选择所有被E元素包含的F元素，中间用空格隔开示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{color: red;}...
HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器
最新发布
09-26
html----HTML+CSS基础教程(课件PPT版)----介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择器，以及它们的基本用法。
HTML 学习记录3.2 CSS基础语法 选择器 创建形式
01-08
【CSS基础语法与选择器详解】 CSS，全称为层叠样式表（Cascading Style Sheets），是用于控制HTML或XML文档呈现样式的计算机语言。它为HTML内容提供了丰富的外观和布局设计，使得网页设计更加灵活多样。在HTML中，...
CSS基本语法与基本选择器
weixin_43641202的博客
03-26 1215
CSS什么是CSS?CSS的基本语法行内样式内部样式表外部样式表 什么是CSS? css全称为层叠样式表或级联样式表。 用于HTML中，对元素设置样式。 CSS的基本语法 CSS规则由两个部分构成，即选择器和声明。 声明必须放在一对大括号“{ }”中，可以是一条或多条。 每条声明由属性和值的组成，属性和值之间用冒号分开，每条声明以英文分号结尾。选择器 {属性1:值1; 属性2:值2; …} 例如 h1{ font-size: 12px; color: black; } 在html中引入
CSS 属性选择器_动力节点Java学院整理
09-24
在CSS中，属性选择器的基本语法是以方括号`[]`包裹属性名。例如，要选择所有具有`title`属性的元素，我们可以使用以下选择器： ```css [title] { color: red; } ``` 这将使所有设置了`title`属性的元素的文字颜色...
CSS关系选择器
zhangeer的博客
10-12 484
CSS关系选择器，元素之间的关系，父子关系，祖先后代关系，兄弟关系，子元素选择器，后代选择器，选择下一个兄弟(仅挨着我的)选择器，选择下面所有的兄弟(前面的不选)
选择器的结构关系
dixi7825的博客
12-20 343
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 &...
CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）
qq_55006020的博客
06-27 2472
关系选择器
CSS之关系选择器、属性选择器、伪类选择器
python全栈
01-15 499
一、关系选择器 后代选择器：只要是这个元素的后代，样式都会发生变化，div下面的所有h1标签样式都会改变 关系选择器：子代选择器，只改变子标签的样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*后代选择器：只要是这个元素的后代，样式都会发生变化
CSS中的多种关系选择器
m0_74742670的博客
09-20 610
选择进更E元素后的F元素，用+号来表示，选择相邻的第一个兄弟元素。选择E元素之后的所有兄弟元素F，用~符号表示。子元素F，对更深一层的元素不起作用，用>符号表示。选择所有被E元素包含的F元素，中间用空格隔开。选择所有作为E元素的。
CSS样式表详解：类选择器与基本语法
本文主要介绍了CSS样式表的基本概念、应用、语法和选择器，...掌握CSS选择器的使用，尤其是类选择器，对于高效地管理和定制网页样式至关重要。通过熟练运用CSS，我们可以实现更加灵活和精细的网页设计，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值