CSS高级选择器

一、属性选择器

以value开头的att属性的E元素：Eatt\^="value"{ ;}

ahref\^=http{background-color="red";}

css

a[href^=http]{
    background-color="red";
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href^=http]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <!-- 1背景变红 -->
        <a href class="active item" title="test website" target=" blank">2</a>
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

结果，1背景变红

以value结尾的att属性的E元素：Eatt$="value"{ ;}

ahref$=png{background-color: red;}

css

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

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href$=png]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <a href class="active item" title="test website" target=" blank">2</a>
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>
        <!-- 4背景变红 -->
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

结果，4背景变红

含有value的att属性的E元素：Eatt\*="value" { ;}

aclass\*=links { background: red; }

css

        a[class*=links]{
            background-color: red;
        }

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[class*=links]{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com" class="links item first" >1</a>
        <a href class="active item" title="test website" target=" blank">2</a>
        <!-- 除了2背景都变红 -->
        <a href="sites/file/test.html" class="links item">3</a>
        <a href="sites/file/test.png" class="links item"> 4</a>  
        <a href="sites/file/image,ipg" class="links item">5</a>
    </p>
</body>
</html>

除了2背景都变红

二、关系选择器

子代选择器：E元素的直接下一级的所有子元素F，对下下级无效：E>F{ ;}

body>p{ background: pink; }

相邻兄弟选择器：E元素的下一个平级F元素，紧贴着E：E+F{ ;}

.active+p { background: green; }

普通兄弟选择器：E元素之后的所有平级元素F：E~F{ ;}

.active~p{ background: yellow; }

三：结构伪类选择器

四：链接伪类选择器

五：伪元素选择器

在被选元素E的内容的前面插入内容，必须配合content属性：E::before{content:插入的内容;...;...;}

在被选元素E的内容的后面插入内容，必须配合content属性：E::after{content:插入的内容;...;...;}