• E：enabled伪类选择器和E：disabled伪类选择器

E:enabled伪类选择器用来指定元素处于可用状态的样式。

E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。

当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将E:disabled伪类选择器与E:enabled伪类选择器结合使用，用E:disabled伪类选择器来设置该元素处于不可用状态时的样式，用E:enabled选择器来设置该元素处于可用状态的样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>E:disabled伪类选择器与E:enabled伪类选择器结合使用示例</title>

    <style>

        input[type="text"]:enabled {

            background-color: yellow;

        }

        input[type="text"]:disabled {

            background-color: purple;

        }

    </style>

    <script>

        function radio_onchange(){

            var radio=document.getElementById("radio1");

            var text=document.getElementById("text1");

            if(radio.checked){

                text.disabled="";

            }else{

                text.value="";

                text.disabled="disabled";

            }

        }

    </script>

</head>

<body>

<form>

   <input type="radio" id="radio1" name="radio" onchange="radio_onchange()"/>可用

    <input type="radio" id="radio2" name="radio" onchange="radio_onchange()"/>不可用

    <br/>

    <input type="text" id="text1" disabled/>

</form>

</body>

</html>
  • E:checked、E:default和E:indeterminate

E:checked伪类选择器用来指定当前表单中的radio单选框或checkbox复选框处于选取状态时的样式。例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>E:checked伪类选择器使用示例</title>

    <style>

        input[type="checkbox"]:checked {

            outline: 2px solid blue;

        }

        input[type="checkbox"]:-moz-checked {

            outline:2px solid blue;

        }

    </style>

</head>

<body>

<form>

  兴趣：<input type="checkbox"/>阅读

    <input type="checkbox"/>旅游

    <input type="checkbox"/>看电影

    <input type="checkbox"/>上网

</form>

</body>

E:default选择器用来指定当前页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>E:default选择器的使用示例</title>

    <style>

        input[type="checkbox"]:default {

            outline: 2px solid blue;

        }

    </style>

</head>

<body>

<form>

  兴趣：<input type="checkbox" checked/>阅读

    <input type="checkbox"/>旅游

    <input type="checkbox"/>看电影

    <input type="checkbox"/>上网

</form>

</body>

</html>

E:infeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定，到目前为止，只有Opera浏览器对这个选择器提供支持。

  • E::selection伪类选择器

E::selection伪类选择器用来指定当前元素处于选择状态时的样式。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>E::selection伪类选择器使用示例</title>

    <style>

        p::selection{

            background: red;

            color: #ffffff;

        }

        p::-moz-selection{

            background: red;

            color:#ffffff;

        }

        input[type="text"]::selection{

            background: gray;

            color:#ffffff;

        }

        input[type="text"]::-moz-selection{

            background: gray;

            color: #ffffff;

        }

        td::selection{

            background:green;

            color: #ffffff;

        }

        td::-moz-selection{

            background: green;

            color:#ffffff;

        }

    </style>

</head>

<body>

<p>这是一段测试文字</p>

<input type="text" value="这是一段测试文字。"/>

<table border="1" cellspacing="0" cellpadding="0">

    <tr>

        <td>测试文字</td>

        <td>测试文字</td>

    </tr>

    <tr>

        <td>测试文字</td>

        <td>测试文字</td>

    </tr>

</table>

</body>

</html>
  • 通用兄弟元素选择器

它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下：

<子元素>-<子元素之后的同级兄弟元素>{

//指定样式

}

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通用兄弟元素选择器E-F</title>

</head>

<body>

<div style="width: 733px;border: 1px solid #666;padding:5px">

    <div>

        <p>p元素为div元素的子元素</p>

        <p>p元素为div元素的子元素</p>

    </div>

    <hr/>

    <p>p元素为div元素的兄弟元素</p>

    <p>p元素为div元素的兄弟元素</p>

    <hr/>

    <p>p元素为div元素的兄弟元素</p>

    <hr/>

    <div>p元素为div元素的子元素</div>

    <hr/>

    <p>p元素为div元素的兄弟元素</p>

</div>

</body>

</html>

CSS3学习系列之选择器（三）的更多相关文章

  1. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  2. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  3. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  4. css3学习总结1--CSS3选择器

    CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...

  5. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  6. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  7. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  8. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  9. CSS3学习系列之动画

    Transitions功能使用方法 在css3中,transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过transitions属性来使用t ...

随机推荐

  1. 什么是Actor

    本文已.Net语法为主,同时写有Scala及Java实现代码 严肃的说,演员是一个广泛的概念,作为外行人我对Actor 模型的定义: Actor是一个系统中参与者的虚拟人物,Actor与Actor之间 ...

  2. 又拍云SSL证书全新上线，提供一站式HTTPS安全解决方案

    互联网快速发展,云服务早已融入每一个人的日常生活,而互联网安全与互联网的发展息息相关,这其中涉及到信息的保密性.完整性.可用性.真实性和可控性.又拍云上线了与多家国际顶级 CA 机构合作的数款OV & ...

  3. # Android动画笔记

    标签: Android开发艺术探索笔记 View动画 帧动画 属性动画 View动画 View动画的作用对象时View,有4种动画效果,分别是平移动画.缩放动画.旋转动画.和透明度动画. 此类动画通常 ...

  4. HNOI2017 滚粗记

    这次HNOI,感觉自己收获了很多啊,高一的蒟蒻,也就是去历练一番,长长见识吧.. $day0$ 上午做了一道斜率优化的题,下午好像在颓??晚上也不想复习了,看了会电视,$12$点才睡.. $day1$ ...

  5. [内存管理]linux X86_64处理器的内存布局图

    linux X86 64位内存布局图

  6. BZOJ 1266: [AHOI2006]上学路线route

    题目描述 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:"很 ...

  7. js正则表达式详解

    一.正则的两种写法: var re = /a/; //一般情况下都用简写的方式 性能好 var re = new RegExp('a'); //需要传入参数的时候用 二.转义字符: \n 换行 \r ...

  8. 【跑会指南】2017年3-5月IT技术会议大合集

    2016年各类大会让人应接不暇,技术圈儿最不缺的就是各种大会小会,有的纯干货,有的纯广告.作为一名技术开发者,参加了几场大会,你是不是也开始思忖:究竟哪些会议才值得参加?下面活动家为你推荐几场2017 ...

  9. 在SCIKIT中做PCA 逆运算 -- 新旧特征转换

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  10. python课程第一天笔记-la

    http://www.cnblogs.com/onda/   ----------------------20170423 一:Cpython  pypy 区别 等;Cpython 是一行一行解释, ...