如何删除最后一个子div的边框权限？

时间：2017-11-14 04:59:07

标签： html css css3 border

enter image description here

如何从最后一个div中删除右边界？

.process {
  border-right: 1px solid #e0e0e0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

我在使用：last-child：border：remove;

尝试的最后一个div中删除右边框时遇到问题

6 个答案:

答案 0 :(得分：1)

使用CSS :last-child pseudo-class selector获取最后一个孩子。将选择器应用于父级并获取嵌套子级，因为父级是兄弟姐妹。

.process {
  border-right: 1px solid #e0e0e0;
}

.col-md-4:last-child .process {
  border-right: none;
}
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

首先选择包含特定的父元素（.job-posting），然后将伪选择器 :last-child应用于.process类的包含元素你打算瞄准：

.job-posting .col-md-4:last-child .process {
    border-right: 0px;
}

由于您正在使用最有可能在其他地方使用的框架类，因此您应该使用某种独特的选择器，例如.job-posting，以避免在其他页面上使用相同的冲突样式或使用相同的元素类或类似的嵌套或DOM结构。

答案 2 :(得分：0)

只需添加此css：

.job-posting .col-md-4:last-child .process {
  border-right: 0;
}


.process {
  border-right: 1px solid #e0e0e0;
}
.job-posting .col-md-4:last-child .process {
  border-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="job-posting">
  <div class="row">
    <div class="col-md-4">
      <div class="process">
        <header>STEP 1</header>
        <div class="process-content">
          <i class="fa fa-user-plus icon" aria-hidden="true"></i>
          <h1>Signup</h1>
          <p>Sign Up as a Company or an Individual</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 2</header>
        <div class="process-content">
          <i class="fa fa-upload icon" aria-hidden="true"></i>
          <h1>Upload Resume</h1>
          <p>Upload your resume and provide us with details of you experience and skills</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="process">
        <header>STEP 3</header>
        <div class="process-content">
          <i class="fa fa-smile-o icon" aria-hidden="true"></i>
          <h1>Get Hired</h1>
          <p>Browse the available job postings and get hired according to your skills</p>
        </div>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

.process:not(:last-child){
    border-right: 1px solid #e0e0e0;
}

将样式应用于除最后一个孩子之外的所有元素。

答案 4 :(得分：0)

你应该考虑多行适应的条件。使用类.row来显示一行，而不仅仅是限制类.col-md-4。 注意：不要在课程last-*上使用.process。

＆＃13;
＆＃13; 
.process {
    border-right: 1px solid #e0e0e0;
  }
  .row div:last-child .process{
    border-right: none;
  }
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
<html>
<head>
  <title>Test</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
  .process {
    border-right: 1px solid #e0e0e0;
  }
  .row div:last-child .process{
    border-right: none;
  }
  </style>
</head>
<body>
  <div class="job-posting">
    <div class="row">
      <div class="col-md-4">
        <div class="process">
          <header>STEP 1</header>
          <div class="process-content">
            <i class="fa fa-user-plus icon" aria-hidden="true"></i>
            <h1>Signup</h1>
            <p>Sign Up as a Company or an Individual</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="process">
          <header>STEP 2</header>
          <div class="process-content">
            <i class="fa fa-upload icon" aria-hidden="true"></i>
            <h1>Upload Resume</h1>
            <p>Upload your resume and provide us with details of you experience and skills</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="process">
          <header>STEP 3</header>
          <div class="process-content">
            <i class="fa fa-smile-o icon" aria-hidden="true"></i>
            <h1>Get Hired</h1>
            <p>Browse the available job postings and get hired according to your skills</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="process">
          <header>STEP 1</header>
          <div class="process-content">
            <i class="fa fa-user-plus icon" aria-hidden="true"></i>
            <h1>Signup</h1>
            <p>Sign Up as a Company or an Individual</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process">
          <header>STEP 2</header>
          <div class="process-content">
            <i class="fa fa-upload icon" aria-hidden="true"></i>
            <h1>Upload Resume</h1>
            <p>Upload your resume and provide us with details of you experience and skills</p>
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="process">
          <header>STEP 3</header>
          <div class="process-content">
            <i class="fa fa-smile-o icon" aria-hidden="true"></i>
            <h1>Get Hired</h1>
            <p>Browse the available job postings and get hired according to your skills</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：-1)

CSS类名是进程，你使用的所有div都有与CSS中相同的类名...

这意味着具有相同类名的所有DIV将具有相同的属性，在本例中为右边界线。

所以你可以做的一件事是更改班级名称......

相关问题
最新问题