如何删除上一个 child div 的右边框？

Question

如何从最后一个 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>

我在上次删除右边框时遇到问题 div 我尝试使用 :last-child:border:remove;

Answer 1

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

.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>

Answer 2

CSS class 名称是进程，您使用的所有 div 都具有与 CSS 中相同的 class 名称。 ..

这意味着所有具有相同 class 名称的 DIV 将具有相同的属性，在这种情况下，右边界线..

所以您可以做的一件事就是更改 class 名称...

Answer 3

首先选择包含的父元素（.job-posting），然后将伪选择器 :last-child应用于[的包含元素=13=] class 您打算定位：

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

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

Answer 4

只需添加此 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>

Answer 5

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

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

Answer 6

你应该考虑一下多行的条件adaptation.Use class .row来显示一行，而不是只限于class .col-md-4。注意：不要在 class .process .

上使用 last-*

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

<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>

如何删除上一个 child div 的右边框？

How to remove border right form last child div?

html

css

border