HTML 高级选择器

最新推荐文章于 2023-12-13 17:23:49 发布

蚂蚁的头发

最新推荐文章于 2023-12-13 17:23:49 发布

阅读量617

点赞数 3

分类专栏： html 选择器文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_65066169/article/details/127145816

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

选择器

2 篇文章 0 订阅

订阅专栏

高级选择器: 层次选择器 , 伪类选择器 , 属性选择器,交集选择器 , 全集选择器 , 补级选择器

1.层次选择器: 标签之间的包含 ,同级关系的表示
a标签包含b标签和c标签: a是b和c的父亲,b和c是兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        div>h1{   /*子选择器*/
            color: #faa53b;

        }
        div h1{  /*后代选择器*/
            color:red;
        }
        h1+h2{ /*相邻兄弟*/
            color: green;
        }
        h1~h2 { /*同兄弟*/
        color: #1f87cc;

        }

    </style>

</head>
<body>

    <div>
            <h1>徐英岳</h1>
            <h2>李四</h2>
          <ul>
           <li>张三</li>
            <li>
            安安
            </li>
           </ul>

</div>

</body>
</html>

层次选择器效果如下

2.伪类选择器:直接指定第几个儿子
E F:first-child E 标签里面的第一个F标签,锁定第一个位置

E F:first-of-type E标签里面的第一个F标签,不锁定第一个位置

E F:first-child E 标签里面的最后一个F标签,锁定最后一个位置

E F:first-of-type E标签里面的最后一个F标签,不锁定最后一个位置

E F:nth-child(n) E标签里面的第n个F标签,锁定第n个位置

E F:nth-of-type(n) E标签里面的第n个F标签,不锁定第n个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        div h2:first-child { /*第一行,第一个h2*/
            color: red;
        }
        div h2:first-of-type{  /*第一个h2*/
            color: #21ff56;
        }
        div h2:last-child{ /*最后一行最后一个h2*/
            color: #1f87cc;
        }
        div h2:first-of-type{ /*最后一个h2*/

        }
        div h2:nth-child(2){ /*第二行,第二个h2*/

          }
        div h2:nth-of-type(2) { /*第二个h2*/
        }
        div h2:nth-child(odd){ /*奇数h2*/

        }
        div h2:nth-of-type(even) { /*偶数h2*/
        }
        /*odd:奇数行  even:偶数行*/



    </style>
</head>
<body>
   <div>
       <h1>徐英岳</h1>
       <h1>张三</h1>
       <h2>李四</h2>
       <h2>王五</h2>
       <h3>李鹏</h3>
       <h3>安安</h3>

   </div>



</body>
</html>

伪类选择器效果如下

3.属性选择器:

以标签的属性和值作为条件
语法: E[属性=值][...] 具有指定属性且值相等的E标签
E[属性^=值][...] 具有指定属性且以值开头的E标签
E[属性$=值][...] 具有指定属性且以值结尾的E标签
E[属性*=值][...] 具有指定属性且包含值的E标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        div[id]{ /*具有id属性的div标签*/
            color: red;
        }
        div[id][name]{ /*具有id和name属性的div标签*/
            color: #21ff56;
        }
        div[name=bb] { /*具有name属性且值的bb的div标签*/
            color: aqua;
        }
        div[name^=bb] { /*具有name属性且值以b开头的div标签*/
            color: #ff2488;
        }
        div[name$=bb] { /*具有name属性且值结尾b的div标签*/
            color: #2044ff;
        }
        div[name*=bb] { /*具有name属性且包含b的div标签*/
            color: #faa53b;
        }


    </style>
</head>
<body>
       <div id="ab" name="ad">徐</div>
       <div id="ac">徐英</div>
       <div name="bb">徐英岳</div>
       <div name="bc">哈哈哈哈</div>
       <div name="abc">好好好好</div>



</body>
</html>

属性选择器效果如下,本人不推荐使用,太麻烦了,但需要的时候可以用用!!!!!

4.交集选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        #a.b{ /*同时具有*/
            color: red;
        }
    </style>
</head>
<body>
     <div id="a" class="b">信息1</div>
     <div id="aa" class="bb">信息2</div>
</body>
</html>

效果如下

5.交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全集选择器</title>
    <style>
        h1,h2,p,div,a{
            color: red;
        }
        *{  /*所有标签*/

        }
      div*{  /*div所有标签*/

        }
    </style>
</head>
<body>
     <h1>修复</h1>
     <h2>法鸡</h2>
     <p>分为</p>
     <div>染发</div>
     <a>规范</a>


</body>
</html>

效果如下

6.补充选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        h1,h2,p,.a,#one{
            color:blue;
            font-size:14px;
        }
    </style>
</head>
<body>
   <h1>徐英岳</h1>
   <h2>徐英岳</h2>
   <p>徐英岳</p>
   <div class="a">
       徐英岳
   </div>
   <div id="one">
       徐英岳
   </div>
</body>
</html>

并集选择器,就是把它们和在一起写,要用逗号隔开

效果如下