Question

我正在使用(:target{})触发主导航和过滤器的不同状态。代码就像我期望的那样用于过滤器部分，但是当我使用相同的代码并更改几个参数时，它不起作用。

这是html

<nav id='main-nav' class='main-nav'>
  <ul>
    <li class='adopt'><a href="http://localhost/petlist/public/site/index">Adopt</a></li>
    <li class='post'><a href="http://localhost/petlist/public/site/post">Post</a></li>
    <li class='shelter'><a href="http://localhost/petlist/public/site/shelters">Shelters</a></li>
    <li class='navFavorites'><a href="http://localhost/petlist/public/site/favorites">Favorites</a></li>
    <li class='mypets'><a href="http://localhost/petlist/public/site/myPets">My Pets</a></li>
    <li class='login'><a href="http://localhost/petlist/public/site/login">Login</a></li>
    <li class='logout'><a href="http://localhost/petlist/public/logOut">Log out</a></li>
  </ul>
</nav>
<form id="filter" class="filter" action="http://localhost/petlist/public/site/index" accept-charset="utf-8" method="post">      
  <select name="petsDropDown" id="form_petsDropDown">
    <option value="allPets">All Pets</option>
    <option value="dogs">Dogs</option>
    <option value="cats">Cats</option>
    <option value="other">Other</option>
  </select>      
  <input name="petName" value="City, state or zip" type="text" id="form_petName" />              
  <select name="breedDropDown" id="form_breedDropDown">
    <option value="allBreeds">All Breeds</option>
    <option value="yorkie">Yorkshire Terrier</option>
    <option value="pit">Pit-Bull</option>
    <option value="poodle">Poodle</option>
  </select>    
</form>
<div class='page-wrap'>
  <header class='main-header'>
    <a class="open-nav" href="#main-nav"></a>           
    <a class="close-nav" href="#"></a>            
    <a class="open-filter" href="#filter"></a>        
    <a class="close-filter" href="#"></a>
  </header>
</div>

这是CSS

.page-wrap{
  width: 100%;
  transition: all 0.3s ease;
  -webkit-transition: 0.3s ease;
}


.main-header{
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  transition: all 0.3s ease;
  -webkit-transition: 0.3s ease;
  background-color: $topNavBlack;
  margin-bottom: $ten;
  border-bottom: 1px solid $petListBlue;
h1{
    font-family: steelfishregular;
    font-size: 35px;
    letter-spacing: 1px;
    width: 60px;
    color: $logoWhite;
    padding: $ten;
    margin: 0 auto;
}
.open-nav{
    display: block;
    width: 35px;
    height: 35px;
    background-image: url('../img/nav.svg');
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    border-radius: 3px;
    margin: $ten;
    background-color: $petListBlue;
}
.close-nav{
    display: none;
    width: 35px;
    height: 35px;
    background-image: url('../img/nav.svg');
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    border-radius: 3px;
    margin: $ten;
    background-color: $petListBlue;
}
.open-filter{
    display: block;
    width: 35px;
    height: 35px;
    background-image: url('../img/settings.svg');
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    margin: $ten;
    border-radius: 3px;
    background-color: $petListBlue;
}
.close-filter{
    display: none;
    width: 35px;
    height: 35px;
    background-image: url('../img/settings.svg');
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    margin: $ten;
    border-radius: 3px;
    background-color: $petListBlue;
  }
 }

.main-nav{
  position: fixed;
  top: 0;
  left:0;
  width: 0;
  height: 100%;
  z-index:2000;
  background-color: #303030;
  overflow: hidden;
  transition: height none;
  transition: width 0.3s ease;
  -webkit-transition: 0.3s ease;
  &:after {
   content: "";
   position: absolute;
   top: 0;
   height: 100%;
   width: 34px;
  }
}
#main-nav:target{
  width: 80%;
}
#main-nav:target + .page-wrap {
  margin-right: -80%;
  .open-nav {
    display: none; 
  }
  .close-nav {
    display: block;
  }
  .main-header {
    width: 100%;
  }
}

这是实际上像我想要的那样工作的CSS。

.filter{
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index:2000;
  background-color: #303030;
  overflow: hidden;
  transition: height none;
  transition: width 0.3s ease;
  -webkit-transition: 0.3s ease;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 34px;
  }
}
#filter:target {
  width: 80%;
}
#filter:target + .page-wrap {
  margin-left: -80%;
  .open-filter {
    display: none; 
  }
  .close-filter {
    display: block;
  }
  .main-header {
    width: 100%;
  }
}

Answer 1

尝试更改此

#main-nav:target + .page-wrap

到这个

#main-nav:target ~ .page-wrap

因为在.page-wrap

之后不会立即放置#main-nav

伪选择器：目标CSS

1 个答案: