Question

我是CSS3编程的新手。我正在研究一个简单的模块盒，我想知道是否＆gt;使任何真正不同。我试着和不使用它，每次按照预期的方式工作，所以我真的很想知道它用于什么。

  .modalDialog > div

代码：

.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 50px 20px 13px 20px;
    border-radius: 0px; /*changes from a rectangle to a circle*/
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

所有代码：

<html>
<head>
<title> </title>
<style>
/*
This is needed for the box to open properly
*/
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

/*
This is needed for the box to open properly
*/
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

/*
This is needed for the box to open properly
*/
.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 50px 20px 13px 20px;
    border-radius: 0px; /*changes from a rectangle to a circle*/
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
    background: #AAFF61; /*the color of the closing circle*/
    color: #FF00FF;      /*The x in the box*/
    line-height: 25px;   /*This is the size of the closing circle with X -- it can be made an oval*/
    position: absolute;
    right: -12px;        /*position of the closing circle and X (it can be move all over the screen */
    text-align: center;
    top: -10px;          /*moves the position of the circle and X*/
    width: 24px;         /*squishes the circle and X*/ 
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px; /*squishes circle and X*/
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
</style>
</head>
<body>
<a href="#oMl">Open Modal</a>
<div id="oMl" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2><center> Invalid Password and UserID!!!</center></h2>
        <p><b><center>Please re-enter information if you wish to continue the logon process!</center></b></p>
    </div>
</div>
</body>
</html>

Answer 1

>运算符是直接后代运算符。

选择器.modalDialog > div匹配元素div中任何modalDialog元素。选择器.modalDialog div匹配div元素中任意位置的任何modalDialog，而不仅仅是直接子元素。

如果div元素中只有modalDialog个子元素，而其中没有其他div个元素，则选择器匹配的内容没有区别。< / p>

示例：

<div class="modealDialog">
  <div>This will be matched by both selectors</div>
  <p>
    <div>This will not be matched by the selector with the direct descendant operator</div>
  </p>
  <div>This will be matched by both selectors</div>
</div>

是>＆gt;在这个CSS3中有所作为？

1 个答案: