HTML和CSS —— 4、CSS选择器

最新推荐文章于 2024-10-15 22:21:38 发布
最新推荐文章于 2024-10-15 22:21:38 发布
阅读量118 收藏
点赞数
分类专栏： HTML和CSS笔记 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46291458/article/details/108006780
版权

CSS选择器

一、常用选择器

1.1 元素选择器

​ 作用：根据标签名来选中指定的元素

​ 语法：标签名{}

​ 例子：p{} h1{} div{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素选择器</title>
        <style>
            p{
                color:red;
            }
            h1{
                color:orange;
            }
            div{
                color:green;
            }
        </style>
    </head>
    <body>
        <p>
            这是一哥p标签
        </p>
        <h1>
            这是一个h1标签
        </h1>
        <div>
            这是一个div标签
        </div>
    </body>
</html>

1.2 id选择器

​ 作用：根据元素的id属性选中一个元素

​ 语法：#id属性值{}

​ 例子：#box{} #red{}

<!DOCTOPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            #red{
                color:red;
            }
            #green{
                color:green;
            }
        </style>
    </head>
    <body>
        <p id="red">
            这是一个id为red的p标签
        </p>
         <p id="green">
            这是一个id为green的p标签
        </p>
    </body>
</html>

1.3 class选择器

​ 作用：根据元素的class属性值选中一组元素

​ 语法：.class属性值

class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>class选择器</title>
        <style>
            .aaa{
            	color:red;
            }
            .bbb{
            	color:green;
            }
            .ccc{
            	color:orange;
            }
        </style>
    </head>
    <body>
        <p class="aaa">
            这是一个P标签
        </p>
        <span class="bbb">
        	这是一个span标签
        </span>
        <div class="ccc">
            这是一个div标签
        </div>
        <p class="eee aaa">
            这是一个p标签
        </p>
    </body>
</html>

1.4 通配选择器

​ 作用：选中页面中的多有元素

​ 语法：*

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通配选择器</title>
        <style>
            *{
            	color:red;
            }
        </style>
    </head>
    <body>
        <p>
            这是一个p标签
        </p>
        <span>
        这是一个span标签
        </span>
        <div>
            这是一个div标签
        </div>
    </body>
</html>

二、复合选择器

2.1 交集选择器

​ 作用：选中同时复合多个条件的元素

​ 语法：选择器1选择器2选择器3选择器n{}

​ 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <style>
            div.red{
				color:red;
            }
        </style>
    </head>
    <body>
        <div class="red">
            这是一个class为red的div标签
        </div>
        <p class="red">
            这是一个class为red的p标签
        </p>
        <div class="green">
            这是一个class为green的div标签
        </div>
    </body>
</html>

2.2 并集选择器

​ 作用：同时选择多个选择器对应的元素

​ 语法：选择器1,选择器2,选择器3,选择器n{}

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>并集选择器</title>
    <head>
        <style>
            h1,p{
                color:red;
            }
        </style>
    </head>
    <body>
        <div class="red">
            这是一个class为red的div标签
            <p>
                这是一个p标签
            </p>
        </div>
        <span class="red">这是一个class为red的span标签</span>
        <h1>
            这是一个h1标签
        </h1>
        <p>
            这是一个p标签
        </p>
    </body>
</html>

三、关系选择器

  • 父元素：直接包含子元素的元素叫做父元素

  • 子元素：直接被父元素包含的元素是子元素

  • 祖先元素：直接或间接包含后代元素的元素叫做祖先元素

​ 一个元素的父元素也是它的祖先元素

  • 后代元素：直接或间接被祖先元素包含的元素叫做后代元素

    ​ 子元素也是后代元素

  • 兄弟元素：拥有相同父元素的元素是兄弟元素

3.1 子类选择器

​ 作用：选中指定父元素的指定子元素(只能一级一级指定)

​ 语法：父元素 > 子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素选择器</title>
        <style>
            div.red > p.green{
				color:red;
            }
        </style>
    </head>
    <body>
        <div class="red">
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
            <p class="green">
                这是一个p标签
            </p>
        </div>
        <hr/>
          <div>
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
              <p class="green">
                这是一个p标签
            </p>
        </div>
        <p>
            这是一个p标签
        </p>
    </body>
</html>

3.2 后代选择器

​ 作用：选中指定元素内的指定后代元素(可以不用一级一级指定)

​ 语法：祖先 后代

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素选择器</title>
        <style>
            div.red span{
				color:red;
            }
        </style>
    </head>
    <body>
        <div class="red">
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
            <p class="green">
                这是一个p标签
            </p>
        </div>
        <hr/>
          <div>
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
              <p class="green">
                这是一个p标签
            </p>
        </div>
        <p>
            这是一个p标签
        </p>
    </body>
</html>

3.3 兄弟选择器

  • 作用1：选择所有a标签下边第一个兄弟

​ 语法：a标签+b标签

  • 作用2：选择所有a标签下边所有的兄弟

    语法：a标签~b标签

<!DOCTYPE html>
<html>
    <head>
     	<meta charset="utf-8">
    	<title>兄弟选择器</title>
        <style>
            p+span{
                color:red;
            }
            /*p~span{
                color:red;
            }*/
        </style>
    </head>
    <body>
        <div class="red">
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
            <p class="green">
                这是一个p标签
            </p>
            <span>这是一个span标签</span>
            <span>这是一个span标签</span>
        	<span>这是一个span标签</span>
            <span>这是一个span标签</span>
            <span>这是一个span标签</span>
            <span>这是一个span标签</span>
        </div>
    </body>
    
</html>

四、属性选择器

​ 作用：选择含有指定属性的元素

​ 语法：标签 [属性名=属性值]：选择含有指定属性和属性值的元素

​ 标签 [属性名^=属性值]：选择属性值以指定值开头的元素

​ 标签 [属性名$=属性值]：选择属性值以指定值结尾的元素

​ 标签 [属性名*=属性值]：选择属性值含有某值的元素的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style>
            p[title=red]{
				color:red;
            }
            /*
            p[title^=red]{
				color:red;
            }
            p[title$red]{
				color:red;
            }
            p[title*=red]{
				color:red;
            }
            */
        </style>
    </head>
    <body>
        <div title="red">
            这是一个title为red的div标签
        </div>
         <div title="green">
            这是一个title为green的div标签
        </div>
         <div title="orange">
            这是一个title为orange的div标签
        </div>
    </body>
</html>

五、伪类选择器

伪类（不存在的类，特殊的类）

​ — 伪类用来描述一个元素的特殊状态

​ 比如：第一个元素，被点击的元素，鼠标移入的元素…

​ — 伪类一般情况下都是使用：开头

  • 表示第几个的伪类

    ​ ：first-child 第一个子元素

​ ：last-child 最后一个子元素

​ ：nth-child()选中第n个子元素

​ 特殊值：

​ n 第n个 n的范围0到正无穷

​ 2n 或 even 表示选中偶数位的元素

​ 2n+1 或 add 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序

注意：1. 这里的必须是所有子元素里的第一个，而且是其所指的标签
2.这里不一定必须是上面的父子类元素，只是举例，以上列举的三种伪类只是针对选择第几个的！如以下举例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类</title>
        <head>
            <style>
                div:child{
					color:red;
                }
            </style>
        </head>
    </head>
    <body>
        <div>
            这第一个div标签
        </div>
        <div>
            这第二个div标签
        </div>
        <div>
            这第三个div标签
        </div>
        <div>
            这第四个div标签
        </div>
        <div>
            这第五个div标签
        </div>
        <div>
            这第六个div标签
        </div>
    </body>
</html>

  • 表示同类元素进行排序

    ​ :first-of-type

    ​ :last-of-type

    ​ :nth-of-type()

    ​ — 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行 排序

    注意：这里指的是所有子元素中同类型元素里面的第一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类</title>
        <sytle>
        	
        </sytle>
    </head>
    <body>
        
    </body>
</html>

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。并且满足标签所指。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

  • 超链接的伪类

    ​ :link 用来表示没访问过的链接（正常的链接）

    ​ :visited 用来表示访问过的链接（由于隐私原因，这个只能修改链接的颜色）

    ​ :hover 用来表示鼠标移入的状态

    ​ :active 用来表示鼠标点击

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>超链接的伪类</title>
        <style>
            a:link{
                color:red;
            }
            a:visited{
                color:green;
            }
            a:hover{
                font-size:300px;
            }
            a:active{
				color:orange;
                font-size:600px;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度链接</a><br/>
        <a href="https://www.baidu.com">百度链接</a><br/>
    </body>
</html>

  • 伪元素

    ​ 表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

    ​ 伪元素使用 :: 开头

    ​

    ​ ::first-letter 表示第一个字母

    ​ ::first-line 表示第一行

    ​ ::selection 表示选中的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪元素</title>
        <style>
            div::first-letter{
                font-size:20px;
                color:red;
            }
            p::first-line{
				color:yellow;
            }
            .selection::selection{
				color:green;
            }
        </style>
    </head>
    <body>
        <div class="selection">
            Hello Hello Hello
        </div>
        <p class="selection">
            Lorem ipsum dolor sit amet consecteturadipisicing elit.Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio.Id odit consequatur mollitia excepturi,minus saepe nostrum vel porro.
        </p>
    </body>
</html>

六、继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先和后代之间的

继承的设计是为了方便我们的开发，
	利用继承我们可以将一些通用的样式统一设置到公同的祖先元素上，
		这样只需设置一次即可让所有的元素都具有该样式
		
注意：并不是所有的样式都会被继承
	比如 背景相关的，布局相关等的这些样式都不会被继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>继承</title>
        <style>
            div{
                color:red;/*可以被继承的属性*/
                background-color:yellow;/*不可被继承的属性*/
            }
        </style>
    </head>
    <body>
        <div>
            这是一个div标签
            <p>
                这是一个p标签
                <span>这是一个span标签</span>
            </p>
        </div>
    </body>
</html>

七、选择器的权重

样式的冲突 ：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重

	内联样式			1.0.0.0
	id选择器			 0.1.0.0
	类和伪类选择器		   0.0.1.0
	元素选择器			 0.0.0.1
	通配选择器			 0.0.0.0
	继承的样式			 没有优先级

比较优先级时：

1.需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）；

2.选择器的累加不会超过其最大的数量级(即比如第四位相加，也不会加到影响第三位的数值)，类选择器再高也不会超过id选择器；

3.如果优先级计算后相同，此时则优先使用靠下的样式。

可以在某一个样式的后边添加!important,则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个东西一定要慎用！

不能吃的莴苣
关注
专栏目录
CSS——标签选择器，类选择器
流楚丶格念的博客
06-26 5639
文章目录选择器（重点）CSS基础选择器标签选择器（元素选择器）类选择器类选择器小案例小案例 制作一个简易Google图标 选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。 CSS基础选择器 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
html5——CSS基础选择器
jiuyuexixi的博客
07-11 662
html5——CSS基础选择器
CSS —— 选择器
七月
09-28 5782
CSS选择器笔记（阮一峰）： 1、基础选择器 2、复合选择器 目的是为了选择更准确更精细的目标元素标签。 复合选择器就是由两个或者多个基础选择器，通过不同方式组合而成的。 3、CSS选择器的三大特性： 1）层叠性（即后浪推前浪） 相同选择器相同属性设置相同样式，此时一个样式会覆盖另一个样式。 样式冲突遵循的是就近原则。 样式不冲突则不会层叠 2）继承性（即子承父业） 子标签会继承父级的某些样式，如文本颜色、字体等 以text-、font-、line-开头的元素以及color属性等都可
CSS——选择器的使用
Bonsoir777的博客
07-12 2294
本文主要介绍了CSS中选择器的使用方法。
CSS进阶篇——类和ID选择器
老梁的专栏
09-28 2313
在 CSS 基础教程中，我们学会了如何使用 HTML 选择器。这一篇我们继续讲解另外两种选择器 - class和 ID。有了它们，我们就可以为同一种 HTML 标签指定不同的样式。
CSS——选择器及优先级
ZKH129的博客
06-17 1857
选择器及优先级
HTML(8)——CSS选择器
m0_74386799的博客
06-18 614
/*选择器*/p{/*css属性*/文字
CSS基础——语法规范与选择器
weixin_61631131的博客
10-09 585
CSS基础——语法规范与选择器
CSS3——属性选择器
leraning_的博客
05-16 1823
1.利用属性选择器可以不用借助类或者id选择器 例子：选择第一个input： <input type="text" value="请输入用户名"> <input type="text"> css3设置选择： /*应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素*/ input[value]{ color: pink; } 2.属性选择器还可以选择=值的某些元素 例子：选择第一个input： <input type="..
CSS——选择器&和＞
qq_43201350的博客
10-30 4413
父选择器&，只实现自己，不会影响到后代 article a { color: blue; &:hover { color: red } } 子选择器> ,会选中此过元素下的子元素中的一些元素 //会选择article下紧跟着的子元素中命中section选择器的元素 article > section { border: 1px solid #ccc } ......
HTML+CSS大作业——vivo官方商城
07-08
【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML（HyperText Markup ...
HTML5+CSS3期末大作业——城市简介源码
05-05
4. CSS3选择器：使用更高级的选择器，如类选择器、ID选择器、伪类选择器，来更精确地控制样式。 5. 样式动画：利用CSS3的transition和animation属性，为城市图片、标题或其他元素添加动态效果，增加互动性和吸引力...
CSS——多类名选择器，id选择器，通配符选择器
流楚丶格念的博客
06-26 6617
文章目录多类名选择器案例id选择器id选择器和类选择器区别案例通配符选择器案例 多类名选择器 我们可以给标签指定多个类名，从而达到更多的选择目的。 注意： 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。 各个类名中间用空格隔开。 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。 <div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</d
nuxtjs3 使用tailwindcss做自适应
weixin_40466351的博客
10-12 314
在 tailwind.config.js 文件中，你可以配置 Tailwind 的响应式断点和自定义主题。这将生成一个 tailwind.config.js 文件。
CSS 实战录: 双栏、四等分、不等间距、自适应...
潜隐-前端
10-12 1095
本文深入探讨了在实际工作中遇到的一个 Flex 布局问题以及解决方案的总结, 旨在帮助其他开发者更好地应对类似的挑战!!
CSS 选择器简单回顾
潜隐-前端
10-14 1030
当我们探讨网页设计和开发时, CSS(层叠样式表) 无疑是一个不可或缺的技术, 它使我们能够精确控制网页的外观和布局, 为用户创造出独特的视觉体验、以及良好的交互体验!!
前端知识整理（全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试）
shaozheng0503的博客
10-13 963
前端知识整理（全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试）
CSS 居中那些事
潜隐-前端
10-14 1100
这篇文章探讨了 CSS 居中的技巧和方法。它涵盖了水平居中和垂直居中的不同场景, 并提供了多种实用的CSS代码示例。通过使用居中技术, 您可以轻松地在网页设计中实现元素的居中对齐....
深入解析CSS中的!important规则
最新发布
ning的博客
10-15 441
用户可能会通过浏览器扩展或自定义CSS来改变网站的外观。在这种情况下，开发者可以使用!important来确保某些样式声明不被用户自定义样式覆盖，从而尊重用户的视觉偏好。!important是CSS中一个强大的工具，但应该谨慎使用。它应该被视为解决特定样式冲突的最后手段，而不是常规做法。在可能的情况下，通过优化选择器的特异性和结构来避免使用!important会是更好的选择。记住，良好的代码习惯和结构化的设计往往比依赖于!important更能带来长期的维护性和可扩展性。版权声明。
HTML、CSS、JavaScript语法手册——网页设计基础
CSS规则由选择器和声明组成，选择器指向要应用样式的元素，声明则由属性和值构成，如`.class {color: red;}`用于将指定类的文本颜色设为红色。 JavaScript是一种解释型的、基于原型的脚本语言，它可以操作DOM（文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值