css选择器 | 易学教程

Html CSS学习（四）CSS选择器

阅读更多关于 Html CSS学习（四）CSS选择器

CSS选择器 Html用于呈现网页的内容与结构，CSS用于设置页面中内容的外观，即表现形式，在对内容进行样式的设置时，首先要选择欲应用样式的内容，这主要通过CSS的选择器进行。本部分内容主要对CSS选择器进行学习。一、基础选择器 1.通配符 * 选定文档内所有的对象，通常用于对全局内容样式的设置。 2.ID选择器 #ID 在HTMl中，ID的使用要尽量少用，以增强CSS代码的通用性。ID主要用于页面区块内容的划分。 3.类选择器 .className 通过class属性进行选择，是使用最多的一种方式 4.标签选择器通过标签类型进行选择例1.基础选择器的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选择器</title> </head> <body> <div id="wrap"> <header></header> <div class="page_body"></div> <footer></footer> </div> <

CSS选择器、字体/文本、背景

阅读更多关于 CSS选择器、字体/文本、背景

CSS的基本使用直接写在标签内 <p style="color: red; font-size: 40px;">段落</p> 写在 style 标签内 <style> span{ color: aquamarine; } </style> 使用外部 .css 文件 @import （不建议使用此方式） <style> @import "font_css.css"; </style> link <link rel="stylesheet" href="font_css.css"> CSS选择器优先级：id选择器 > class 选择器 > 标签选择器标签选择器：标签名{} class选择器（“.”符号）：.class名{} id选择器（“#”符号，id 选择器唯一）：#id名{} 群组选择器（“，”逗号分开）：群组选择器可以同时选择多个标签 p,div{...} 层次选择器子代（符号“>”）：div>p{...} 后代 (空格)：div p {...} 相邻（符号“+”）：#p_id~span {...} 兄弟（符号“~”）：#p_id~p {...} 伪类选择器（符号“:”） link：未访问过的样式 a:link {...} visited：访问过后的样式 a:visited {...} hover：划过的样式 a:hover {...} active

面试遇到的问题（总结面试题）

阅读更多关于面试遇到的问题（总结面试题）

最近在找工作面试，总结遇到的面试题 1. CSS的优先级？ CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。 CSS 优先规则2："直接样式"比"祖先样式"优先级高。 CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器； CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。 CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。详细请参考此链接：CSS 样式优先级 2. ES6中的箭头函数的特点？不需要function关键字来创建函数省略return关键字继承当前上下文的 this 关键字关于ES6的笔试和面试题 3. vue 组件通信 1. 父组件与子组件传值父组件传给子组件：子组件通过props方法接受数据; 子组件传给父组件：$emit方法传递参数 2. 非父子组件间的数据传递，兄弟组件传值 eventBus

CSS 学习笔记——入门

阅读更多关于 CSS 学习笔记——入门

CSS 学习笔记——入门这些是以前学习做的笔记，现在整理一下放到博客上，清理磁盘空间啦~ 一、什么是CSS？ 1. CSS指层叠样式表 (Cascading Style Sheets)，用来定义如何显示 HTML 元素。 2. 样式通常存储在样式表中，把样式添加到 HTML 中，是为了解决内容与表现分离的问题 3. 外部样式表通常存储在 CSS 文件中二、CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明例如： p { color:red; text-align:center; } 1、改变样式的 HTML 元素，例如p{} 2、每条声明由一个属性和一个值组成，属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。例如color:red。三、CSS注释 p { text-align:center; /*这里你可以写注释*/ color:black; font-family:arial; } 四、CSS中的id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器 CSS 中 id 选择器以 "#" 来定义。例如： #example { text-align:center; color:0xff05cc } 此

html、css整理笔记

阅读更多关于 html、css整理笔记

1.表单（form） <form name="form_name" action="url" method="get|post"></form> a.input控件 ---属性:type/name/value/size/readonly/disabled/checked/maxlength （1）单行文本框--- text <input name="文本框名称" type="text" value="初始值" size="显示的字符数" maxlength="最多容纳字符数" readonly="readonly" （设置为只读）disabled="disabled"(设置为不可操作)> （2）密码框---password <input name="文本框名称" type=“password” value=“初始值” size=“显示没字符数”> （3）单选框---radio <input name="单选框名称" type="radio" value="提交值" checked="checked"（是否被选中）> （4）复选框---checkbox <input name="复选框名称" type="checkbox" value="提交值" checked="checked"（是否被选中）> *******<input type="radio/checkbox" name=

css简单入门

阅读更多关于 css简单入门

HTML 5 新增结构： header:页面或者某个区域的头部 nav:导航栏 article：文章或者其他独立存在的页面 footer：脚注 aside：与周围主题相关的信息 section：整体，一部分主题 target="_blank"（在新窗口打开链接页面）绝对路径：协议（http）／／域名／目录访问站外资源，必须用绝对链接相对路径：..／返回上一级目录内部样式表：在head里面用style标签中写css 行内样式表：在开始标签里面接style=......进行书写 CSS的注释书写格式：／注释内容／，快捷键crtl+？选择器：元素选择器：标记名{ 声明块 } 类选择器： .awesome{ 声明块 } 则后面有class=“awesome”的都会用到awesome里面的声明最常用的选择器，因为他的复用 id选择器： #awesome{ 声明块 } id选择器仅能每次选择一个元素，id=“awesome". 因为它的唯一性，使用很少伪类选择器：格式：ol li :nth-child(4) { 选择第四个 }（从众多子集中选择特定的某一个进行修改) nth-last-child( ): 从倒数的第n个选择 nth-last-child(odd ):选奇数 nth-last-child( even):选偶数通配符：／所有元素／ { }

2017最新前端面试题

阅读更多关于 2017最新前端面试题

HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素：鲜为人知的是： CSS的盒子模型？（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE

jQuery的性能优化，你知道几条

阅读更多关于 jQuery的性能优化，你知道几条

================================================================= 一、选择器性能优化建议 ================================================================= 1. 总是从#id选择器来继承这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。 $('#content').hide(); 复制代码或者从ID选择器继承来选择多个元素: $('#content p').hide(); 复制代码 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器（如$(‘head’)），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID) varreceiveNewsletter = $('#nslForm input.on'); 复制代码 jQuery中class选择器是最慢的，因为在IE 浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为’content’的那个节点： varcontent = $('div

CSS学习笔记——最基础的定义与使用

阅读更多关于 CSS学习笔记——最基础的定义与使用

1、最近看看一些CSS的东西，发现每次看过就忘记，做起东西来就会非常的慢，所以有时间的话可以抽空多看看别人的网站，然后想想自己能不能做出这种效果。 2、有哪几种设置样式的方式：浏览器缺省设置外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 内部样式表（位于 <head> 标签内部） <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 内联样式（在 HTML 元素内部） <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 多重样式根据优先级得到最后的结果 3、不受继承影响 //元素选择器 body { font-family: Verdana, sans-serif; } //分组选择器 td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; } p { font

Shadow DOM系列2-基础

阅读更多关于 Shadow DOM系列2-基础

英文链接： Shadow DOM: The Basics , 27 AUGUST 2013 on Web Components, Shadow DOM 在我的上一篇博文里，我介绍了 Shadow DOM 并举例说明为啥它这么重要。今天，我们要干点苦力活——“码”上见分晓！在本文的最后，你将能够创建自己的封装组件——它封装了外部的内容，并重新整理内部结构来产生一个完全不同的东西。让我们开始吧！环境支持为了能尝试下面的实例，建议使用 Chrome 33 或者更高版本的 Chrome。一个简单的例子让我们看一个非常简单的 HTML 文档。 <body> <div class="my-widget"> <h1>我的组件的标题</h1> <p>一些组件的内容</p> </div> <div class="my-other-widget"> <h1>我的另一个组件的标题</h1> <p>一些另一个组件的内容</p> </div> </body> 当 HTML 转化成 DOM，每个元素都会变成一个节点（node）。而一组互相嵌套的一组节点则被称为节点树（node tree）。 Shadow DOM 的独特之处在于它允许我们创建自己的节点树，这种节点树被称为影子树（shadow trees）。影子树对其中的内容进行了封装，有选择性的进行渲染。这就意味着我们可以插入文本

订阅 css选择器