HTML(六)

基本标签选择器

把写在标签开始标签内部style属性中的样式，称为一个标签的行间样式

<div style="width:100px;height:100px;background-color:red">
        行内样式定义，任何一个标签都可以通过style属性定义这个标签独有的显示效果
    </div>

内部样式表

内部样式表，将写在行间的样式提取出来，写在一对style标签中，并且用花括号括起来。

如何让浏览器知道，这个三个样式是给哪个标签设置的呢？
这就需要在第一个{}前加一个“特殊标识”来告诉浏览器，花括号中的样式是给哪个标签设置的。
特殊标识的作用：就是在样式表中，选中标签，设置样式。因此将这个特殊标识称为 “选择器”

<style>
  特殊标识{
    width:100px;
    height:100px;
    background:red;
   }
</style>

 <div style="background-color: aquamarine;">显示内容</div>
    <!--如果同时使用行间和内部两种定义方法，则效果为两者的叠加，如果重复定义则就近原则-->

基础标签选择器的分类

标签选择器、类型选择器、id选择器

标签选择器

以标签名称作为选择器选中标签 “标签名{样式}”
标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式

<!--
例如：
  div{
     color:red;
     }
 -->

类型选择器

在标签内部通过class属性，给标签设置类型名在样式表中通过【.类型名{样式}】的方式给标签盒子设置样式

<!--
         例如：
            .p1{
                border: 1px solid red;
            }
        -->

类型选择器特点：
相当于给标签起了一个别名
不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同时设置相同样式

同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果

id选择器

id选择器是通过给标签设置id属性，进行定位选择
在样式表中通过 #id{样式}对标签设置样式,相当于一个人的身份证号

id选择器特点
有且只能有一个，不能重名，不能有多个。事实上在一个页面针对
不同标签多次使用相同id没有问题【浏览器最大程度容错】一般不使用id选择器设置样式

使用三个基本选择器的优先问题
同时针对一个标签使用三种定义，如果显示属性配置冲突则id选择器>类型选择器>标签选择器；如果不冲突则叠加
总结：越精确越优先
ps:其他选择器都将是三大基本选择器的一个组合

其他选择器

通用选择器

*号选择器是通用选择器，这是元素选择器的扩展，功能是匹配所有html元素的选择器,
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。
目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用

属性选择器

属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

<a href="https://www.baidu.com">test1</a><br/>
   <a href="text1.html">test2</a><br/>
   <span href="test2.html">bbbbbb</span>
   <style>
       /*匹配所有具有href属性的元素,这里的属性允许是自定义的*/
       [href] {
           color:red;
       }
       /*匹配具有href属性，同时href的属性值以https开头*/
       [href^="https"] {
           background-color: yellow;
       }
       /*匹配具有href属性，同时href属性值以.com收尾*/
       [href$=".com"]{
           border: 1px dotted blue;
       }
       /*匹配具有href属性，同时href属性值中包含.字符*/
       [href*="."]{
           border: 1px dotted blue;
           border-radius: 20px;
       }
   </style>

复合选择器

分组选择器

将多个选择器通过逗号分割，同时设置一组样式。每个选择器都是独立的选择器，最后选择结果为所有选择器的和

在这个组合选择器中，使用了3种不同的选择方法，第一个div采用标签选择器，第二个p#id1采用的是id选择器，选择id=id1的p标签，第三个采用的是类选择器

/*
        div,p#id1,.span1{
            color:red
        }
        */

后代选择器

选择元素内部所有指定元素，不在乎的层次深度。当然，
后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器
标准语法： 选择器1 选择器2 {样式定义}

 <style>
        /*选择包含span的p标签种span标签*/
        p span {
            color:orange;
        }
        /*选择包含id=span2的p标签中的span id=span2标签*/
        p #span2{
            color:blue
        }
        /*选择包含span标签的class=div3标签中的span标签*/
        .div3 span{
            background-color: blueviolet;
        }
    </style>

子选择器

子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择

<div>
       <p>
           <a href="">aaaa</a>
           <a href="">bbbb</a>
       </p>
       <a href="">dd<span>eee</span>dd</a>
   </div>
   <style>
       /*后代选择器,所有的div中的热点文字显示为红色*/
       div a{
           color:red
       }
       /*儿子选择，所以aaaa和bbbb不会出现边框，而dddd则显示边框*/
       div > a{
           border: 1px solid blue;
       }
       /* div的儿子a中的儿子span*/
       div > a > span{
           color:beige;
       }
   </style>

相邻兄弟选择器

相邻兄弟选择器匹配和第一个元素相邻的第二个元素。注意是相邻下一个元素，不能查找上一个元素。
例如li id="bb1"和下一个li中间插入一个span元素则#bb1 + li则不能查找到元素

 <ul>
        <li>我是儿子1
            <ol>
                 <li>我是孙子11</li>
                 <li>我是孙子12</li>
            </ol>
        </li>
        <li id="bb1">我是儿子2</li>
        <!--
         <span>abcde</span>
        -->
        <li>我是儿子3</li>
     </ul>
     <style>
         #bb1 + li{
             color:red;
         }
     </style>

普通兄弟选择器

普通兄弟选择器匹配和第一个元素后面的所有元素

 <ul>
        <li id="bb2">我是儿子1</li>
        <span>span_span</span>
        <li>我是儿子2</li>
        <li>我是儿子3</li>
     </ul>
     <style>
         /*查找id=bb2后面的所有同级的li标签*/
         #bb2 ~ li{
             color:blue;
         }
     </style>