css3新手入门(1)基础选择器（css3的基本选择器有哪几种?语法规则是什么）

zhezhongyun 2025-05-02 14:49 5 浏览

今天学习下css3的基础选择器类型，只有使用选择器选中了元素，才可把样式应用于元素上，所以选择器对我们来说是至关重要的。选择器允许开发者根据元素的类型、类名、ID等属性来选择性地应用样式。

下面是一个包含HTML和CSS代码的例子，展示了CSS3中的几种基础选择器如何工作

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>CSS3 基础选择器示例</title>  
<style>  
    /* 元素选择器 */  
    p {  
        color: blue;  
    }  
  
    /* 类选择器 */  
    .highlight {  
        background-color: yellow;  
    }  
  
    /* ID选择器 */  
    #unique-id {  
        color: red;  
    }  
  
    /* 后代选择器 */  
    div p {  
        font-style: italic;  
    }  
  
    /* 子选择器 */  
    ul > li {  
        list-style-type: none;  
    }  
  
    /* 相邻兄弟选择器 */  
    h1 + p {  
        font-size: 18px;  
    }  
  
    /* 通用兄弟选择器 */  
    h1 ~ p {  
        margin-top: 20px;  
    }  
</style>  
</head>  
<body>  
  
<p>这是一个普通的段落，应用了元素选择器。</p>  
  
<p class="highlight">这是一个高亮显示的段落，应用了类选择器。</p>  
  
<div id="unique-id">这是一个ID为unique-id的div，它的文本应用了ID选择器。</div>  
  
<div>  
    <p>这个段落位于div内部，应用了后代选择器。</p>  
</div>  
  
<ul>  
    <li>列表项1，应用了子选择器。</li>  
    <li>列表项2，也应用了子选择器。</li>  
</ul>  
  
<h1>标题</h1>  
<p>这个段落紧接在h1之后，应用了相邻兄弟选择器。</p>  
<p>这个段落也在h1之后，但由于不是紧接的，所以只应用了通用兄弟选择器的样式。</p>  
  
</body>  
</html>

在这个例子中，我们有一个HTML文档，其中包含了各种元素，并且针对这些元素使用了CSS3中的基础选择器来应用样式。

元素选择器：所有的<p>元素都会应用蓝色文本颜色。
类选择器：具有class="highlight"的<p>元素会有黄色背景。
ID选择器：ID为unique-id的<div>元素内的文本会变成红色。
后代选择器：位于<div>内部的<p>元素会以斜体显示。
子选择器：<ul>元素的直接子<li>元素将不会有列表样式（即无圆点或数字）。
相邻兄弟选择器：紧接在<h1>之后的<p>元素会有18px的字体大小。
通用兄弟选择器：所有在<h1>之后的<p>元素都会有20px的顶部外边距，但由于相邻兄弟选择器更具体，紧接在<h1>之后的<p>还会受到它的影响（这里两个选择器都作用于相同的元素，但样式会累加或根据CSS的层叠规则来应用）。不过，在这个特定的例子中，字体大小只由相邻兄弟选择器设置，顶部外边距则由通用兄弟选择器设置。

HTML meta charset 属性

上一篇：CSS面试题:CSS实现自适应正方形以及等宽高比矩形
下一篇：css——定位（css定位总结）

css3新手入门(1)基础选择器（css3的基本选择器有哪几种?语法规则是什么）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?