/*分配符选择器*/*{font-size: 10px;margin: 0px;padding: 0px;}/*标签选择器*/p{font-size: 20px; }/*class类选择器*/.test_class{font-size: 40px;}/*id选择器 ——只能用一次 否则不规范*/#test_id{font-size: 60px;}/*分组选择器*/span,#test_id,.test_class,.my_class{font-size: 200px;}/*后代选择器:中间是空格 两边一个是父选择器名字(包括标签,类 ,id),另一个是子选择器名(包括标签 ,类,id)*/ol li{color: aqu...
或许大家平时总是在用的选择器都是: id class 以及标签选择器。可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选或许大家平时总是在用的选择器都是:#id .class 以及标签选择器。可是这些还远远不够,爱创课堂为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助。更多精彩关注:http://www.icketang.com/1 *:通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元...
对于我们前端人员来说,必须要注重的就是页面的美观,一个页面的好看与否就肯定要看你css的样式写的水平怎么样,而要全面利用css写好网页当然也要熟悉css选择器的使用,只有熟练掌握了css选择器,才不至于在书写css代码的时候掉进坑里。 最常见的CSS选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置HTML的样式,选择器通常将是某个HTML元素,比如p、h1、em、a,甚至可以是html本身。在W3C标准中,元...
今天整理一下css的选择器,灵活使用css选择器可以减少不少无用工,如写不必要的js代码。很多时候可以用css做到的就尽量不用用js,原因:1、css代码速度肯定是js快2、js个人觉得要考虑的逻辑情况会比较多。3、出bug的可能性也少很多,出的都是兼容问题。 我觉得实用(别的貌似不实用就不介绍),css选择器可以分为1、最常用id、class、‘*‘(通配符)、‘>‘(子类选择器)、‘,‘(群组选择器) 、‘空格‘(后代选择器)、:hover。2、偶尔用...
1、元素选择器标记名 {声明块}表示所有与该标记名匹配的元素,都应用声明块中的规则。2、类选择器? 类名 {声明块}所有class属性为指定类名的元素,都将应用声明块的规则。3、ID选择器(应用于Js)# ID {声明块}属性ID为指定值的元素,将应用声明块中的规则。在同一个html文档中,元素的id值必须唯一。4、组合选择器/并集选择器标记名,标记名,标记名 {声明块}多个标签中使用同一属性功能可以合并。5、伪类选择器元素名称:伪类名称...
ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。ID也可以用来标识持久的结构性元素,例如主导航或内容区域。ID还可以用来标识一次性元素,例如某个链接或表单元素。一个ID只能应用于页面上的一个元素。同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面,其中包含多篇新闻,代码如下所示<div id="story-id-1"><h2>ID</h2><p>ID用于标...
一、前言 首先看看一道阿里这期网申的题目吧!1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before D. [type="checkbox"]:checked E. ul#shop-list 二、回顾选择器类型 html片段<body><div id="content"><div>Hello world</div><div cla...
五、属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单属性选择如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。例子 1如果您希望把包含标题(title)的所有元素变为红色,可以写作:*[title] {color:red;}例子 2与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:a[href] {color:red;}例子 3还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。例如,为了将同时...
1.基础的选择器选择器含义示例*通用元素选择器,匹配任何元素* { margin:0; padding:0; }E标签选择器,匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器,匹配所有class属性中包含info的元素.info { background:#ff0; }p.info { background:#ff0; }#info和E#infoid选择器,匹配所有id属性等于footer的元素#info { background:#ff0; }p#info { background:#ff0; }
2.组合选择器
选择器含义示例E,F多元素选择器...
1.1 E:nth-child(n):表示E父元素的第n个子节点 p:nth-child(odd){ background: red } /* 匹配奇数行 */ p:nth-child(even){ background: red } /* 匹配偶数行 */ p:nth-child(2n){ background: red } /* 自定义行数 */1.2 E:nth-last-child(n):表示E父元素的第n个子节点,从后向前计算2.1 E:nth-of-type(n):表示E父元素中的第n个子节点,且类型为E2.2 E:nth-last-of-type(n):表示E父元素中的第n个子节点,...
标签选择器 使用html标签筛选需要渲染的网页元素。使用场景修改标签的默认样式,例如ul li 有默认的内边距,开发时应去掉标签的默认样式。设定全局字体样式。根据分辨率设定html标签的默认字体。div {/*直接用标签作为选择器*/background-color: yellow;
} 类选择器 为一组样式属性进行命名(类名),标签使用时需要声明,使用频率最多的选择器。类选择器的特点多个标签可以引用同一个样式类,提高程序的公用性。通过语义化...
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。CSS3属性选择器下面是CSS3的属性选择器的语法,及使用。元素名字[元素类型=“类型名字”]:选择器名字{属性:值;属性:值;
} 在元素类型匹配时,就可以使用类似正则的匹配方法。 [att=val] 指定特定名字的元素 [att*=val] 匹配val*的元素, [att^=val] 匹配val开头的元素,比如id为val1、val432432都可...
前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法 变量 一般地,我们在进行web开发时,会有一套变量定义规范,以sass为例,如下所示// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0...
以下是例子:原文:http://www.cnblogs.com/myprovencesky/p/5852842.html
最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结。以下是CSS选择器的效率排名:id选择器(#myid)类选择器(.myclassname)标签选择器(div,h1,p)相邻选择器(h1+p)子选择器(ul < li)后代选择器(li a)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)id和类名用于关键选择器上效率是最高的,而CSS3的仿伪类和属性选择器,虽然使用方便,但其效率却是最低的。以下是书写...