css 为什么相邻兄弟选择器不能按预期工作[关闭]

fnvucqvd  于 2023-04-23  发布在  其他
关注(0)|答案(3)|浏览(147)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
21小时前关闭
截至19小时前，社区正在审查是否重新讨论这个问题。
Improve this question
我想突出显示日历中的日期范围（月视图）。日期范围的两边都应该四舍五入。我可以四舍五入左边，但我不能让右边工作。这里有什么问题？

/* For the first highlighted li element in any range (this works well) */
.days li:not(.highlighted) + li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* For the last highlighted li element in any range (this doesn't work) */
.days li.highlighted + li:not(.highlighted) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<div class="calendar">
    <ul class="weeks">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
    <ul class="days">
      <li class="inactive">26</li>
      <li class="inactive">27</li>
      <li class="inactive">28</li>
      <li class="inactive">29</li>
      <li class="inactive">30</li>
      <li class="inactive">31</li>
      <li>1</li>
      <li class="highlighted">2</li>
      <li class="highlighted">3</li>
      <li>4</li>
    </ul>
</div>

我还提供了the full HTML code and an example in a JSFiddle。
下面是完整的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  min-height: 100vh;
  background: #9B59B6;
}

.wrapper {
  width: 95%;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.calendar {
  padding: 20px;
}

.calendar ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
}

.calendar .days {
  margin-bottom: 20px;
}

.calendar li {
  color: #333;
  width: calc(100% / 7);
  font-size: 1.07rem;
}

.calendar .weeks li {
  font-weight: 500;
  cursor: default;
}

.calendar .days li {
  z-index: 1;
  cursor: pointer;
  position: relative;
  margin-top: 30px;
}

.days li.highlighted {
  background-color: lightblue;
}

/* For the first highlighted li element in any range */

.days li:not(.highlighted)+li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* For the last highlighted li element in any range */

.days li.highlighted+li:not(.highlighted) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<div class="wrapper">
  <div class="calendar">
    <ul class="weeks">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
    <ul class="days">
      <li class="inactive">26</li>
      <li class="inactive">27</li>
      <li class="inactive">28</li>
      <li class="inactive">29</li>
      <li class="inactive">30</li>
      <li class="inactive">31</li>
      <li>1</li>
      <li>2</li>
      <li class="highlighted">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li class="highlighted">19</li>
      <li class="highlighted">20</li>
      <li class="active highlighted">21</li>
      <li class="highlighted">22</li>
      <li class="highlighted">23</li>
      <li class="highlighted">24</li>
      <li class="highlighted">25</li>
      <li class="highlighted">26</li>
      <li class="highlighted">27</li>
      <li class="highlighted">28</li>
      <li class="highlighted">29</li>
      <li class="highlighted">30</li>
      <li class="inactive highlighted">1</li>
      <li class="inactive highlighted">2</li>
      <li class="inactive highlighted">3</li>
      <li class="inactive">4</li>
      <li class="inactive">5</li>
      <li class="inactive">6</li>

    </ul>
  </div>
</div>
css

3条答案

按热度按时间
8yparm6h

8yparm6h1#

问题是，使用.days li.highlighted + li:not(.highlighted)时，您选择的是最后一个.highlighted之后的元素，并且该元素没有浅蓝色背景，因此无法显示圆形边框。
如Quentin所示，没有可靠的CSS选择器来针对具有特定类的最后一个元素。最安全的方法是将类添加到具有.highlighted类的最后一个元素。
如果你不能做到这一点，你可以使用一个pseudo元素来制作最后一个圆形边框：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  min-height: 100vh;
  background: #9B59B6;
}
.wrapper{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.calendar{
  padding: 20px;
}
.calendar ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
}
.calendar .days{
  margin-bottom: 20px;
  overflow: hidden;
}
.calendar li{
  color: #333;
  width: calc(100% / 7);
  font-size: 1.07rem;
}
.calendar .weeks li{
  font-weight: 500;
  cursor: default;
}
.calendar .days li{
  z-index: 1;
  cursor: pointer;
  position: relative;
  margin-top: 30px;
}
.days li.highlighted{
  background-color: lightblue;
}

/* For the first highlighted li element in any range */
.days li:not(.highlighted) + li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* For the last highlighted li element in any range */

li.highlighted {
  position: relative;
}
li.highlighted::after {
  content: '';
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  border-radius: 0 10px 10px 0;
  background: inherit;
}
<div class="wrapper">
  <div class="calendar">
    <ul class="weeks">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
    <ul class="days">
      <li class="inactive">26</li>
      <li class="inactive">27</li>
      <li class="inactive">28</li>
      <li class="inactive">29</li>
      <li class="inactive">30</li>
      <li class="inactive">31</li>
      <li>1</li>
      <li>2</li>
      <li class="highlighted">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li class="highlighted">19</li>
      <li class="highlighted">20</li>
      <li class="active highlighted">21</li>
      <li class="highlighted">22</li>
      <li class="highlighted">23</li>
      <li class="highlighted">24</li>
      <li class="highlighted">25</li>
      <li class="highlighted">26</li>
      <li class="highlighted">27</li>
      <li class="highlighted">28</li>
      <li class="highlighted">29</li>
      <li class="highlighted">30</li>
      <li class="inactive highlighted">1</li>
      <li class="inactive highlighted">2</li>
      <li class="inactive highlighted">3</li>
      <li class="inactive">4</li>
      <li class="inactive">5</li>
      <li class="inactive">6</li>

    </ul>
  </div>
</div>

请注意：

  • pseudo元素被应用到所有.highlighted类的元素上。但是它只能在.highlighted之后的第一个元素上看到
  • 我在.days元素上添加了overflow: hidden;，以隐藏不应该被看到的伪元素（在每行的末尾）
赞(0）分享  回复(0）举报  2023-04-23
vd8tlhqk

vd8tlhqk2#

这是你的代码的一个现场演示：

li.highlighted {
  background: #aaf;
}

.days li:not(.highlighted)+li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.days li.highlighted+li:not(.highlighted) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<ul class=days>
  <li>1</li>
  <li class=highlighted>2</li>
  <li class=highlighted>3</li>
  <li>4</li>
</ul>

你的目标是li:not(.highlighted)，但由于它没有可见的边框或背景颜色，你看不到任何区别。
当我在其他li元素上设置背景时，你可以看到 4 上的半径：

li {
  background: #afa;
}

li.highlighted {
  background: #aaf;
}

.days li:not(.highlighted)+li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.days li.highlighted+li:not(.highlighted) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<ul class=days>
  <li>1</li>
  <li class=highlighted>2</li>
  <li class=highlighted>3</li>
  <li>4</li>
</ul>

您希望以li.highlighted为目标，但它不是选择器的主题。
:has() psuedo-class可以让突出显示的li元素成为主题**，但浏览器仍然缺乏支持**（大多数主流浏览器现在都支持它，但Firefox的实现仍然有缺陷，并被锁定在功能标志之后）。

li {
  background: #afa;
}

li.highlighted {
  background: #aaf;
}

.days li:not(.highlighted)+li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.days li.highlighted:has(+ li:not(.highlighted)) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<ul class=days>
  <li>1</li>
  <li class=highlighted>2</li>
  <li class=highlighted>3</li>
  <li>4</li>
</ul>

最安全的做法是添加一个额外的类：

li {
  background: #afa;
}

li.highlighted {
  background: #aaf;
}

.days li:not(.highlighted)+li.highlighted {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.days li.highlighted.end-of-set {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
<ul class=days>
  <li>1</li>
  <li class=highlighted>2</li>
  <li class="highlighted end-of-set">3</li>
  <li>4</li>
</ul>
赞(0）分享  回复(0）举报  2023-04-23
xghobddn

xghobddn3#

另一种选择（除了已经提出的解决方案之外）是在.days li.highlighted + li:not(.highlighted)中使用:before和:after，并使用以下颜色：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  min-height: 100vh;
  background: #9B59B6;
}

.wrapper {
  width: 95%;
  margin: auto;
  margin-top: 10px;
  ;
}

.calendar {
  --background: #fff;
  --highlighted: lightblue;
  --radius: 10px;
  padding: 20px;
  background: var(--background);
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12)
}

.calendar ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
}

.calendar .days {
  margin-bottom: 20px;
}

.calendar li {
  color: #333;
  width: calc(100% / 7);
  font-size: 1.07rem;
}

.calendar .weeks li {
  font-weight: 500;
  cursor: default;
}

.calendar .days li {
  z-index: 1;
  cursor: pointer;
  position: relative;
  margin-top: 30px;
  padding:0 var(--radius);
}

/* highlighted styles */

.days li.highlighted {
  background-color: var(--highlighted);
}

.days li:not(.highlighted) + li.highlighted {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.days li.highlighted + li:not(.highlighted) {
  position: relative;
}

.days li.highlighted + li:not(.highlighted):before,
.days li.highlighted + li:not(.highlighted):after{
  content: '';
  position: absolute;
  width: var(--radius);
  top: 0;
  bottom: 0;
  right: 100%;
  pointer-events: none;
}

.days li.highlighted + li:not(.highlighted):before{
  background-color: var(--background);
}

.days li.highlighted + li:not(.highlighted):after{
  background-color: var(--highlighted);
  border-radius:0 var(--radius) var(--radius) 0;
}
<div class="wrapper">
  <div class="calendar">
    <ul class="weeks">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
    <ul class="days">
      <li class="inactive">26</li>
      <li class="inactive">27</li>
      <li class="inactive">28</li>
      <li class="inactive">29</li>
      <li class="inactive">30</li>
      <li class="inactive">31</li>
      <li>1</li>
      <li>2</li>
      <li class="highlighted">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li class="highlighted">19</li>
      <li class="highlighted">20</li>
      <li class="active highlighted">21</li>
      <li class="highlighted">22</li>
      <li class="highlighted">23</li>
      <li class="highlighted">24</li>
      <li class="highlighted">25</li>
      <li class="highlighted">26</li>
      <li class="highlighted">27</li>
      <li class="highlighted">28</li>
      <li class="highlighted">29</li>
      <li class="highlighted">30</li>
      <li class="inactive highlighted">1</li>
      <li class="inactive highlighted">2</li>
      <li class="inactive highlighted">3</li>
      <li class="inactive">4</li>
      <li class="inactive">5</li>
      <li class="inactive">6</li>

    </ul>
  </div>
</div>

在这种情况下，选择不会超出单元格，如@web-tiki解决方案。

赞(0）分享  回复(0）举报  2023-04-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com