Welcome, Old Sport!

功能强大的CSS3伪类选择器:checked

by ilikecss ON 2014/08/27 7719

功能强大的CSS3伪类选择器现在我们可以利用CSS3强大的选择器功能制作一些javascript的事件,根据主题我制作了这个布局“显示/隐藏”的功能。本文灵感来源于full screen layout with page transitions, 当然CSS3事件效果平滑度浏览器兼容性可能要比javascript降低不少。为了简单起见,本文只提供基本的HTML和CSS的代码演示。

如何理解”:checked”

将一种或多种样式应用于所选的表单控件元素。

这款CSS3事件主旨在于使元素状态伪类选择处于某种状态(已启用、已禁用或已选择(已选中)),利用这些条件我们就可以自由操作元素事件了。

HTML CODE

<input type="radio" class="radio" name="pages" id="exit" checked />
<div class="page demo2">
  <input type="radio" class="radio" name="pages" id="page_1" />
  <section class="section-container section-one">
    <label for="exit" class="check-label exit-label">
     关闭按钮
    </label>
    <label for="page_1" class="page-label check-label">
      <span>页面编号</span>
    </label>
    <header class="section-header">
      <div class="section-content">
        <h1>
          文章标题
        </h1>
      </div>
    </header>
    <div class="section-info">
      <div class="section-content">
        <p>
          文章内容...
        </p>
      </div>
    </div>
  </section>
 
  <!-- 复制相同的框架,定义不同的ID -->
 
</div>

每一个section容器里都会有<input type="radio">,因为我们需要运用到selector (+)来使事件运转起来。请参照下面CSS样式一起理解:

CSS CODE

.section-container {
  transition: 0.4s all;
  transform-origin: center center;
}
.section-one {
  transform: translate(0%, 0%);
}
.section-two {
  transform: translate(0%, 100%);
}
.section-three {
  transform: translate(100%, 0%);
}
.section-four {
  transform: translate(100%, 100%);
}
/* Checked动作后的CSS样式 */
:checked + .section-container {
	transform: translate(0%, 0%);
	width: 100%;
	height: 100%;
	z-index: 5;
	overflow: auto;
}
:checked + .section-one {
    background: #000;
}
:checked + .section-two {
    background: #FFF;
}
:checked + .section-three {
    background: #F00;
}
:checked + .section-four {
    background: #FF0;
}

整个CSS的目的就是选中前内容是隐藏的,当选中后(checked)显示出来而已,只是运用了CSS样式的”display:none”

目前CSS3选择器支持IE8以上, Firefox、Chrome等主流浏览器都支持,具体参照Can I Use的表格。

can-i-use-css3-selectors

2条评论
  1. #1

    ilikecss说道:

    消灭0回复! :evil:

  2. #2

    蜜桃说道:

    技术文章,收藏




TOP