`
lucifinilhades
  • 浏览: 86802 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3 选择器【2】

CSS3选择器HTML5 
阅读更多

UI元素状态伪类选择器

UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。

选择器E:hover、E:active和E:focus

  • E:hover选择器用来指定当鼠标指针移动到元素上时元素所使用的样式；
  • E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式；
  • E:focus选择器用来指定元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>E:hover, E:active and E:focus</title>
    <style type="text/css">
input[type="text"]:hover {background-color: greenyellow;}
input[type="text"]:focus {background-color: skyblue;}
input[type="text"]:active {background-color: yellow;}
    </style>
</head>
<body>
    <form>
        <label>姓名：</label><input type="text" name="name"/><br/>
        <label>地址：</label><input type="text" name="addr"/>
    </form>
</body>
</html>

E:enabled和E:disabled伪类选择器

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

当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将这两个选择器结合起来使用，使用示例如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<title>E:enabled, E:disabled</title>
		<style type="text/css">
input[type="text"]:enabled {background-color: yellow;}
input[type="text"]:disabled {background-color: purple;}
		</style>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
$(function() {
	$("input[name=ena]").change(function(event) {
		var element = event.target;
		if(element.checked && element.value == "true") {
			$("input[name=tx]").removeAttr("disabled");
		} else {
			$("input[name=tx]").attr("disabled", "disabled");
		}
	});
});
		</script>
	</head>
	<body>
		<form>
			<fieldset>
				<label><input type="radio" name="ena" value="true" checked="checked"/>可用</label>
				<label><input type="radio" name="ena" value="false"/>不可用</label>
			</fieldset><br/>
			<input type="text" name="tx"/>
		</form>
	</body>
</html>

E:read-only和E:read-write伪类选择器

  • E:read-only选择器用来指定当元素处于只读状态时的样式；
  • E:read-write选择器用来指定当元素处于非只读状态时的样式。

注意：在Firefox浏览器中，需要写成“-moz-read-only”和“-moz-read-write”的形式。

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<title>E:read-only, E:read-write</title>
		<style type="text/css">
input[type="text"]:-moz-read-only {background-color: gray;}
input[type="text"]:-moz-read-write {background-color: greenyellow;}
input[type="text"]:read-only {background-color: gray;}
input[type="text"]:read-write {background-color: greenyellow;}
		</style>
	</head>
	<body>
		<form>
			<label>名字：</label><input type="text" name="name"/><br/>
			<label>地址：</label><input type="text" name="addr" value="江苏省常州市" readonly="readonly"/>
		</form>
	</body>
</html>

E:checked、E:default和E:indeterminate伪类选择器

  • E:checked选择器用来指定当表单中的radio或checkbox组件处于选取状态时的样式。注意：在Firefox浏览器中需要写成“-moz-checked”的形式。
  • E:default选择器用来指定当页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该组件的选取状态设定为非选取状态，该选择器中指定的样式仍然有效。
  • E:indeterminate选择器用来指定当页面打开时，如果一组单选框中任何一个单选组件都没有被设定为选取状态时，整组单选框的样式，如果用户选取其中任意一个单选组件，则该样式被取消。

E::selection伪类选择器

该选择器用来指定当元素处于先中状态时的样式。注意：在Firefox浏览器中需要写成“-moz-selection”的形式。 使用示例如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<title>E:enabled, E:disabled</title>
		<style type="text/css">
p::selection {background: red; color: #FFF;}
p::-moz-selection {background: red; color: #FFF;}
		</style>
	</head>
	<body>
		<p>这是一段测试文字。</p>
	</body>
</html>

通用兄弟元素选择器

该选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，其使用格式如下所示：

<子元素>~<子元素之后的同级兄弟元素> {}
<子元素>+<子元素之后的同级的相邻兄弟元素> {}

这里的同级是指子元素和兄弟元素的爷元素是同一个元素。

分享到：
| CSS3 选择器【1】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    react-React组件的css选择器

    在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...

    HTML5+CSS3 城市选择器

    另外，CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计，使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用，它简化了JavaScript的DOM操作，使得事件处理、元素操作和动画效果的实现...

    CSS基本选择器实用PPT课件.pptx

    CSS 的标准目前有三个：CSS1、CSS2 和 CSS3，其中 CSS3 是最新的标准，增加了许多新的样式和效果。 二、CSS 基本语法 CSS 的基本语法由三部分组成：对象、属性和值。对象指定了对哪些网页元素进行设置，属性指定了...

    HTML5&CSS3网页制作：CSS基础选择器.pptx

    在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML元素。 **CSS选择器**是CSS中的基本概念，它们是用于选取HTML文档中特定元素的工具。选择器使得我们可以...

    CSS3选择器总结CSS3选择器总结

    CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...

    CSS选择器-.pdf

    此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...

    让IE支持CSS3选择器的插件

    在IT领域，尤其是在前端开发中，CSS3是现代网页设计不可或缺的一部分，它引入了许多新的选择器，极大地增强了样式表的功能和灵活性。然而，早期版本的Internet Explorer（IE）浏览器，尤其是IE8及以下版本，对CSS3...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    利用css＋javascript实现的一个日期选择器代码

    【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...

    css属性选择器理解案列

    理解css属性选择器

    css颜色选择器

    CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值，并显示最近使用的颜色的列表。 默认情况下，颜色选取器将输入...

    ie-css3.js 让IE支持高级CSS3选择器.zip

    《使用ie-css3.js让IE浏览器支持CSS3高级选择器》 在现代Web开发中，CSS3已经成为构建精美网页和复杂交互的必备工具，其中高级选择器提供了更强大的样式控制能力。然而，早期版本的Internet Explorer（IE6、IE7、IE...

    HTML5+CSS3实现的华丽的日期选择器源码

    在这个日期选择器中，可能运用了伪类（如`:hover`）来实现鼠标悬停时的背景变化，这种立体效果可能通过CSS3的阴影（box-shadow）和渐变（linear-gradient）属性来实现。此外，CSS3的Flexbox或Grid布局也可能用于创建...

    CSS3 样式选择器

    在定义CSS时，需要知道其书写语法和影响范围，此文档给你说明

    web开发——CSS属性选择器.docx

    Web 开发——CSS 属性选择器 CSS 属性选择器是 CSS 中一种强大的选择器，允许开发者根据 HTML 元素的属性和值来设置样式。下面是 CSS 属性选择器的详细知识点： 什么是 CSS 属性选择器？ CSS 属性选择器是一种...

    CSS基本选择器实用PPT学习教案.pptx

    CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用，旨在帮助学生掌握基本的 CSS 选择器，并实践于个人主页项目中。 一、CSS 概念和语法 CSS（Cascading Style Sheets）是用来...

    树使用css选择器优化代码（IE7+，firefox3，opera9，chrom下可用）

    本篇文章将探讨如何使用CSS选择器来优化代码，使之适用于IE7+、Firefox 3、Opera 9以及Chrome等主流浏览器。 首先，理解CSS选择器的性能差异是优化的关键。CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器...

    一种可视化的方式来分析选择器在CSS中的特殊性

    **CSS选择器特殊性分析** 在CSS样式表中，选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性（Specificity）是CSS优先级的一种度量，用于解决当多个选择器同时影响...

Magicbox
Global site tag (gtag.js) - Google Analytics