五千字长文-css3选择器基础最详解（讲述其核心特点）（下次更新的是选择器高级）

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量900 收藏 1
点赞数 2
分类专栏： css系列（精通 精通）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/109358094
版权

标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-标签选择器</title>
    <style>
        p{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
</head> 
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                        <p>我是段落</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<h1>我是标题</h1>
</body>
</html>

注意点:
特点:所有类型的 多深都能找到 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)
格式:
标签名称{
属性:值;
}

效果图：
在这里插入图片描述

id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-id选择器</title>
    <style>
        #identity1{
            color: red;
        }
        #identity2{
            color: green;
        }
        #identity3{
            color: blue;
        }
        #identity4{
            color: yellow;
        }
    </style>
</head>
<body>
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>

注意点;
特点;在js中id是具有唯一性的. #在前面添加 命名规则符合变量的规则 不能以html标签的名称作为id名
格式:
#id名称{
属性:值;
}

在这里插入图片描述

类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-类选择器</title>
    <style>
        .pp{
            color: red;
        }
        .ppp{
            color: green;
        }
        .pppp{
            color: blue;
        }
        .ppppp{
            color: yellow;
        }
        .para1{
            font-size: 100px;
        }
        .para2{
            font-style: italic;
        }
    </style>
</head>
<body>
<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>

</body>
</html>

注意点;
特点;类名具有重复性 .在css前面加 一个标签可以绑定多个类名
1.什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:
.类名{
属性:值;
}

效果：
在这里插入图片描述

类与id的混合使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-id选择器和class选择器</title>
    <style>
        /*
        .para1{
            color: red;
            font-size: 30px;
        }
        .para2{
            font-size: 30px;
            text-decoration: underline;
        }
        .para3{
            color: red;
            text-decoration: underline;
        }
        */
        .colorR{
            color: red;
        }
        .size30{
            font-size: 30px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--
<p class="para1">第一段文字</p>
<p class="para2">第二段文字</p>
<p class="para3">第三段文字</p>
-->
<p class="colorR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="colorR line">第三段文字</p>
</body>
</html>

注意点;
特点;区别：id在js中不能重复,类在js中可以重复 一个HTML标签只能绑定一个id名称。一个HTML标签可以绑定多个class名称 id以#开头，类以.开头.

效果：
在这里插入图片描述

后代选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-后代选择器</title>
    <style>
        /*
        div p{
            color: red;
        }
        */
        /*
        #identity p{
            color: red;
        }
        */
        /*
        .para p{
            color: blue;
        }
        */
        /*
        #identity #iii{
            color: skyblue;
        }
        */
        /*
        #identity .ccc{
            color: purple;
        }
        */
        div ul li p{
            color: red;
        }
    </style>
</head>
<body>
<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <!--<p id="iii" class="ccc">我是段落</p>-->
            <p>我是段落</p>
        </li>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

特点：以空格隔开 找到的是指定的标签的最后一个标签设置颜色.

在这里插入图片描述

子元素选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-子元素选择器</title>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: blue;
        }
        */
        div>ul>li>p{
            color: purple;
        }
    </style>
</head>
<body>
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

注意点;
特点;找到的是特定的元素的最后一个标签设置颜色.子元素的儿子是>这里的就是所谓的儿子了.

效果图：
在这里插入图片描述

后代选择器和子元素选择器区别:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-后代选择器和子元素选择器</title>
</head>
<body>
<!--
1.后代选择器和子元素选择器之间的区别?
1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

-->
</body>
</html>

交集选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-交集选择器</title>
    <style>
        /*
        p.para1{
            color: red;
        }
        */
        .para1#identity{
            color: blue;
        }
    </style>
</head>
<body>

<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>

特点：标签与标签没有空格 像这样就是了.
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

并集选择器;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-并集选择器</title>
    <style>
        /*
        .ht{
            color: red;
        }
        .para{
            color: red;
        }
        */
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

注意点;
特点;用逗号隔开，像这样
在这里插入图片描述

效果图:

在这里插入图片描述

兄弟选择器:通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-兄弟选择器</title>
    <style>
        /*
        h1+p{
            color: red;
        }
        */
        h1~p{
            color: green;
        }
    </style>
</head>
<body>

<!--
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
-->
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>

<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

注意点;
特点;相邻兄弟选择器必须通过+连接 通用兄弟选择器用~.
h1后面的第一个设置颜色。p后面的第一个设置颜色.

在这里插入图片描述

相邻兄弟选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-兄弟选择器</title>
    <style>
        
        h1+p{
            color: red;
        }
        
       
    </style>
</head>
<body>


<!--
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
-->
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>

<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

特点;h1后面必须是p设置颜色

贵哥的编程之路(热爱分享)
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
2021-2022计算机二级等级考试试题及答案No.17598.docx
10-30
- 在Windows中，右键点击文件图标选择“属性”无法查看文件的字数和行数，这些信息通常需要通过打开文件并在编辑器中查看。 #### 17. 合法标识符 - **题目描述**：题目要求选择合法的标识符。 - **知识点详解**： ...
2021-2022计算机二级等级考试试题及答案No.13459.docx
10-27
- 它们属于中央处理器（CPU），是计算机的核心部件之一，负责执行指令和处理数据。 ### 27. 宏操作 **知识点概述**： - 在数据库管理系统中，宏操作用于自动化任务。 **知识点详解**： - 宏可以包含一系列命令，...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
05-26 793
一、 基本选择器 二、 后代选择器、子元素选择器 三、 兄弟选择器 四、 交集选择器与并集选择器 五、 序列选择器 六、 属性选择器 七、 伪类选择器 八、 伪元素选择器 九、 CSS三大特性 一、 基本选择器 1、id选择器 #1、作用： 根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性 #2、格式 id名称 { ...
css基础选择器
weixin_30430169的博客
10-20 61
1、别名:标签选择器、标记选择器 特点：通过元素名称作为选择器名称 作用：修改某一元素的默认样式 body{} h1{} h2{} 2、类选择器(类样式) 特点：通过元素的 class 属性来进行引用 作用：定义某一组标签的统一样式 语法：.className{color:red;bakcground:yellow;} 注意：className不能以数字开头 引用：<div ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
xiao廸要飞
07-17 471
文章目录1. 0基础快速入门CSS技术栈(4)2. 重点提炼3. CSS复合选择器3.1 后代选择器（重点）3.1.1 example013.2 子元素选择器3.2.1 exmaple023.3 交集选择器3.3.1 example033.4 并集选择器（重点）3.4.1 example043.5 测试题3.6 链接伪类选择器（重点）3.6.1 example053.6.2 example063.7 复合选择器总结4. 标签显示模式（display）重点4.1 什么是标签显示模式4.2 块级元素(bl
html四种选择器的特点,五千字长文-css3选择器基础最详解（讲述其核心特点）（下次更新的是选择器高级）...
weixin_39839410的博客
06-09 187
标签选择器：08-标签选择器p{color: red;}h1{color: blue;}我是段落我是段落我是段落我是段落我是段落我是标题注意点:特点:所有类型的 多深都能找到 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)格式:标签名称{属性:值;}效果图： id选择器：09-id选择器#identity1{color: red;}#identity2...
css3 选择器 odd,CSS3伪类选择器：nth-child()（nth-child(odd)/nth-child(even)）
weixin_39884074的博客
08-03 263
Android Activity的生命周期详解应用程序中,一个Activity通常就是一个单独的屏幕,它上面可以显示一些控件也可以监听并处理用户的事件做出响应. Activity之间通过Intent进行通信.在Intent 的描述结构中,有两个最 ...Android获取SD卡中选中图片的路径(URL)最近在做一个图片上传的功能,需要提供上传图片在SD卡中的路径,在网上看了些例子,改改调试成功,代...
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 6331
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)
weixin_34007020的博客
06-18 3225
这是一门免费课程，写文章和录制视频这个我花了1个半月时间，如果你觉的不错可以给一个赞。文章和视频中会详细讲解React的基础知识，React版本是16x，也是目前最新版本(我课程录制开始的日期是2019年5月4日)。今年的目标是录制100集前端免费视频教程，可能大部分都会在React框架上，毕竟它是现在最火的前端框架，也是前端必会的一个框架。 我们采用最新的React16.8版本进行讲解，我相信...
【7W字长文】使用LVS+Keepalived实现Nginx高可用，一文搞懂Nginx
袁茂林的博客
02-13 7512
使用LVS+Keepalived实现Nginx高可用 Nginx介绍和使用 什么是Nginx Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器，也是一个IMAP/POP3/SMTP代理服务器。 Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。 可以使静态资源虚拟化，可以缓存服务器静态资源 Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器，并在一个BSD-like协议下发行。 由俄罗斯
计算机网络：从浅尝辄止到融汇贯通（近两万字长文）
试问道几许
09-02 732
关于计网的这些问题，你可以和面试官谈笑风生吗？
2021-2022计算机二级等级考试试题及答案No.17201.docx
10-29
7. CSS样式结构：CSS样式主要由选择器和声明构成，选择器用于选取要应用样式的元素，声明则包含属性和值。选项C正确。 8. Windows多选操作：使用Ctrl键可以在Windows中选择多个不连续的图标，而Shift键用于选择连续...
2021-2022计算机二级等级考试试题及答案No.5296.docx
11-02
16. CSS语法：正确的CSS语法是选择器{属性:值}，例如body {color: black}。 17. 计算机最小单位：计算机的最小单位是比特(bit)，是二进制的一位。 18. 数据类型占用内存：在这些选项中，Single(单精度浮点数)占用...
2021-2022计算机二级等级考试试题及答案No.5031.docx
11-02
计算机二级等级考试主要涵盖计算机基础知识、操作系统应用、编程语言、数据库管理、网页设计等多个方面的内容。以下是根据题目提供的部分知识点的详细解释： 1. **控件的通用属性**：控件是用户界面中的元素，如...
float现象（是什么,脱标,排序,贴靠,字围,高度问题）
qq_37805832的博客
10-31 3490
float特点: 1:浮动的元素能让行内元素设置宽高. 2:记住,浮动的元素能使用内外边距. 3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高. 4:浮动元素是一种水平排版的东西. 5:浮动跟行内块级元素很像. 6:float只能水平排版. 缺点: 1:浮动中没有居中对齐,没有.只有左对齐 右对齐. 2:但是不能使用margin: 0 auto;使用这样无效. 什么是水平排版? 行内元素/行内块级元素 什么是垂直排版? 块级元素
line-height最详解
qq_37805832的博客
10-31 3033
line-height 注意点： 行高和盒子高不是同一个概念 行高指的是每行内容的高度 盒子高指的是元素的高度 怎么办？ 第一步:先把行高设置成20px 第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。 还原字体与字号: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-清空默认边
transtion详解
qq_37805832的博客
09-17 3018
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margi
order排序
qq_37805832的博客
09-17 2409
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 600px;
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值