Question

我浏览了MDN CSS文档，但是我没有看到任何可以选择我想要样式的元素的组合器。

＆＃13;

/* second-span red when first-span is present */
[first-span] ~ [second-span] {
  color: red;
}

/* first-span blue ONLY when second-span is present */
/* HOW TO ? */
[first-span] /* combinator doesn't exist */ {
  color: blue;
}

＆＃13;

<p>
  <span first-span="">I am #1</span><br>
  <span second-span="">I am #2</span>
</p>

<p>
  <span first-span="">I am #1</span>
  <!-- no second span -->
</p>

<p>
  <span second-span="">I am #2</span>
</p>

＆＃13;

我尝试将一个样式应用于元素，只要在下面的兄弟姐妹中找到另一个指定的兄弟。

在代码片段中，如果在上述兄弟节点中找到选择表达式中的左手，则第一个CSS语句用于设置元素的样式。但似乎没有组合器产生相反的效果。

我该怎么做？

Answer 1

通过将nth-child与其他伪类组合，它使您能够从具有特定长度的元素集中指定元素。

使用<br>标记作为<p>的子元素，这有点复杂，但是，这仍然可以满足您的需求：

＆＃13;

/* this will color the first element of three children nested in a p tag blue */
p span:nth-child(1):nth-last-child(3){
  color: blue;
}

/* this will color the third element of three children nested in a p tag red */
p span:nth-child(3):nth-last-child(1) {
    color: red;
}

＆＃13;

<p>
  <span first-span="">I am #1</span><br>
  <span second-span="">I am #2</span>
</p>

<p>
  <span first-span="">I am #1</span>
  <!-- no second span -->
</p>

<p>
  <span second-span="">I am #2</span>
</p>

＆＃13;

这是针对三个元素中的第一个元素，然后是三个元素中的最后一个元素。

Answer 2

您可以使用jQuery（以保持干净），如下所示：

<?php
if( $_SERVER['REQUEST_METHOD'] == 'POST' )
{
    $flags = 'style="display:none;"';
    $message = $_POST['message'];
    $email="me@me.com";
    $to = "someone@somewhere.com";
    $subject = "test Message with attachment";
    $uploadfile = tempnam(sys_get_temp_dir(), sha1($_FILES['file']['name']));
    $msg = '';

    if( move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile) )
    {
        // Upload handled successfully
        // Now create a message
        // This should be somewhere in your include_path
        require '../PHPMailerAutoload.php';
        $mail = new PHPMailer;
        $mail->setFrom($email);
        $mail->addAddress($to);
        $mail->Subject = $subject;
        $mail->Body = $message;

        // Attach the uploaded file
        $mail->addAttachment($uploadfile, 'My uploaded file');
        if (!$mail->send()) {
            $msg .= "Mailer Error: " . $mail->ErrorInfo;
        } else {
            $msg .= "Message sent!";
        }
    } else
    {
        $msg .= 'Failed to move file to ' . $uploadfile;
    }

    exit( $msg );
} else { ?>
<!-- end of form processing-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test e-mail attachment form</title>
</head>
<body>

<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" <?php echo $flags;?>>
    <input type="hidden" name="status" value="sent">
    <table >
    <tr>
        <td>
            Message:
        </td>
        <td>
             <input type="text" name="message" size="20" required>
        </td>
    </tr>


    <tr>
        <td>
            Attach a file: 
        </td>
        <td>

<input type="file" name="uploaded_file">
                </td>
    </tr>
        <tr>
        <td colspan="2">
            <input type="submit" value="Send message">
        </td>
    </tr>
</table>

</form>

</body>
</html>
<?php }?>

Check if element exists in jQuery

如果存在指定的兄弟元素，如何更改html元素的css样式？

2 个答案: