• CSS3------CSS选择器

           界面中的 “ 超文本 “ 本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来了解一个概 念，选择器的概念。 
    <div style="width:100px;height:100px;backgorund-color:red">div>
    把写在标签开始标签内部 style 属性中的样式，称为一个标签的行间样式。
    使用行间样式编写代码，维护性很差，试想一个场景，文档中一行上面的代码，可以在页面中生成一个 矩形盒子，如果需要生成 1000 个，该怎么办？答案是把代码复制 1000 次，有人说这并不麻烦，但如果现 在客户需求改了，要求所有但盒子宽度都改成 200px 像素，那么你还觉得简单吗？ 
    1. <html>
    2. <head>
    4. <style>
    5. 特殊标识 {
    6. width:100px;
    7. height:100px;
    8. background:red;
    9. }
    10. style>
    11. head>
    12. <body>
    13. <div>显示内容div>
    14. body>
    15. html>

    基本选择器

    标签选择器
    以标签名称作为选择器选中标签 “ 标签名 :{ 样式 }” 
    1. <style>
    2. /* h1实际上就是标签名称，这个选择器就是标签选择器 */
    3. h1 {
    4. color: red; /*设置文本颜色为红色 */
    5. font-fize: 14px; 设置字体大小
    6. font-family: 'Courier New',Courier, monspace; 设置显示所使用的字体
    7. font-weight: bold; 加粗显示
    8. }
    9. style>
    标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式
    Id 选择器，一般在一个页面中 id 值不允许重复
    id 选择器是通过给标签设置 id 属性，在样式表中通过 #id{ 样式 } 对标签设置样式，相当于一个人的身份证号 
    1. <style>
    2. /* #bb对应的是标签上的id属性值，按照id查找对应的标签，这个选择器就是id选择器 */
    3. #bb {
    4. color: red;
    5. }
    6. #box1{
    7. width:100px;
    8. height:100px;
    9. background-color:red;
    10. }
    11. style>
    12. <h1 id="bb">主要标题h1>
    13. <div id="box1">div>
    id 选择器特点 :
    • 有且只能有一个，不能重名，不能有多个
    • 一般不使用id选择器设置样式
    ps ：其他选择器都将是三大基本选择器的一个组合
    class 类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如 p h1 等。在标签内部通过
    class 属性，给标签设置类型名在样式表中通过 . 类型名 { 样式 } 的方式给标签盒子设置样式 
    1. <style>
    2. /* .bb对应的是不同标签上的class属性值，按照class属性值查找一组对应的标签，这个选择器就是class选择器 */
    3. .bb {
    4. color: red;
    5. }
    6. .box{
    7. width:100px;
    8. height:100px;
    9. background-color:red;
    10. }
    11. .box1{
    12. background-color:blue;
    13. }
    14. style>
    15. <h1 class="bb">主要标题h1>
    16. <div class="box">div>
    17. <div class="box">div>
    18. <div class="box box1">div>
    类型 class 选择器特点：
    • 相当于给标签起了一个别名
    • 不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同时设置相同样式
    • 同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果
    * 通用选择器，选择当前页面中的所有标签 
    1. <p>段落p>
    2. <b>加粗b>
    3. <span>无span>
    4. <style>
    5. /* 这里的*表示当前页面中的任何标签 */
    6. * {
    7. border: 1px solid red;
    8. }
    9. style>
    通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用
    伪类选择器：前面是标签选择器，后面类选择器 div.dd{}
    典型的伪类选择器，例如链接标签的使用
    • a:link 链接的颜色
    • a:visited 已访问的链接颜色
    • a:hover 鼠标经过时的颜色
    • a:active 当访问时的颜色

    注：已上顺序不可打乱  

    ID选择器和类选择器

    • ID选择器不可以重名，类选择器可以
    • ID选择器在样式表里必须以 # 开头，类选择器在样式表里以 . 开头

    选择器优先级

    选择器优先级问题，是指当多个选择器选中一个标签，设置相同的样式时谁优先生效的问题
    举个例：一般我们的家庭中，男人往往处于相较低的地位，这样一个家庭才能稳固，因此当家里出现这样一个场景
    • 老婆：老公今晚吃米饭吧
    • 孩子：爸爸今晚吃肯德基吧
    • 旺财：主人今晚吃骨头吧
    此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题
    我们的选择器，具有相同的特点，例如看如下代码 
    1. html>
    2. <html lang="zh_CN">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>选择器优先级问题title>
    8. <style>
    9. #box1{
    10. background: red;
    11. }
    12. .box{
    13. background: blue;
    14. }
    15. div{
    16. width: 100px;
    17. height: 100px;
    18. background: green;
    19. }
    20. /*
    21. 三大基本选择器
    22. 标签、class、id 都是通过特殊字符在样式表中选中标签，设置样式
    24. 在优先级上
    25. 标签 < class < id
    26. 优先级高的样式会覆盖优先级低的样式；如果优先级一致，由于样式表是从上到下执行，因此，样
    27. 式表中后面选择器中的样式会叠加前面选择器中的样式
    29. 由于ID选择器优先级最高，导致一些交互性的选择器无法生效，因此前端规范要求，在设置标签
    30. 样式时，只使用class和标签选择器，id选择器不用来设置样式，一般用在js中。
    32. 选择器优先级判断依据：选择越准确，优先级越高
    33. */
    34. style>
    35. head>
    36. <body>
    37. <div style="background-color: saddlebrown" class="box" id="box1">div>
    38. body>
    39. html>

    属性选择器

    属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
    基础语法：
    [href] { 选中有 href 属性的方法，注意不一定只有 a 标签有 href 属性，可以给任何标签上添加 href 属
    性，只是不会进行跳转
    color: orange;
    }

    基础样式： 

    [href] {
    color: orange;
    }
    [href^="http"] {
    color: orange;
    }
    解释：属性值开头匹配的属性选择器。例如 http://www.baidu.com
    // 所需版本 CSS3
    [href$=".com"] {
    color: orange;
    }
    解释：属性值结尾匹配的属性选择器。
    // 所需版本 CSS3
    [href*="baidu"] {
    color: orange;
    }
    解释：属性值包含指定字符的属性选择器。
    // 所需版本 CSS2
    [class~="edf"] {
    font-size: 50px;
    }
    解释：属性值具有多个值时，匹配其中一个值的属性选择器。
    // 所需版本 CSS2
    [lang|="en"] {
    color: red;
    }
    解释：属性值具有多个值且使用 “-” 号连接符分割的其中一个值的属性选择器。比如
    lang = "en-us" > HTML5 。

    复合选择器

    将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

    交集选择器

    交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自的元素的交集。其中第一个一般是标记选择器，第二个可以是类别选择器或者 ID 选择器。这两个选择器之间不能有空格，必须连续书写
    这种方式构成的选择器将选中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且指定了后者的类别或者 ID 的元素，因此叫做交集选择器 
    1. <style type="text/css">
    2. p{ color:red; }
    3. p.one{ color:green; }
    4. .one{ color:pink; }
    5. style>
    6. <p>这是一个段落显示红色p>
    7. <h1>这是一个标题h1>
    8. <p class="one">这是标记选择器和类别选择器交叉显示绿色p>
    9. <h1 class="one">这个是类别选择器显示粉色h1>

    分组选择器

    分组选择器也叫做并集选择器，结果是同时选中各个基本选择器所选择的范围之和
    p,b,i,span { color: red ; }
    解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用
    ID 选择器、类选择器、属性选择器混合使用 
    1. h1,h2,h3,h4,h5,h6,p{
    2. color:red;
    3. font-size:20px;
    4. }
    5. h2.one,.one,#two{
    6. text-decoration:underline;
    7. }
    8. <h1>这是h1标记h1>
    9. <h2 class="one">这是h2标记h2>
    10. <p>这是p标记p>
    11. <p class="one">这是p标记2p>
    12. <p id="two">这是p标记3p>

    后代选择器

    p b { color: red ; }
    解释：选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器 
    1. <style type="text/css">
    2. p span { color:red; }
    3. span { color:blue; }
    4. style>
    5. <p>这是最外层，<span>这是最内层span>p>
    6. <span>这是嵌套外的span标记span>
    子选择器
    ul > li { border: 1px solid red ; }
    解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择 
    1. ul > li {
    2. border: 1px solid red;
    3. }
    4. <ul>
    5. <li>我是儿子
    6. <ol>
    7. <li>我是孙子li>
    8. <li>我是孙子li>
    9. ol>
    10. li>
    11. <li>我是儿子li>
    12. <li>我是儿子li>
    13. ul>

    相邻兄弟选择器

    p + b { color: red ; }
    解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。 
    1. <style>
    2. p+b {
    3. color: red;
    4. }
    5. style>
    6. <b>开始b>
    7. <p>这是一段简单的显示测试，<b>儿子标签b>不会有显示效果，<a href=""><b>孙子标签b>
    8. a>不会有显示效果p>
    9. <b>终止b>
    如果在 【 终止 】 之前添加任何标签，则不能查找到

    普通兄弟选择器

    p ~ b { color: red ; }
    解释：普通兄弟选择器匹配和第一个元素后面的所有元素。 
    1. <style>
    2. p~b {
    3. color: red;
    4. }
    5. style>
    6. <b>开始b>
    7. <p>这是一段简单的显示测试，<b>儿子标签b>不会有显示效果，<a href=""><b>孙子标签b>
    8. a>不会有显示效果p>
    9. <b>终止1b>显示效果
    10. <b>终止2b>显示效果

    显示样式

    1. <style type="text/css">
    2. body{
    3. color:#F09;
    4. }
    5. h1,h2,h3,h4,h5,h6{
    6. font-size:12px;
    7. height:30px;
    8. background-color:#CCC;
    9. line-height:30px;
    10. }
    11. style>
    12. <p>1、覆盖元素的默认显示效果p>
    13. <h1>这是一个h1元素h1>
    14. <h2>这是一个h2元素h2>
    15. <h3>这是一个h3元素h3>
    16. <h4>这是一个h4元素h4>
    17. <h5>这是一个h5元素h5>
    18. <h6>这是一个h6元素h6>
    19. <p>2、强大的显示效果p>
    20. <span style="font-size:500px;font-family:新宋体,黑体;">福span>

    CSS继承

    css 继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记 
    1. <style>
    2. h1 {
    3. color:red; text-decoration:underline;
    4. }
    5. i {
    6. color:blue;
    7. }
    8. style>
    注意： css 层叠不能和继承混淆，可以简单的理解为冲突的解决方案 
    1. p { color:green; } 标记选择器
    2. .red{ color:red; } class类别选择器，其中优先级是：行内样式 > id选择器 > class类别选择器 > 标记选择器
    3. #line3{ color:yellow; }
    4. .blue{ color:blue; }
    5. <p>这是第1行p>显示绿色，是p选择器的效果
    6. <p class="red">这是第2行p> 显示红色，是class=red生效
    7. <p id="line3" class="red">这是第3行p> 显示黄色，是id=line3生效
    8. <p style="color:pink;" id="line3">这是第4行p> 显色分红，是style生效，行内式优先级高于内嵌式优先级
    9. <p class="blue red">这是第5行p>显示蓝色，是class=blue生效，连个class级别相同，区别在于声明顺序，在<style>中后声明的优先前声明的进行覆盖，和这里class声明的顺序没有任何关系,这里就是明确的就近原则

  • 相关阅读:
    Any to Any 实时变声的实现与落地丨RTC Dev Meetup
    Kubernetes 使用 PVC 持久卷后，持久卷内数据丢失问题
    netty报错：too many open files，调整文件句柄
    超市收银系统源码
    设计模式之适配器模式C++实现
    倍思、南卡、漫步者开放式耳机好不好用？ 硬核测评年度最强产品
    【git】超详细使用指令
    2023-11-07 LeetCode每日一题（统计范围内的元音字符串数）
    攻防世界碎纸机11
    火山引擎徐鑫：工程师如何与云原生共同成长
  • 原文地址：https://blog.csdn.net/m0_59749255/article/details/128025375