[前端]高级选择器

WEB前端 waitig 523℃ 百度已收录 0评论

Advanced Selector

伪类


:target 伪类
表示元素被hash匹配时的状态
比如 URL 是 /post/a#heading 时,name 为 heading
的元素处于被 target 的状态

<nav>
  <a href="#p1">History</a>
  <a href="#p2">Geography</a>
  <a href="#p3">Plants</a>
</nav>
<p id="p1">Native Americans have inhabited the area since
long before white settlers first saw Lassen. </p>
<p id="p2">The park is located near the northern end of
the Sacramento Valley. </p>
<p id="p3">Lying at the northern end of the Sierra Nevada
forests ecoregion, Lassen Volcanic National Park preserves
a landscape nearly as it existed before Euro-American
settlement</p>

<style>
  p {
    display: none;
  }
  p:target {
    display: block;
  }
</style>

:lang 伪类
元素匹配上指定语言时的状态
浏览器通过 lang 属性获得语言信息

:nth-child
通过 :nth-child(an+b) 选中某些子元素
例如 :nth-child(3n) 选中第 3、6、9 … 个子元素
a 可以为负数

//n也可以为0

<style>
  li:nth-child(3n+1) {//满足3n+1
    color: red;
  }
</style>

<style>
  li:nth-child(odd) {//奇数
    color: red;
  }
  li:nth-child(even) {//偶数
    color: green;
  }
</style>

:nth-of-type
//不区分类型的子元素

<article>
  <h1>This is a test</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</article>

<style>
  article :nth-child(3n+1) {
    color: red;
  }
  article :nth-of-type(3n+1) {
    text-decoration: underline;
  }
</style>

:first-child

:last-child

:not()
排除匹配的元素
比如 img:not([alt]) 选择没有写 alt 属性的图片

<style>
  button:not(:last-child) {
    margin-right: 2em;
  }
</style>

其它选择器

:nth-last-child()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-child
:only-of-type

:empty

<ul>
  <li>Item 1</li>
  <li></li>
  <li>Item 2</li>
</ul>

<style>
li:empty {
  display: none;
}
</style>

伪元素


::first-line

<p>Species that are typically found in these forested areas
are black bear, fox, mule deer, marten, cougar, brown creeper,
a variety of chipmunk species, raccoon, mountain chickadee, a
variety of squirrel species, white-headed woodpecker, coyote,
bobcat, weasel, a variety of mouse species, long-toed
salamander, skunk, and a wide variety of bat species.</p>

<style>
p::first-line {
  color: red;
}
</style>

::first-letter

兄弟选择器
//都是只对E之后的有效,弟弟选择器
相邻兄弟选择器 E + F//和E紧挨着的F
通用兄弟选择器 E ~ F//与E是同一级的F

:checked ~ F

<div class="toggle">
  <input type="checkbox" checked id="t">
  <label for="t"></label>
</div>

<style>
.toggle {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),
    0px 1px 0px rgba(255,255,255,0.2);
}
 .toggle:after {
  content: 'OFF';
  color: #fff;
  position: absolute;
  right: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.toggle:before {
  content: 'ON';
  color: #f66;
  position: absolute;
  left: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
}
.toggle label {
  display: block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%,
    #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  transition: all 0.4s ease;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
.toggle input[type=checkbox] {
  visibility: hidden;
}
.toggle input:checked + label {
  left: 43px;
}
</style>

本文由【waitig】发表在等英博客
本文固定链接:[前端]高级选择器
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)