通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011. UI元素状态伪类选择器 ??UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。 表单设计原则： ??UI设计的一个核心就是让表单更可用、易用和好用。表单设计应该符合三层模型，即表单应该具有三种属性：感知（页面显示的布局）、对话（内容呈现的问题和回答）、关系（交互的任务结构）。 ...
自定义属性： 选择器 -webkit--moz--o- 属性选择器 在CSS3以前，如果需要选择选择某个/类元素的话，一般会使用id/class来进行选择，CSS3则提供了更强大的功能，可以根据元素中的某个属性，从而选中该元素。具体如下： E[attr]：属性名为 attr 的所有 E 元素 E[attr="value"]：属性 attr 的属性值 为 value 的所有 E 元素 E[attr~="value"]：属性值(>=1)中包含 value 的 E[attr^="value"]：属性值是以 value 开头的 ...
一：css3属性选择器： img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{ border:2px dashed #000;} css3的子字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下： img[alt^="filem"]{ border:2px dashed #000; } (2...
CSS1、2、3选择器统览 css1、2、3的选择器及其对应的浏览器兼容性前端观察这篇文章已经详细总结了：Click 通过测试：有如下更正或说明： 注：下述浏览器兼容性以x+表示，表明x以及x以上版本。 动态伪类选择器E:active：若E为锚点，ie6+可兼容；若为其他（不局限为表单元素）， ie的兼容性为8+； E>F：匹配E下第一个为F的子节点，F不一定是E的第一个子节点； E+F：匹配紧紧跟着E的F节点，F需要是E的第...
转载自个人博客 1.常用选择器 1.1标签选择器 p{ }/*选择标签名为p的元素*/ 1.2类选择器 .box{ }/*选择class名为box的元素*/ 1.3ID选择器 #pid{ }/*选择id名为pid的元素*/ 1.4通配符选择器 *{ }/*选择页面中所有的元素*/ 1.5选择器前缀 div.bd{}/*选中class名为bd且标签为div的元素*/ 1.6属性选择器 [disabled]{}/*选择带有属性disabled的所有元素*/[type=button]{}/*选择type属性为button的所有元素*...
1、认识CSS选择器 要使某个样式应用于特定的HTML元素，首先需要找到元素。在CSS中，执行这一任务的表现规则称为CSS选择器 1、1 CSS3选择器的优势 CSS3新增了属性选择器，伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML的类名或ID名的依赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。 1、2 CSS3选择器分类 基本选择器 层次选择器 伪类选择器 伪元素 属性选择器 伪...
下面的代码，当你单击第一个radio时会显示第一个panel的内容，单击第二个radio时会显示第二个panel的内容。 但是当在
一、ID选择器 ID选择器类似于类选择器，不过也有一些重要差别 例如：#id{} 二、类选择器和ID选择器的区别 ID只能在文档中使用一次，而类可以多次使用 HelloWorld ID选择器不能结合使用 当使用JS时需要用到id 三、属性选择器 1.简单属性选择： 例如：[title]{} Hello[title]{ color: aqua;} 2.根据具体属性值选择 除了选择拥有某些的元素，还可...
CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中被广泛使用，但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。 :checked伪类选择器顾名思义，表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中，我们常用:hover伪类来设置鼠标悬浮时的样式，而由于checked状态的改变需要用户进行点击操作，使用:checked伪类，我们则可...
之前《CSS 选择器详情讲解》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。从之前讲解的CSS3选择器中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用...
CSS选择器总结：一．基本选择器 1.通配选择器：[ * ] 选择文档中所以HTML元素。*{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/.mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/2.元素选择器：[ E ] 选择指定类型的HTML元素。p{color:red;} /*选择p元素*/3.ID选择器： [ #id ] 选择指定ID属性值为“id”的任意类型元素。<style> #div1{width:100p...
基本选择器 1、通配符选择器（*）—所有浏览器支持*{marigin: 0;padding: 0;}2、元素选择器(E) —所有浏览器支持3、类选择器（.className） —所有浏览器支持4、id选择器（#ID）—所有浏览器支持5、后代选择器（Ｅ Ｆ）—所有浏览器支持 选择了Ｅ元素的所有后代Ｆ元素，中间是一个空格； 6、子元素选择器(E>F) —IE6不支持 选择了Ｅ元素下的所有子元素Ｆ7、相邻兄弟元素选择器(E + F) —IE6不支持 EF两元素具有一个相同的父元素，...
CSS3新的选择器ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元素*/ ele[att*="val"] /*属性att包含val字符串的元素*/