css3 选择器(三)-阿里云开发者社区

开发者社区> 安全> 正文
登录阅读全文

css3 选择器(三)

简介:

css3选择器(一)

css3 选择器(二)

这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始。

一、【:enabled】选择器

一看这个属性就知道是专为表单元素提供的。在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。

举例:可用输入框设置样式。

复制代码
<meta charset="utf-8">
<style>
div {
    margin: 30px;
}
input[type="text"]:enabled {
    border: 1px solid #f36;
    box-shadow: 0 0 5px #f36;
}
</style>

<form action="#">
<div>
<label>可用输入框:<input type="text"/></label>
</div>
<div>
<label>禁用输入框:<input type="text" disabled="disabled"/></label>
</div>
</form>
复制代码

二、【:disabled】选择器

看到有【:enabled】选择器,就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反,用来匹配不可用的表单元素。要使用:disabled选择器,需要在表单元素中设置"disbled"属性。

举例:

复制代码
<meta charset="utf-8">
<style type="text/css">
form {
    margin: 30px;
}
div {
    margin: 10px;
}
input {
    padding: 10px;
    border: 1px solid orange;
    background: #fff;
    border-radius: 5px;
}
input[type="submit"] {
    background: orange;
    color: #fff;
}
input[type="submit"]:disabled {
    background: #eee;
    border-color: #eee;
    color: #ccc;
}
</style>

<form action="#">
<div><input type="text"/></div>
<div>
<input type="submit"value="我要回到上一步"/>
<input type="submit"value="禁止点下一步"disabled />
</div>
</form>
复制代码

三、【:checked】 选择器

在表单元素中,单选按钮和复选按钮都有选中未选中状态。如果有做过尝试就知道,要设置这两个按钮默认样式是比较困难的。而在css3中,可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

这个是个大招,可以省不少功夫。

举例:使用:checked选择器模拟实现复选框样式。【坑:点选框时无法选中,必须点文字才能选中】update:15/10/23

复制代码
<meta charset="utf-8">
<style type="text/css">
form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}
</style>

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="username" /><span></span>
    </div>
    <label for="username">我是选中状态</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="userpwd" /><span></span>
    </div>
    <label for="userpwd">我是未选中状态</label>
  </div>
</form>
复制代码

模拟实现一个选中和未选中的样式。

没有样式时的效果图如下,

最终添加样式后效果如下。

举例::checked状态选择器模拟单选按钮样式。

复制代码
<meta charset="utf-8">
<style type="text/css">
form {
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
    margin: 30px auto;
}
.wrapper {
    margin-bottom: 10px;
}
.box {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    background: orange;
    vertical-align: middle;
    border-radius: 100%;
}
.box input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;/*使input按钮在span的上一层,不加点击区域会出现不灵敏*/
}
.box span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    margin: -5px 0  0 -5px;
    z-index: 1;
}
input[type="radio"] + span {
    opacity: 0;
}
input[type="radio"]:checked + span {
    opacity: 1;
}
</style>

<form action="#">
<div class="wrapper">
<div class="box">
<input type="radio" checked="checked" id="male" name="gender"/>
<span></span>
</div>
<label for="male"></label>
</div>

<div class="wrapper">
<div class="box">
<input type="radio" id="female" name="gender"/>
<span></span>
</div>
<label for="female"></label>
</div>
</form>
复制代码

四、【::selection】 选择器

设置选中文本样式,详情见CSS3 ::selection选择器,用的好也可以出奇制胜。

五、【:read-only】选择器

:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“readonly”=readonly的元素。

举例:

复制代码
<!DOCTYPE HTML>
<meta charset="utf-8"/>
<style type="text/css">
form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > input {
  margin-bottom: 10px;
}

input[type="text"] {
    border: 1px solid orange;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
}
input[type="text"]:-moz-read-only {
    border-color: #ccc;
}
input[type="text"]:read-only {
    border-color: #ccc;
}
</style>

<form>
姓名:<input type="text"name="fullname"/>
<br />
国籍:<input type="text"name="country"value="China"readonly="readonly"/>
<br />
<input type="submit"value="提交"/>
</form>

</body>
</html>
复制代码

六、【:read-write】选择器

有了【:read-only】,再来个与之相反的【:read-write】意思很明确,就是即可读,也可写的元素设置样式。我觉得这个选择器可能只是充数的,为了让css3选择器成为一个体系而加的,因为默认情况就是可读可写的啊。

上面的例子中如果改一点样式:给input[type="text"]加上:read-write选择器

input[type="text"]:read-write{
    border: 1px solid orange;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
}

效果如下:

即无法给国籍这个输入框添加圆角之类的样式。

七、【::before】和【::after】

慕课网这样讲:

::before和::after这两个伪元素主要用来给元素的前面或者后面插入内容,和“content” 配合使用,使用的场景最多的就是清除浮动

其实::before和::after内容还是比较多的,了解更多可参考::before和::after伪元素的用法

 

PS:每次看到慕课网这种偶巴,好厉害。的东东,就有种淡淡的忧桑,有木有想过妹子们的感受。

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4717826.html有问题欢迎与我讨论,共同进步。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: