复合选择器是由两个或多个基础选择器构成，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。复合选择器主要分为四类：交集选择器、并集选择器、后代选择器、子元素选择器 交集选择器交集选择器由两个选择器构成，其中第一个为 标签选择器，第二个为 class 类选择器，两个选择器之间不能有 空格，如下图所示： 比如：p.one选择器的意思是：类名为 one 的 段落标签。用的相对来说比较少，不太建议使用。并...
CSS的selector极其强大，大致分为通配符、元素、群组、关系、id及class、伪类、属性、伪对象这八种，下面将进行详细介绍：一、通配选择符 选中HTML文档中的所有标签，语法： *{ 代码块； }<!DOCTYPE html><html lang="en"><head><title></title><style>*{color:red;}</style></head><body><h1>这是h1标签</h1><h3>这是h2标签</h3><p>这是p标签</p></body></html>演示结果: 这是h1标签 这是h2标签 这是p...
CSS3中，追加了三个属性选择器分别为： [att*=val]。属性值中有val的元素被选中[att^=val] 属性值中以val 开头的[att$=val] 属性值中以val结束的 如果val为数字则数字前边加反斜杠使属性选择器有通配符的概念 ////伪类选择器 伪元素选择器first-linefirst-letterbeforeafterroot. :root{}not. :not(){}empty. 内容为空白时的样式target. 原文：https://www.cnblogs.com/xiaoqianliu/p/9118458.html
环境 xp ie 8 , ietester<!doctype html><html><head><meta charset="utf-8"/><style rel="stylesheet" type="text/css">*{font-size:19px;}i{color:red; font-weight:bold; margin:0 10px;}b{color:#BF7C17; margin:0 10px;}h2,p{padding:20px;}h2{background:#eee; font-size:20px;}p{font-size:15px;}p[attr]{color:blue;}p[attr="bar"]{color:pink;}p[attr~="go"]{color:green;}p[attr|="some"]{color:red;}.subEle > span { ...
比较选择器优先级检验方法如下将所有选择器应用到一个超链接上，观察结果，得出结论。输出结果为，说明行间style的优先级是其中最高的。去掉行间style代码：输出结果：后代选择器生效，注释其代码，继续比较：得出输出结果，注释代码。得出输出结果。 从上面结果不难看出 行间style > 后代 > id > class > 元素那么为什么会是这样的结果呢，判断优先级，以权重为指标，权重越大优先级越高：一般约定 id选择器的权重为100，类选择器...
1、实例源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3的[att*=val]选择器</title> <style type="text/css">[id*=div_border]{background-color:#9F6;width:110px;font-family:微软雅黑;font-size:18p...
作者：文刀日月使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8Selectivizr是一个JS文件，你只需要引入如JQuery、Mootools、Prototype等N多流行的JS框架中的任意一个，然后再调用Selectivizr，就可以让IE6/7/8支持CSS3选择器。12345<!--[if (gte IE 6)&(lte IE 8)]> <script src="http://code.jquery.com/jquery.min.js"></script> <script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js"></script > <script src="...
纪念一次惋惜的面试经历，明明知道但是保守的没有全说出来。。。first face _shp欣 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <...
Active的一段话 active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。 Active的特点其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。<!DOCTYPE html> <html><head><title>a</title><...
一、CSS的三种使用方式：1. 内联样式 * 在标签内使用style属性指定css代码 * 如：<div style="color:red;">hello css</div>2. 内部样式 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： <style> div{ color:blue; } </style> <div...
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b...
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
CSS选择器有多个选择器 所在的位置是内嵌和外部常用的选择器有 id选择器 { 是给元素一个身份证号，给id定义的id名不能重复 优先级第一 用#来查找liru：body里面 <div id="id1" ></div> 那么我们查找的id名是id1 那么给找到的id是id1 所在的位置是内嵌和外部 #id1 { background-color:red; width:100px; height:100px;} ...
1、css（层叠样式表）样式主要目的（让页面更好看些）css尽量不要写内联样式，保证结构和样式分离原则；html专门负责结构，css专门负责样式。2、css写法规范选择器 { 属性 ：值 ； }内联样式 写在标签里 style=“”属性：值“”内部样式 写在head标签里的style标签里 外部样式 通过链接导入样式表 link3、font-size（字号大小）4、浏览器默认字体font-family 微软雅黑 ，字体大小一般默认为16px 一般不想写中文是可以用un...
CSS选择器命名及常用命名CSS选择器命名及常用命名规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个 id 命名为“div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名（语义化命名）！ 说个题外话，规范化命名的代码，会显着你更加专业！ 关于CSS命名法，和...