常见的CSS选择器概要

已于 2023-05-16 20:19:25 修改
阅读量245 收藏 4
点赞数 4
文章标签： css html 前端 css3
于 2023-05-16 20:05:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Girrzy/article/details/130685299
版权

css选择器

CSS 选择器用于选取要设置样式的 HTML 元素。

我们可将CSS选择器分为五大类：

  • 基础选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

1.基础选择器

首先选择器一般放于style标签内使用

基础选择器包括一下四种：

  • 标签选择器
  • ID选择器
  • 类选择器
  • 通配符选择器

优先级：ID选择器>类选择器>标签选择器>通配符选择器

1.1ID选择器

ID选择器可以为标有id属性的HTML元素进行样式的修饰

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>ID选择器</title>
    <style>
        #one{
            color: red;
        }
    </style>
</head>
<body>
    <p id="one"></p>
</body>
</html>

1.2类选择器

类选择器选择特定含有class属性的HTML元素

引用时格式为 .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>
        .tow{
            color: red;
        }
    </style>
</head>
<body>
    <p class="tow">是类标签在修饰我</p>
</body>
</html>

1.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>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>是标签选择器在修饰我</p>
</body>
</html>

1.4通配符选择器

通配符选择器又叫通用选择器

因为修饰所有的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>
</head>
<body>
    <div>是通配符选择器在修饰我们</div>
    <p>是通配符选择器在修饰我们</p>
    <ul>
        <li>是通配符选择器在修饰我们</li>
        <li>是通配符选择器在修饰我们</li>
        <li>是通配符选择器在修饰我们</li>
    </ul>
</body>
</html>

2.组合选择器

组合选择器顾名思义，元素间存在一定的关系进行相互联系

2.1子代选择器

子代选择器则是选择指定元素的所有子元素

格式如 div > p{} (div元素内所有的子代p元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        div>p{color: green;}
    </style>
</head>
<body>
    <p>这是段落标签1</p>
    <h1>这是标题标签1</h1>
    <div>
        <p>这是段落标签2</p>
        <h1 class="h1">这是标题标签2</h1>
        <section><p>这是段落标签3</p></section><!--是子代，非后代！-->
        <p>这是段落标签4</p>
        <h1>这是标题标签3</h1>
        <p>这是段落标签5</p>
    </div>
</body>
</html>

效果如下图

 可见段落标签3的样式并没有发生改变，可见段落标签3并非子代元素 

2.2后代选择器

后代选择器则是选择指定元素的所有后代元素

格式如 div p{} (div元素内所有的p元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        div p{color: green;}
    </style>
</head>
<body>
    <p>这是段落标签1</p>
    <h1>这是标题标签1</h1>
    <div>
        <p>这是段落标签2</p>
        <h1 class="h1">这是标题标签2</h1>
        <section><p>这是段落标签3</p></section><!--是子代，非后代！-->
        <p>这是段落标签4</p>
        <h1>这是标题标签3</h1>
        <p>这是段落标签5</p>
    </div>
</body>
</html>

效果如下图 

此时段落标签3样式发生改变，可见后代选择器对所有后代都生效。 

2.3兄弟选择器

2.3.1相邻兄弟选择器

格式：div + p{}

意为div的元素的紧邻的下一个同级的p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        div + p{color: green;}
    </style>
</head>
<body>
    <p>这是段落标签1</p>
    <h1>这是标题标签1</h1>
    <div>
        <p>这是段落标签2</p>
        <h1>这是标题标签2</h1>
        <section><p>这是段落标签3</p></section><!--是子代，非后代！-->
    </div>
    <p>这是段落标签4</p>
    <h1>这是标题标签3</h1>
</body>
</html>

可见div内的p标签并没有发生变化，段落标签4样式发生变化

ps：必须为紧邻的下一个，若间隔一个其他元素，则无效

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        div + h1{color: green;}
    </style>
</head>
<body>
    <p>这是段落标签1</p>
    <h1>这是标题标签1</h1>
    <div>
        <p>这是段落标签2</p>
        <h1>这是标题标签2</h1>
        <section><p>这是段落标签3</p></section><!--是子代，非后代！-->
    </div>
    <p>这是段落标签4</p>
    <h1>这是标题标签3</h1>
</body>
</html>

 标题标签3是否会发生变化呢？

答案是不会！

2.3.2通用兄弟选择器

格式：div~p{}

意为div元素后的所有同级p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        div ~ h1{color: green;}
    </style>
</head>
<body>
    <p>这是段落标签1</p>
    <h1>这是标题标签1</h1>
    <div>
        <p>这是段落标签2</p>
        <h1>这是标题标签2</h1>
        <section><p>这是段落标签3</p></section><!--是子代，非后代！-->
    </div>
    <p>这是段落标签4</p>
    <h1>这是标题标签3</h1>
</body>
</html>

 此时，标题标签3的样式则发生了变化

3.属性选择器

下面均用一码一图的形式给大家展示

格式1

div[class]

div中所有含class属性的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[class]{
            color: rgb(240, 44, 224);
        }
    </style>
</head>
<body>
    <div class="one">div容器1</div>
    <div class="tow">div容器2</div>
    <div title="three">div容器3</div>
    <h1 class="one">标题标签1</h1>
</body>
</html>

 

 格式2

div[class="one"]

div中含有class属性值为one的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[class="one"]{
            color: rgb(240, 44, 224);
        }
    </style>
</head>
<body>
    <div class="one">div容器1</div>
    <div class="tow">div容器2</div>
    <div title="three">div容器3</div>
    <h1 class="one">标题标签1</h1>
</body>
</html>

 

 格式3

div[class^=t]

div元素中class属性值为t开头的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[class^="t"]{
            color: rgb(240, 44, 224);
        }
    </style>
</head>
<body>
    <div class="one">div容器1</div>
    <div class="tow">div容器2</div>
    <div title="three">div容器3</div>
    <h1 class="one">标题标签1</h1>
</body>
</html>

 

 格式4

div[class*=o]

div元素中class值含有o的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[class*="o"]{
            color: rgb(240, 44, 224);
        }
    </style>
</head>
<body>
    <div class="one">div容器1</div>
    <div class="tow">div容器2</div>
    <div title="three">div容器3</div>
    <h1 class="one">标题标签1</h1>
</body>
</html>

 格式5

div[title$="ee"]

div元素中title属性值结尾是ee的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[title$="ee"]{
            color: rgb(240, 44, 224);
        }
    </style>
</head>
<body>
    <div class="one">div容器1</div>
    <div class="tow">div容器2</div>
    <div title="three">div容器3</div>
    <h1 class="one">标题标签1</h1>
</body>
</html>

4.伪类选择器

伪类用于定义元素在不同状态下的不同样式。

超链接点击之前----- :link

超链接被访问之后----- :visited

鼠标悬停在超链接上时----- :hover

超链接被激活时(点击但为松开)----- :active

顺序一定，不能改变！！！

<!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>
        /*点击前是红色*/
        a:link{
            color: red;
        }
        /*点击后是橙色*/
        a:visited{
            color: orange;
        }
        /*悬停时时绿色*/
        a:hover{
            color: green;
        }
        /*激活时时蓝色*/
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">戳我</a>
</body>
</html>

5.伪元素选择器

伪元素用于设置指定部分的样式

p：：before{}  在p元素前添加一些内容

p：：after{}     在p元素后添加一些内容

<!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>
        p::before{
            content: "张三说";
            color: green;
        }
        p::after{
            content: "对不对";
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    
</body>
</html>

伪元素一定要配合content：在指定位置添加需要的内容

p::first-letter   选中每个p元素的第一个字母

p::first-line     选择每个p元素的第一行

<!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>
        p::first-letter{
            color: red;
            font-size: bold;
        }
        p::first-line{
            color: green;
            font-size: bolder;
        }
    </style>
</head>
<body>
    <p>这是第一段的第一行<br>
        这是第一段的第二行
    </p>
    <p>这是第二段的第一行<br>
        这是第二段的第二行
    </p>
</body>
</html>

 

Girrzy
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【CSS】基础选择器，包括标签选择器、类选择器、id选择器和通配符选择器...
翼同学
07-27 2534
CSS基础入门笔记，笔记内容为基础选择器，包括标签选择器，类选择器，id选择器，通用选择器
CSS样式引入方式&选择器
qq_50646296的博客
06-05 316
引入方式 CSS的引入方式一般有四种，分别是行内样式，内嵌样式，外链样式，导入样式，具体使用哪种可根据具体情况和个人习惯而定 行内样式 在标签里面结合style,在加上相对应的样式 <pstyle="color:red">这是一个p标签</p> 内嵌样式 在页面样式里面，在head标签里面使用style标签，在style标签里面设置样式 <!DOCTYPE html> <html lang="en"> <head> ...
【第三篇】CSS选择器之组合选择器
Ethan's Blog
07-16 2168
介绍CSS选择器中的组合选择器部分，包括后代选择器，子代选择器，相邻兄弟选择器，兄弟选择器和复合选择器。
【CSS】组合选择器
小秀的博客
08-30 973
组合选择器（Combinator Selectors）是一种CSS选择器，用于选择满足多个选择器条件的特定元素。组合选择器由两个或多个简单选择器组合而成，它们描述了元素之间的关系。组合选择器允许您在选择元素时考虑它们之间的关系，从而更精确地应用样式。组合选择器通常与其他类型的选择器（如类、ID、属性选择器等）一起使用，以构建复杂的选择规则，从而实现各种不同的样式和布局效果。：选择指定元素内部的所有符合条件的后代元素。：选择与指定元素在同一层级的所有后续兄弟元素。：选择指定元素的直接子元素。
css组合选择器_CSS选择器：组合器
culi3118的博客
08-20 676
css组合选择器The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here. 以下是Tiffany B. Brown所著《 CSS Maste...
CSS_01_选择器
pre_eminent的JAVA学习园地
03-10 408
CSS 指层叠样式表（Cascading Style Sheets）。 在我们的 CSS 教程中，您将学习如何使用 CSS 同时控制 整个站点的 样式和布局。 通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！手册说明:CSS教程简介本教程主要描述如何通过CSS来大大提升网页开发的工作效率！在我们的 CSS 教程中，您会学到如何使用 C...
2023前端HTML+CSS最全面试题和答案汇总
02-09
4、css 选择器有哪些，权重是什么样的 5、CSS3动画知道吗，实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一...
01-HTML-CSS个人听课笔记
10-13
内容概要：HTML5 新特性、语义化、CSS 选择器及优先级、position 属性：relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：...
小米商城（HTML+CSS）网页设计期末作业
01-04
2.css选择器和属性；3.css动画的使用；4.div+css布局模式。 阅读建议：这份资源是html+css的基本应用，能够非常好地帮助大家将学习到的HTML和css内容应用到实际中去。对于学生而言，既满足了期末网页设计的需要，又...
html+js+css实现一个鲜花商城
07-02
内容概要 本项目以构建一个美观且功能完备的“在线鲜花商城”为蓝本，全面融合HTML、CSS和JavaScript三大前端核心技术。...项目不仅仅关注界面的布局与美化，更重视于...CSS技能：运用选择器、盒模型、布局技术如Flexbox等
百度一下页面，纯HTML5加css3
04-26
在手写HTML5与css3 源码的过程中会摘取整体代码中的核心逻辑，简化代码实现过程，保留核心功能，例如：绝对定位，相对定位，子类选择器，常见样式修改等。 适合人群：具备一定编程基础，学习前端一个月左右的开发...
css选择器---组合选择器
热门推荐
weixin_45087771的博客
05-20 1万+
2、组合选择器 （1）包含选择器 格式：包含选择符名 选择符{样式} 例：<html> <head> <meta charset="utf-8"> <title>CSS基础</title> <style type="text/css"> #header p { font-size:14px;} #main p {font-si...
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 520
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 323
网页隐藏版一行小说阅读器
Tailwind CSS常见用法
solocao的专栏
07-18 288
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
编织文字的魔法：探索WebKit的CSS文本效果
2401_85341950的博客
07-19 708
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
WebKit 引擎：CSS 悬停效果的魔法师
2401_85702623的博客
07-19 706
WebKit 引擎对 CSS 悬停效果的支持非常全面，从基本的颜色变化到复杂的动画效果，都能通过 CSS 实现。通过本文的介绍和代码示例，希望读者能够对 CSS 悬停效果有更深入的理解，并能够在自己的项目中应用这些技术。在这个例子中，当用户将鼠标悬停在链接上时，链接的文字颜色会变为红色。在这个例子中，当鼠标悬停在按钮上时，按钮会有一个轻微的阴影效果。这个例子中，鼠标悬停在按钮上时，按钮会放大到原来的110%。这个例子中，鼠标悬停在按钮上时，按钮的边框会变为蓝色。属性，可以设置属性变化的持续时间和效果类型。
CSS 计数器：WebKit 的样式增强术
最新发布
2402_85761468的博客
07-19 1195
CSS 计数器是一种可以自动递增的计数器，它们可以被定义在 CSS 中，并在 HTML 元素中引用。计数器可以跨多个元素和文档部分进行维护，使得文档结构和样式的维护变得更加简单。/* 在文档开头定义计数器 */body {/* 定义名为 "section" 的计数器 */

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值