css3子选择器

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        .parent {
            border: 1px solid red;
            height: 60px;
            margin: 5px;
        }
        .son {
            border: 1px solid red;
            height: 20px;
        }
        .descendant {
            border: 1px solid red;
            height: 10px;
            background-color: green;
        }
        /*
          元素选择器:其中E是元素,也是选择器(E表示element元素的意思)
          E {...}
          =============================================================
          class选择器:其中E是元素选择器,E.class是元素选择器和类选择器的复合选择器
          E.class {...}
          比如:div.son
          =============================================================
          属性选择器:E表示元素选择器
          E[attr=value]或E[attr]
          比如:div[id=abc]
          =============================================================
          子选择器:其中selector1、selector2都是有效的选择器
          selector1>selector2 {...}
        */
        .parent>div.son {
            background-color: yellow;
        }
    style>
head>
<body>
    <div class="parent">
        <div class="son">
            <div class="descendant">div>
        div>
        <div class="son">div>
    div>
body>
html>

你可能感兴趣的:(css3子选择器)