Question

我试图条纹交替元素的颜色。但我希望行颜色仅交替显示可见行。如果你看一下下面这里是我试图让它运作的尝试。

<!DOCTYPE html>
<html>
<head>
<style> 
p:not(.hide):nth-child(odd)
{
background:#ff0000;
}
p:not(.hide):nth-child(even)
{
background:#0000ff;
}
.hide { display:none; }
</style>
</head>
<body>

<p>The first paragraph.</p>
<p class="hide">The second paragraph.</p>
<p>The third paragraph.</p> 

</body>
</html>

Answer 1

您无法使用纯CSS执行此操作，因为:nth-child选择器是针对元素计算的，:not不会过滤DOM中的元素位置。您需要使用JavaScript来实现完全灵活的解决方案。

你仍然可以通过.hide :nth-child之后的元素替换<{1}}来实现

.hide + p:nth-child(odd) {
    background: #0000ff;    
}

您可以继续为兄弟.hide和p的越来越多组合添加类似的规则，但这非常不灵活。

Answer 2

诀窍是隐藏具有不同标记的行，而不是类。在我的例子中，我使用“del”标签来隐藏。

<?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    class Main extends CI_Controller {

        function __construct() {
            parent::__construct();
            $this->load->model('login');
            $this->load->library('form_validation');
            $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
        }

        function insert_come()
        {

          //Validating Name Field
          $this->form_validation->set_rules('letter_name', 'ខ្លឹមសារលិខិត',  'required|min_length[5]|max_length[15]');

          $this->form_validation->set_rules('letter_number', 'លេខលិខិត', 'required|min_length[10]|max_length[50]');

          if ($this->form_validation->run() == FALSE)
          {
               //$this->load->view('form/input_data');
          }
          else
          {
            $msg['msg'] = "";
            $letter_name = $this->input->post("letter_name");
            $letter_number = $this->input->post("letter_number");

            $data = array("Name" => $letter_name, "Letter_Number" => $letter_number);

            $res = $this->login->add_letter($data);
            if($res == 1)
            {
                $msg['msg'] = "Data added successfully into database" ;
            }
          }

          $this->load->view('form/input_data', $msg);
        }
    }

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

Class Login extends CI_Model {

    function add_letter($data=NULL)
    {
      $this->db->insert('come_list', $data); 
      $result =  $this->db->affected_rows();
      if($result == 1)
      {
        return $result;
      }
      else
      {
        return FALSE ;
      }

    }
}
?>

Answer 3

如果您有权访问隐藏和显示元素的代码，则可以在每个原始隐藏元素之后添加另一个辅助隐藏元素，因此将为css选择器保留奇偶校验。另外，当原始元素再次出现时，请删除以下每个隐藏的辅助元素。

CSS3奇数甚至只有可见行

3 个答案: