两天征服CSS3选择器（下）

作者: 樱桃小丸子儿 | 来源:发表于2017-04-14 21:49 被阅读0次

两天征服CSS3选择器（下）
初级了解css3伪类选择器
CSS3简明教程之征服CSS3选择器
两天征服CSS3选择器（上）
jQuery基础知识
CSS3知识概要总结之选择器篇(二)
HTML5和CSS3新增内容
CSS3笔记（一）选择器
2019前端经典面试题 CSS 部分常见问题
css选择器

:enabled与 :disabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。要使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
例如为所有 type="text" 的被禁用的 input 元素设置背景色：
html代码

First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" 
value="Disneyland" /><br>
</form>

CSS代码

input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}

运行结果：

Paste_Image.png

checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
例如通过“:checked”状态来自定义复选框效果。
html代码

<div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是选中状态</lable>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" /><span>√</span>
    </div>
    <label for="usepwd">我是未选中状态</label>
  </div>

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;
  position: absolute;
  top:0;
  left: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将span设置为透明的
}

input[type="checkbox"]:checked + span {
  opacity: 1;//将选中的input的span设置为不透明的
}

运行结果

Paste_Image.png

** ::selection选择器**

注意，“::selection选择器”是双冒号。其实双冒号往往都是“伪元素”，而单冒号往往都是“伪类”。
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：

QQ截图20170413150046.png

用鼠标选中“运行结果”文本时，默认显示样式为：蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例：将鼠标选中的文本时的背景变成 orange，文本变成 white。
html代码

<body>
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>
</body>

css代码

::selection{
  background: orange;
  color: white;
}
//火狐浏览器
::-moz-selection{
  background: orange;
  color: white;
}

运行结果

QQ截图20170413150738.png

** :read-only选择器**

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
举例设置textarea的只读样式
html代码

<div>
    <label for="comment">评论：</label>
    <textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
  </div>

css代码

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}
//火狐使用
textarea:-moz-read-only{
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}
//其它使用
textarea:read-only {
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}

运行结果

QQ截图20170413154021.png

:read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
示例演示
使用“:read-write”选择器来设置不是只读控件的文本框样式。
html代码

<div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>

css代码

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]:-moz-read-only{
  border-color: orange;
}
input[type="text"]:read-only{
  border-color: orange;
}
input[type="text"]:-moz-read-write{
  border:2px solid red;
}
input[type="text"]:read-write{
  border:2px solid red;
}

运行结果

Paste_Image.png

** ::before和::after选择器**

这两个选择器也是双冒号，这是CSS3为了区别伪元素和伪类而使用的，单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。具体的区别请参考这个网页
before用双冒号与单冒号的区别
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
示例插入内容

<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
 div::before
        {
            content:"CSS3教程";
        }
</style>
</head>
<body>
 <div>选择器</div>
</body>
</html>

运行结果

QQ截图20170413160352.png

清除浮动
清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：简单又不会增加元素。

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: block; content: ""; height: 0; clear: both; visibility:hidden;}

关于clearfix清除浮动也有其他版本的写法，具体了解可以看下clearfix清除浮动进化史
clearfix清除浮动进化史
想一想

选择器	作用
:enabled与 :disabled选择器
checked选择器
::selection选择器
:read-only选择器
:read-write选择器
::before和::after选择器

参考：慕课网

最近在忙毕业论文开题，更文较慢，请见谅

网友评论

本文标题：两天征服CSS3选择器（下）

本文链接：https://www.haomeiwen.com/subject/nsovattx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

两天征服CSS3选择器（下）

相关文章