前戏之前学习了HTML相关的知识，也能简单的写一个hello world的页面。但是，只学HTML满足不了我们的需求，而HTML、CSS、JavaScript三者搭配使用才能更好的完成我们需要的效果，那他们之间的关系是什么呢？HTML是网页内容的载体CSS样式是外观控制JavaScript是行为，用来实现网页特效效果什么是CSS呢CSS层叠样式表（Cascading Style Sheets）用于定义HTML内容在浏览器内的显示样式为什么要学习CSSCSS简化HTML相关标签，网页体积小，下...
【CSS同时选择器】 同一个div拥有多个class时，我们可以作多个class作为组合来选择对象。方法就是将多个.className直接连接在一起（中间不能有空格）。<p class="important urgent warning"> This paragraph is a very important and urgent warning. </p>.important.urgent {background:silver;} 参考：http://www.w3school.com.cn/css/css_selector_class.asp原文：http://www.cnblogs.com/tekkaman/p/7082995.html
元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器：p { text-indent:10px; color:blue; } 什么情况下使用元素选择器，一般我们这样认为： 如果你想要让页面中所有的指定元素都有这个CSS效果，可以使用元素选择器。 有这样一段html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="index.css"><title></title></head><bo...
前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等。1.less的两...
CSS 选择器及优先级1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同，那么以后定义的为准。 3.一般在类选择器、属性选择器、伪类选择器优先级比较容易出错。 css3选择器主要有：基本选择器 ， 层次选择器， 伪类选择器 ， 伪元素选择器 ， 属性选择器基本选择器 层次选择器 伪类选择器分为 动态伪类选择器， 目标伪类选择器， 语言伪类选择器， UI元...
css 选择器一.基本选择器1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“body{color:gray;font-size: 12px; } /*标签选择器*/ p{color: red; font-size: 20px; } span{color: yellow; }2.id选择器 同一个页面中id不能重复。 任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大...
基础选择器一、标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}二、类选择器1、类选择器使用"."(英文)+类名进行选择三、css命名规范1、长名称或词组可以使用中横线来为选择器命名2、不建议使用“_”下划线来命名Css选择器3、不要用纯数字或中文命名命名规范是我们通俗约定。见名知意四、多类名选择器语法：class="类名1 类名2"五、id选...
下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开...
css（Cascading Style Sheets,层叠式样式表），作用是美化HTML网页。一：样式表的分类：1，内联式样式表 和html联合显示，控制精确，样式优先级最高，但是代码重用性差。 style="样式" 例如：<div style="height:200px;"></div>2，内嵌式样i式表 作为一个独立区域内嵌在网页里，必须写在head标签里，先第二，重用性一般。3，外部式样式表 写在一个以css结尾的文件中，通过引用来建立文件与html页面的关系，优先级最低...
（一）选择器的概念每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式; }在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。（二）选择器的类型 1.标签选择器 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：p{font-size:12px;line-height:1.6em;}上面的css样式代码的作用：...
扔一些学习W3C时翻译的规范，以个人理解和总结为主，翻译为辅。 原文地址：http://www.w3.org/TR/css3-selectors/ 一、基本概念node和element：element是XML中的概念，是xml的数据组成部分。node是对于tree的结构而言的，元素由结点组成。parent ：父元素children：子元素（直接后代，不包括再往后的后代 = 。 =）slibings ：兄弟元素the subjects of a selector：一个选择器所匹配到的document tree中的元素就是这个选择器的subj...
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可...
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element elementdiv p选择 <div> 元素内部的所有 <p> 元素。1' ref='nofollow'>element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。2element+elementdiv+p选择紧接在 <div> 元素之后的所有 ...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;~:p ~ p {color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ }[attribute^=value]:选择该属性以特定值开头的元素[attribute$=value]:选择该属性以特定值结尾的元素[attribute*=value]:选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ :实际中可以应用在区分本地链接与外部链接,通过判...
CSS 定位CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。使用 display ...