在过去的很长一段时间中，我们都说 CSS 是不带有任何逻辑的，意思是在 CSS 中没有控制流，也没有某种类似于其他编程语言的方式来组织 CSS。CSS 天生缺乏逻辑性的问题导致了预处理器的出现。然而业界却对 CSS 预处理器褒贬不一，支持预处理器的人认为这弥补了 CSS 缺失的特性；而反对预处理器的人则认为 CSS 的设计初衷就不应该带有逻辑性，他们认为根本不应该引入预处理器这个概念。然而，一种独特的思考方法最近突然蹦入了我的脑袋...
为了说明css选择器优先级(权重)，首先我们来看以下两个实例代码：div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14px;} test of css 以上例子，最终的显示效果是 font-size: 16px，并不是后面的font-size: 14px； 这种组合的选择器有快速方法判断： 0,0,0,0 第一位数值是代表写在标签上的样式，如 第二位数值代表的是id选择器，如 #demo {} 第三位数值是代表： 类名（ .demo {} ）或 伪类（:hover）或 属性选择...
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.类的覆盖顺序和应用的时候引用的顺序没关系，覆盖顺序取决于类定义的顺序例如：.a{color:red}.b{color:green}由于b晚于a定义，所以b覆盖a，反之则a覆盖b2.类选择器优先级大于标签选择器；例如：div{color:red}.div{color:green}.div将覆盖div 3.类选择器优先级等于纯属性选择器，谁后定义谁优先级高，例如：[data-name=div]{color: red }.a{ color:blue }.a将覆盖[data-name=div]，反之[data-name=div]覆盖.a 4.类选择器优先级小...
选择器 优先级 实例ID选择器 100类选择器 10伪类选择器 10 :link :visited :focus :hover :actived :lang UI元素状态伪类 E:enabled{}匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled{}匹配所有用户界面（form表单）中处于不可用状态的E元素 ...
CSS 选择器是一种模式，用于选择需要添加样式的元素。平时使用最多也是最简单的就是 #id、.class 和标签选择器，在 CSS 中还有很多更加强大更加灵活的选择方式，尤其是在 CSS3 中，增加了很多新的选择器，使得选择元素更加便捷，所以必须理解这些选择器，只有先理解了，多用几次，自然而然就记住了。 1、* 【CSS2】通配符，选择页面所有元素。1 *{ 2 margin:0; 3 padding:0; 4 }上面代码的作用是把页面上所有元素的内外边距...
一、类选择器："."类选择器{css样式代码} 1、使用合适标签吧要修饰的内容标记下来。 内容 2、内容 3、.stress{color:red} 注意：英文圆点开头，类选择器可任意名称但不要中文。 二、ID选择器 1、使用合适标签吧要修饰的内容标记下来。 内容 2、内容 3、#id{color:red} id用#号 注：类选择器可以对HTML文件一个元素设多种样式，而ID选择器只能对元素设置一次。也是唯一一次。 三、元素选择器。 元素选择器选择匹配选择器的网页上的任...
1.常用的选择器：①元素选择器 指定希望应用样式的元素.比如：p {color:#fff;}②后代选择器 寻找特定元素或者元素的后代. 比如：body p{color:#ccc;} 这个选择器和子选择器body>p的区别是：body>p是指body下作为子元素的所有节点P,而后代选择 是body下面所有的节点P，可以说子元素选择器是一种特殊的后代选择器。③类选择器 指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据它用作什么而不...
选择器的优先级关系到元素应用哪个样式。在CSS2.1的规范（http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity）中是这样描述的：如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)（HTML元素的style属性也是样式规则，因为这些样式规则没有选择器，因此记为a=1,b=0,c=0,d=0） 计算选择器中 ID 属性的个数 (= b) 计算选择器中其他属性(类、属性选择器)和伪类的个数 (= c) 计算选...
一、元素选择器 HTML文档元素就是最基本的选择器 如：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css">p {color:blue;} </style> </head><body><p>这一段话是蓝色的。</p> </body> </html>示例将元素的字体颜色设置为了蓝色，元素选择器将作用于文档内所有的元素。同样，我们也能够同时为多个元素应用一种样式，如：DOCTYPE html> <html lang="en"> <head> <meta char...
选择器例子例子描述CSS.class .intro 选择 class="intro" 的所有元素。 1#id #firstname 选择 id="firstname" 的所有元素。 1* * 选择所有元素。 2element p 选择所有 元素。 1element,element div,p 选择所有 元素和所有 元素。 1element element div p 选择 元素内部的所有 元素。 1element 选择器" href="http://www.w3school.com.cn/cssref/selector_element_gt.asp" target="_blank">element>element div>p 选择父元素为...
学习要点： 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器主讲教师：李炎恢本章主要探讨 HTML5 中 CSS 选择器，通过选择器定位到想要设置样式的元素。目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式，主要分为三大类。一．选择器总汇 本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：选择器名称说明CSS 版本*通用选择器选择所有元素...
最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！插入样式表的方法有三种：第一种：外部样式表<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>第二种：内部样式表<head> <style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");} </style> </head>第三种：内联样式表<p style="colo...
基本选择器 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字符串的元素*/