选择器

兄弟选择器

相邻兄弟选择器

相邻兄弟选择器的基本语法：
参考选择器+目标选择器{样式}

匹配规则：
参考选择器下的紧挨着的那个兄弟

<style>

#tag+p{
    color:cyan;

}

</style>
<body>
<p>p top</p>
<div id="tag">我是参考目标div</div>
<nav>
    <p>
        div 下的 nav 中的 p元素
    </p>
</nav>
<p>p元素</p>
<p>p1</p>
</body>

通用兄弟选择器

通用兄弟选择器的语法：
参考选择器 ~ 目标选择器{样式}

匹配规则：
参考选择器器下的所有兄弟

<style>

#tag ~ p{
    color:red;
}


</style>
<body>
  <p>div 的哥哥</p>   <!--在参考上面-->
  <div id="tag">参考</div>
  <p>div 下的p</p>
  <nav>
      <p>div 下的 nav 下的p</p>    <!--不是兄弟-->
  </nav>
  <p>
      div 的 5弟
  </p>
</body>

属性选择器

基础属性选择器：4大通用属性：id class title style
哪里的东西叫做属性; 属性是定义在开始标签中的那些键 name = “” title =“”

class选择器的样式覆盖属性选择器的样式，测试结果：属性选择器的权值 ===class的选择器权值

所有的属性选择器的标识： []

普通属性选择器语法;
[属性名]{样式}

匹配规则：
含有该属性名的所有元素被匹配

 [title]{
          background-color: #ff0;
      }

并列属性选择器

并列属性选择器语法：
[属性名a][熟悉名b]...{样式}

匹配规则：
并列：表示同时具有两个属性的的元素在满足匹配规则

[class][title]{
           background-color: #0ff;
       }

表示更加精确的匹配：

通过属性值的区分： =

基本语法
[属性名 =属性值]

匹配规则： = 表示全等属性名全等属性值

<style>
       [class="a b"]{
           background-color: #f00;
       }

  </style>

    <div class="a b">class 是  a  b的值</div>
    <div class="a">class 是  a 的值</div>
    <div class="b">class 是  b 的值</div>

通过属性值的区分： ~=

基本语法
[属性名 ~=属性值]

匹配规则： ~= 表示部分全值等这个所谓的全值是用空格隔开的那个值就是一个全值

 <style>
      [title~="a"]{
          background-color: #fff000;
      }
    
  </style>

    <div title="a b">class 是  a  b的值</div>
    <div title="a">class 是  a 的值</div>
    <div title="b">class 是  b 的值</div>
    <div title="abc">class 是  b 的值</div>

通过属性值的区分： *=

基本语法
[属性名 *=属性值]

匹配规则：只要是属性值中包含有该匹配值就可以（不需要全值）就是将属性值看做是一个整体

<style>
    [title*="a"] {
        background-color: #fff000;
    }


</style>

<div title="a b">class 是 a b的值</div>
<div title="a">class 是 a 的值</div>
<div title="b">class 是 b 的值</div>
<div title="abc">class 是 abc 的值</div>

语法：
[属性名^="属性值"]

匹配规则是当前的属性值作为一个整体，该整体是以当前的属性值为开始被匹配成功

<style>
  
     [class^="a"]{
         background-color: #f00;
     }

</style>

<div class="ab">值是 ab</div>
<div class="b ab">值是b ab</div>
<div class="bab">值是 bab</div>
<div class="abc b">值是 abc b</div>

语法：
[属性名$="属性值"]

匹配规则是当前的属性值作为一个整体，该整体是以当前的属性值为结尾被匹配成功

<style>
  
     [class$="ab"]{
         background-color: #f00;
     }

</style>

<div class="ab">值是 ab</div>
<div class="b ab">值是b ab</div>
<div class="bab">值是 bab</div>
<div class="abc b">值是 abc b</div>
<div class="abc a b">值是 abc a b</div>

语法：
适合所有的属性选择器更加精确

匹配规则是当前的属性值作为一个整体，该整体是以当前的属性值为结尾被匹配成功

<style>
    
    /*div[class]{*/
    /*!*.a[class]{*!*/
        /*background-color: #f00;*/
    /*}*/
    nav[class$="ab"]{
        background-color: #f00;
    }
</style>

<!--<div class="a">值是 ab</div>-->
<!--<div title="a">值是 ab</div>-->
<!--<p class="ab">值是 ab</p>-->

<div class="ab">值是 ab</div>
<p class="b ab">值是b ab</p>
<nav class="bab">值是 bab</nav>
<span class="abc b">值是 abc b</span>
<u class="abc a b">值是 abc a b</u>

属性选择器：
1操控属性命名
[] [][]
2操控属性值
[=] [~=] [*=]
[^=] [$=]
3带选择器的
选择器[]

伪类选择器

:target
让标记更加的凸显
target 是和a 标签的锚点配用

div:target{
          color: cyan;
          font-size: 100px;
          font-weight: bold;
      }

：enabled
enabled 是from表单那些可选元素匹配

<style>
    input:enabled{
        background-color: #f00;
        width: 50px;
        height: 50px;
    }
</style>
<form action="http://www.baidu.com">


    <input type="text" placeholder="用户名" disabled>
    <input type="password" placeholder="用户名">

    <input type="radio">
    <input type="checkbox">


    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮">


</form>

：disabled
disabled 是from表单那些不可选元素匹配
当前的input 有disabled属性的

<style>
    input:disabled{
        background-color: #f00;
        width: 50px;
        height: 50px;
    }
</style>
<form action="http://www.baidu.com">


    <input type="text" placeholder="用户名" disabled>
    <input type="password" placeholder="用户名">

    <input type="radio" disabled>
    <input type="checkbox">


    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮">


</form>

:checked
单选或多选钮那些被选中的

<style>
     input:checked{
         width: 50px;
         height: 50px;
     }


 </style>


 <form action="#">

     <input type="text" placeholder="用户名" >
     <input type="password" placeholder="用户名">

     <input type="radio" name="a">
     <input type="radio" name="a">
     <input type="checkbox">


     <input type="submit">
     <input type="reset">
     <input type="button" value="按钮">

 </form>

:selection
滑词效果：可以设置的是表现样式，那些有可能改变元素大小那些都不可以生效

 <style>

     
        pre::selection{
            background-color: green;
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
  <pre>
      &lt;&lt;满江红 &gt;&gt;
      怒发冲冠⑵，
      凭阑处⑶、
      潇潇雨歇⑷。
      抬望眼，
      仰天长啸⑸，
      壮怀激烈⑹。
      三十功名尘与土⑺，
      八千里路云和月⑻。
      莫等闲⑼、
      白了少年头，
      空悲切⑽。

      靖康耻⑾，
      犹未雪。
      臣子恨，
      何时灭。
      驾长车，
      踏破贺兰山缺⑿。
      壮志饥餐胡虏肉⒀，
      笑谈渴饮匈奴血⒁。
      待从头、
      收拾旧山河，
      朝天阙⒂。 [2]
  </pre>

伪类结构

语法：
父级 :first-child{}

匹配规则：
匹配是该父级下面的第一个孩子

  ul :first-child{
        background-color: #f00;
    }
*精确写法*/
       /*ul li:first-child{*/
        /*background-color: #f00;*/
    /*}*/
<ul>
    <p>p</p>
    <li>我是ul 的第  1 个孩子</li>
    <li>我是ul 的第  2 个孩子</li>
    <li>我是ul 的第  3 个孩子</li>
    <li>我是ul 的第  4 个孩子</li>
</ul>

语法：
父级 :last-child{}

匹配规则：
匹配是该父级下面的最后一个孩子

<style>
  ul :last-child{
        background-color: #f00;
    }


    /*精确写法*/
       ul p:last-child{
        background-color: #f00;
    }
</style>
<ul>

    <li>我是ul 的第  1 个孩子</li>
    <li>我是ul 的第  2 个孩子</li>
    <li>我是ul 的第  3 个孩子</li>
    <li>我是ul 的第  4 个孩子</li>
    <p>p</p>
</ul>

语法：
父级 :nth-child(n 或?n){}

匹配规则：
匹配1 父级下面的任意一个孩子第几个孩子用n 表示 n 从1开始
2 父级下名的任意倍数孩子

<style>
   
    /*ul :nth-child(4){*/
    /*background-color: yellow;*/
    /*} */
    /*精确写法*/
    /*ul li:nth-child(4){*/
    /*background-color: yellow;*/
    /*}*/

    /*ul :nth-child(2n) {*/
        /*background-color: yellow;*/
    /*}*/

    /*ul :nth-child(2n-1) {*/
        /*background-color: red;*/
    /*}*/


    ul :nth-child(3n) {
    background-color: yellow;
    }
</style>

<ul>
    <li>我是ul 的第 1 个孩子</li>
    <li>我是ul 的第 2 个孩子</li>
    <li>我是ul 的第 3 个孩子</li>
    <!--<div>我是ul 的第  4 个孩子</div>-->
    <li>我是ul 的第 4 个孩子</li>
    <li>我是ul 的第 5 个孩子</li>
    <li>我是ul 的第 6 个孩子</li>
    <li>我是ul 的第 7 个孩子</li>
    <li>我是ul 的第 8 个孩子</li>
    <li>我是ul 的第 9 个孩子</li>
</ul>

非
语法
  ：not（选择器1）{样式}

 匹配规则：
   除了选择器1 的其他选择器

<style>

    /*div,p,span{*/
        /*color: red;*/
    /*}*/

    body :not([id]){
    /*body :not(i,p){   除了 是除了唯一 不可以有多个*/
        color: yellow;
    }

</style>

<body>


<div>my name is  div</div>
<p>my name is  p</p>
<span>my name is span</span>
<i id="">my  name  is i</i>

</body>

唯一子元素

<style>
  
    /*div :only-child{*/
        /*background-color: #f00;*/
    /*} */

    /*表示更加精确*/
    div div:only-child{
        background-color: #f00;
    }
</style>

<div> my  name  is  div</div>
<div>
    my  name  is  div
    <p>div 中的唯一子元素</p>
</div>

<div>
    my  name  is  div
    <p>div 中的老大</p>
    <p>div 中的老二</p>
</div>

</body>

{了解部分}
此时匹配的是  一个空元素

能够成功的匹配 empty的
若是一个双标签则 ;首位标签紧链接 什么内容都不允许有 （例如：空格，文本）
或单标签

<style>
   body  :empty{
       background-color: #f00;
       width: 50%;
       height: 10px;
   }
</style>

没有任何内容
<div></div>
<hr>
仅有一个空格
<div> </div>
<hr>
一段文本
<div>中午都睡了吗？</div>
<hr>
有子元素
<div><i>div中的i</i></div>
<hr>
</body>

标签中的第一个文本
作用的就是块级（块  行内块）标签
行内元素没有效果

<style>
    span{
        display: inline;
    }
    span:first-letter{

        font-size: 50px;
        font-weight: bold;
        color: cyan;
    }
</style>
<span>北京时间2019年7月15日，国际脑研究组织-凯默理（IBRO-Kemali）基金会评奖委员会宣布：第12届IBRO-Kemali国际奖的获得者，为中国浙江大学医学院神经科学研究中心的胡海岚教授。
    <br>
    据浙江大学消息，该奖旨在全世界范围内表彰在基础与临床神经科学领域做出杰出贡献的45岁以下的科学家，每两年评选一位。奖金为25,000欧元，获奖者将受邀在欧洲规模最大、每两年一次的欧洲神经科学年会上发表主题演讲。</span>
</body>

第一行
  不管是自动获取固定的只要换行则后面的内容就不匹配

<style>
    div:first-line{
        font-size: 30px;
        color: red;
    }
</style>

<!--<div>-->
    <!--&lt;!&ndash;<br>&ndash;&gt;-->
    <!--<p></p>-->
    <!--&lt;!&ndash;情景1&ndash;&gt;-->
    <!--&lt;!&ndash;北京时间2019年7月15日，<br>&ndash;&gt;-->
    <!--<span>北京时间2019年7月15日，</span>-->
    <!--国际脑研究组织-凯默理（IBRO-Kemali）基金会评奖委员会宣布：第12届IBRO-Kemali国际奖的获得者，为中国浙江大学医学院神经科学研究中心的胡海岚教授。-->
    <!--据浙江大学消息，该奖旨在全世界范围内表彰在基础与临床神经科学领域做出杰出贡献的45岁以下的科学家，每两年评选一位。奖金为25,000欧元，获奖者将受邀在欧洲规模最大、每两年一次的欧洲神经科学年会上发表主题演讲。-->
<!--</div>-->

<nav>
    据浙江大学消息，该奖旨在全世界范围内表彰在基础与临床神经科学领域做出杰出贡献的45岁以下的科学家，每两年评选一位。奖金为25,000欧元，获奖者将受邀在欧洲规模最大、每两年一次的欧洲神经科学年会上发表主题演讲

</nav>
</body>

yanghainan0318

发布了26 篇原创文章 · 获赞 4 · 访问量 417

私信关注

Web前端-css3_1--选择器、伪类选择器

选择器