css选择器

bootstrap入门

╄→尐↘猪︶ㄣ 提交于 2020-02-24 21:21:23
Bootstrap提供了如下重要的特性: ❑一套完整的基础CSS插件。 ❑丰富的预定义样式表。 ❑一组基于jQuery的JS插件集。 ❑一个非常灵活的响应式(Responsive)栅格系统,并且崇尚移动先行(Mobile First)的思想。 css优先级 优先级 如何确定CSS的优先级?这里我们要先引入一个机制,分别 用4个数字(a,b,c,d)表示优先级组合,比如1,1,1,1和0,1,0,1。它们的意思分别是: ❑第一个数字(a)表示style属性,优先级最高。由于一般都是class样式,所以该值一般都是0。 ❑第二个数字(b)是该CSS选择器上的id数量的总和,一般都是1个。 ❑第三个数字(c)是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class(.btn)和属性CSS选择器(比如li[id=red])。 ❑第四个数字(d)计算元素(就像table、p、div等)和伪元素(就像first-child等)。 ❑通用CSS选择器(*)是0优先级。 ❑如果两个CSS选择器有同样的优先级,在样式表中后面的那个起作用。 例:计算下面两个选择器的优先级: #leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; } 结果肯定是第1个比第2个优先级高,因为第1个的优先级是0,2

CSS选择器的优先级

人盡茶涼 提交于 2020-02-24 14:05:22
当使用不同的选择器,选中同一个元素时并且设置不同的样式;这时就会产生冲突,最终到底采用那一个选择器定义的样式,有选择器的优先级决定,优先级高的优先显示。 优先级的规则: 选择器 优先级 内联样式 1000 ID选择器 100 类和伪类 10 元素选择器 1 通配选择器 0 继承的样式 没有优先级 当选择器中包含较多选择器时,需要将多种选择器的优先级相加然后再进行比较(并集选择器是单独计算的,不会相加)。但是注意,选择器优先级相加不会超过他的最大数量级。比如ID选择器相加不会到达1000(也就是说ID多个选择器相加也不会超过内联样式的优先级)。 如果选择器的优先级相同时,使用靠后的样式。 在样式的最后添加一个 ! important,此时该样式将会获得一个最高的优先级,将会优先于所有样式(包括内联样式)。但在开发中应该尽量避免使用。 因为超链接a的四个伪类优先级是相同的,所以这四个伪类应该按照顺序使用。顺序如下:   : link   :visited   :hover   :active 来源: CSDN 作者: 会程 链接: https://blog.csdn.net/HC199854/article/details/104441629

CSS3新增的选择器有哪些?

浪尽此生 提交于 2020-02-24 03:39:14
CSS3新增选择器! CSS3 通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器 用法 描述 element1~element2 选中element1后的所有同级element2元素。(注意:与element1+element2的区别,不必相邻且可选中多个) [element^=value] 选中element属性值中前几个字母为value的元素。 [element$=value] 选中element属性值以value结尾的元素。 [element*=value] 选中element属性值中包含value的元素。 :first-of-type 选中属于父元素的第一个指定类型的子元素。 :last-of-type 选中属于父元素的最后一个指定类型的子元素。 :only-of-type 选中属于父元素的仅有指定类型的元素。 :only-child 选中属于父元素的唯一一个子元素 :nth-child(n) 选中指定位置的子元素。(n可以是具体数字也可以是表达式) :nth-last-child(n) 选中指定位置的子元素,从最后一个子元素开始计数。(n可以是具体数字也可以是表达式) :nth-of-type(n) 选中指定位置的指定类型元素。(n可以是具体数字也可以是表达式) :nth-last-of-type(n) 选中指定位置的指定类型元素

css选择器总结

落花浮王杯 提交于 2020-02-24 01:59:37
#1.CSS基础选择器 (逆战班学习总结) ##1.1 标签选择器 - 概念: 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。 - 语法: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } - 作用: 标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签 - 优点: 是能快速为页面中同类型的标签统一样式 - 缺点: 不能设计差异化样式。 p { font-size : 16px ; color : red ; width : 200px ; height : 200px ; line-height : 200px ; } ##1.2 类选择器 类选择器使用“.”(英文点号)进行标识,后面紧跟类名. 语法: - 类名选择器 .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } - 标签 <p class='类名'></p> - 优点: - 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 - 注意 - 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的) - 长名称或词组可以使用中横线来为选择器命名。 - 不要纯数字、中文等命名, 尽量使用英文字母来表示。 .a { font-size : 16px

Jquery选择器大全

限于喜欢 提交于 2020-02-22 15:14:50
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 JQuery最为强大的功能之一就是它支持全面的Dom元素选择器。它支持使用CSS选择器、子选择器、容器选择器、特性选择器、位置选择器以及JQuery自定义的选择器等多种选择器在Html文档中选择Doms。在这里将它们列出来,方便查找: 1.JQuery基本Css选择器 *:匹配任意元素 E:匹配标签名为E的所有元素,比如说$('a')会选出所有链接元素; #id:通过元素id进行选择,比如说$("#form1")会选择id为form1的元素; .class:通过元素的CSS类来选择,比如说$(".boldstyle")会选择CSS为boldstyle类的元素; 标签名#id.class:通过某类元素的id属性和class属性来选择,如:$(a#blog.boldStyle)会选择id为blog并且CSS类型为.boldStyle类型的链接元素(<a id='blog' class='.boldStyle'>); 父标签名 子标签名.class:通过选择父标签下的某种CSS类型的子元素,如:$(p a.redStyle)会选择p段落元素中的链接子元素a,且其css类型为.redStyle; parent >

CSS学习总结(一)

半世苍凉 提交于 2020-02-22 13:37:24
1.1什么是CSS Cascading Style Sheet 层叠级联样式表 CSS : 表现 (美化网页) 1.2css的格式 1.在html内 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > <!-- 直接在html界面写css语言 在style中可以写css代码,每一个声明,最好使用;结尾 格式: <style> 选择器{ 声明1; 声明2; ..... } </style> --> < style > h1 { color : #f02a52 ; } </ style > </ head > < body > < h1 > 我是h1标签 </ h1 > </ body > </ html > 2.将css与html分开写 建议使用这种写法 css的优势: 1.内容与表现分离 2.网页结构统一,可以重复使用。 3.样式十分丰富 4.建议使用独立于html的css文件 5.可以使用SEO,便于搜索引擎搜索 3.将css导入方式 1.内部样式 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title >

前端随笔

僤鯓⒐⒋嵵緔 提交于 2020-02-22 05:51:34
把之前存的一堆自己觉得记录的知识点全部记录一下,有兴趣可以看看,共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )

前端一些面试汇总

≯℡__Kan透↙ 提交于 2020-02-22 05:16:17
要面试了,做了一些汇总 html页面结构 1.结构层:负责语义表达,解决页面内容是什么问题 2.表示层:由css负责创建,解决页面如何显示内容 3.行为层:由脚本负责(js),解决页面上内容应该如何对事件做出反应 css基本语句构成 选择符{属性1:值;属性2:值2;} 主流浏览器内核 IE: Trident内核 Mozilla FireFox: Gecko内核 Chrome,Safari:Webkit内核 Opera:Presto内核 浏览器兼容性有哪些 1、浏览器默认的margin和padding不同;加全局*{margin:0;padding:0}来统一 2、IE6双边剧BUG:块属性标签float后,有有横的margin情况下,在ie6显示margin比设置的大 ;可以加上display:inline; 3.在IE6,ie7元素高度超出自己设置高度。原因是IE8以前的浏览器会给元素设置默认的行高导 致的。解决可以加上 overflow:hidden 或者是 line-height:;font-size:; 4.min-height:在IE6下不起作用。解决方案是height:auto;!important;height:xxpx;其中 xx就是min-height设置的值 5、透明性IE用filter:Alpha(opacity=60),而其他主流浏览器用opacity:0

华育兴业干货 | Web前端经典面试题及答案

a 夏天 提交于 2020-02-21 19:18:57
昨天,小骨头分享了关于Java的面试题,有学员反映需要前端方向的面试题,所以小骨头又来给大家分享干货了,本篇收录了一些面试前端岗位时,经常会遇到的经典面试题,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。 javascript 1、JavaScript中如何检测一个变量是一个String类型?请写出函数实现 方法1、 function isString(obj){ return typeof(obj) === "string"? true: false; // returntypeof obj === "string"? true: false; } 方法2、 function isString(obj){ return obj.constructor === String? true: false; } 方法3、 function isString(obj){ return Object.prototype.toString.call(obj) === "[object String]"?true:false; } 如: var isstring = isString('xiaoming'); console.log(isstring); // true 2、请用js去除字符串空格? 方法一:使用replace正则匹配的方法 去除所有空格: str = str

css day(1) 选择器

夙愿已清 提交于 2020-02-21 19:09:40
文章目录 1.1 引入外部css 1.2 元素的分类 1.3 常用选择器 1.4 选择器分组 1.5 元素之间的关系 1.6 伪类 1.7 伪元素 1.8 属性选择器 1.9 其他元素选择器 1.10 兄弟元素选择器 1.11 伪类元素选择器 二、选择器优先级 2.1 样式的集成 2.2 选择器的优先级 2.3 伪类的顺序 1.1 引入外部css <link href=""></link> 1.2 元素的分类 块级元素 一个元素单独占一行,且不会给里面的元素设置任何样式。 内联元素 会有一定的样式,内联元素不是单独占一行。 <a.>标签能包含任何元素,除了他自己。<p>标签不能包含块级元素。 1.3 常用选择器 id class 1.4 选择器分组 用逗号隔开,表示一个组的 #a1,.a2,h1{......} 统配选择器 *{....} 复合选择器 span.p3{......} 选中span标签中类名包含p3的元素 后代元素选择器 子元素选择器 div > span{.....} 1.5 元素之间的关系 父,子,祖先,后代,兄弟元素 1.6 伪类 表示一个标签的不同状态 以超链接为例子 :link 未访问过 :vistied 访问过(只能设置颜色) :hover 鼠标移入 :active 被点击 :focus 获取焦点(比如输入框) :before 元素前 :after 元素后