CSS高级选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/hgh1998/article/details/93139291

CSS高级选择器

1.层次选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }

        /*后代选择器
        需求 : 获取body下面的所有p标签
        使用空格隔开

        body p{
            background-color: green;
        }
*/
        /*子选择器
        需求 : 只获得body下面的第一层元素

        body>p{
            background: slateblue;
        }

*/
        /*相邻兄弟选择器  , 向下 ...
        前提 : 定位到一个元素 E
        需求 : 获取指定元素的相邻兄弟元素

        #a+p{
            background: yellow;
        }

        */

        /*兄弟选择器
        前提 : 定位到一个元素 E
        需求 : 想获取指定元素的所有(指定元素下面的)兄弟元素

        格式 :

        E ~ F {
        }
        表示 : 获取指定E元素的同级元素的F标签
        */
        .aaa~p{
            background: bisque;
        }


    </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>

2.结构伪类选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        p,li{
            border: 1px solid red;
        }

        /*
        结构伪类选择器 :

        概念 :  伪元素和伪选择器 是CSS已经定义好的 ,我们拿来就可以用

        格式 :

        选择器 :伪元素{

        }

        伪元素 :
            :first-child -->父类的第一个子元素
            :last-child
            :
        ul li:first-child{
            background: yellow;
        }

        ul li:last-child{
            background: red;
        }

        /*需求:选择body下面的第二个元素
        E:nth-child(n) --> 需要找到E元素的父级元素 , 寻找父级元素的第n个子元素 ,
       判断他是不是E元素 , 如果不是,就不会被选择.
*/

        p:nth-child(2){
            background: blue;
        }


        /*请你选择body下面的第二个p元素
        E : nth-of-type(n)  --->找到E的父级元素 , 然后在他的父级元素中去找第n个E元素
        */
        p:nth-of-type(3){
            background: brown;
        }


    </style>



</head>
<body>

<h1>adsdas</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>




</body>
</html>

3.属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*给基础代码添加样式*/
        .demo a{
            float: left; /*浮动*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 5px;
        }


        /*属性选择器
        需要一个什么 : 属性


        a[id]{
            background: red;
        }


        a[id=name]{
            background: red;
        }


        a[href^="https"]{
            background: red;
        }


        a[href$="png"]{
            background: red;
        }

        a[class]{
            background: yellow;
        }

        a[href*="."]{
            background: yellow;
        }

*/


    </style>




</head>
<body>



<p class="demo">

    <a href="https://www.baidu.com" class="links" id="name">1</a>
    <a href=""  class="links">2</a>
    <a href="/1.png">3</a>
    <a href="/1.jpg"  class="links">4</a>
    <a href="/1.png" id="apple">5</a>
    <a href="https://blog.kuangstudy.com"  class="links">6</a>
    <a href="aaa">7</a>
    <a href="abc.doc"  class="links">8</a>
    <a href="abcd.doc" id="">9</a>

</p>







</body>
</html>