css选择器

阅读更多关于 CSS选择器

一、基本选择器序号选择器含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #footer id选择器，匹配所有id属性等于footer的元素实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器序号选择器含义 5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 7. E > F 子元素选择器，匹配所有E元素的子元素F 8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; }

CSS选择器

阅读更多关于 CSS选择器

CSS选择器一、基本选择器序号选择器含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #footer id选择器，匹配所有id属性等于footer的元素实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器序号选择器含义 5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 7. E > F 子元素选择器，匹配所有E元素的子元素F 8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight

CSS选择器

阅读更多关于 CSS选择器

CSS选择器种类及使用方法

阅读更多关于 CSS选择器种类及使用方法

css选择器有通配符选择器书写格式：*+｛声名块｝并集选择器/组合选择器书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝列：h1，h2，h3｛color：red；｝层次选择器：子集选择器：格式:父级元素名称+">"+子级元素名称+{声明块} 例:div>p{color:red;} 后代选择器：格式:祖先元素名称+空格+后代元素名称+{声明块} 例:div p{color:red;} 兄第选择器：格式: A元素名称+"+"+B元素名称+{声明块} 例:div+P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素. 通用选择器：格式:同级元素A+"~"+同级元素B+{声明块} 例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。伪类选择器动态伪类选择器未访问（把默认值改为黑色）； a:link{color:black;} 鼠标悬停 a:hover{color:pink;} 鼠标点击时 a:active{color:green;} 点击后 a:visited{color:五颜六色;}；注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。 a:focus{color:颜色;} 多用于输入框或链接（注:IE7以前不支持

选择器

阅读更多关于选择器

选择器{声明;} # id选择器;　　 . class选择器;　　 p 标签选择器;　　 input[type="text"] 属性选择器;　　 p,.red,#yellow 群组选择器; p span 包含选择器(派生选择器); p>span 子选择器伪类选择器: 　　:link;　　:visited;　　:hover;　　:active;　　　　:first-line;(元素的第一行内容；) 　　:first-letter;(元素的第一个字符；textarea里面没有效果) 　　:nth-child(n);(元素的第n个子元素) 　　:nth-last-child(n);(元素倒数第n个子元素) 　　:nth-child(odd);(元素所有奇数的子元素) 　　:nth-child(even);(偶数个子元素) 　　:focus{}　　(光标获取时候的样式) 　　::selection{}　　(页面所有元素里面的字体选中的时候样式；此时只能设置文本颜色与文本背景颜色) 　　:checked{}　　(默认选中，但是只有opera支持) 　　:root{} 　　(针对的是真个html窗口) 　　:empty{}　　(元素中没有内容的所有元素) 　　:after{}　　(在标签内容最后面进行样式或者内容的添加) 　　:before{}　　(在标签内容最前面进行样式或者内容的添加)

神奇的Shadow DOM

阅读更多关于神奇的Shadow DOM

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 你有好奇过这个问题吗，为什么只用video标签包裹着source标签，就可以完成一系列视频功能：播放/暂停按钮、进度条、视频时间显示、音量控制等等？既然 DOM 源码这么干净，你有想过实现这些组件的代码是从哪儿来的吗？ 1. 简介 Shadow DOM它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。因此开发者可利用Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。看一个简单的video： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shadow DOM</title> </head> <body> <video controls autoplay name="media" width="500"> <source id="mp4" src="http://7ryl2t.com2.z0.glb.qiniucdn.com/572ffc37a2e5a.mp4" type="video/mp4"> </video> </body> </html> 页面完成了

CSS实现点击改变元素背景色

阅读更多关于 CSS实现点击改变元素背景色

可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus :active :active选择器用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的）， :active选择器适用于所有元素，不仅限于链接a元素 :focus :focus 选择器用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 :focus 选择器。由于上面的特性，如果想实现点击时变色效果，有以下两种方法，两者区别在 :active，元素被点击时变色，但颜色在点击后消失 :focus，元素被点击后变色，且颜色在点击后不消失 button:active{ 　　 background:olive; } button:focus{ 　　 background:olive; } 在线实例： http://jsfiddle.net/vt1bzpsq/ 由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus <div tabindex="1"> Section 1 </div> <div tabindex="2"> Section 2 </div> <div tabindex="3"> Section 3 </div> div:focus { background-color:red; } 在线实例：

jQuery基础【1】

阅读更多关于 jQuery基础【1】

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：　　•HTML 元素选取　　　　　 •HTML 元素操作　　•CSS 操作　　　　　　　 •HTML 事件函数　　•JavaScript 特效和动画　　•HTML DOM 遍历和修改　　•AJAX　　　　　　　　　　•Utilities 1.向页面添加jQuery 库 1 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 2 <%--使用 Google 的 CDN--%> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.4/jquery.min.js"></script> 5 <%--使用 Microsoft 的 CDN--%> 6 <script type=

CSS 选择器权重计算规则

阅读更多关于 CSS 选择器权重计算规则

　　其实，CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。一、样式类型　　1、行间 <h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1> 　　 2、内联 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 　　 3、外部 <link rel="stylesheet" href="css/style.css"> 二、选择器类型　　 1、ID　　#id 　　 2、class　　.class 　　 3、标签　　p 　　4、通用　　* 　　5、属性　　[type="text"] 　　6、伪类　　：hover 　　7、伪元素　　::first-line 　　8、子选择器、相邻选择器三、权重计算规则第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。四、比较规则 1,0,0,0 > 0,99,99,99

css基础

阅读更多关于 css基础

label 控件选择器：标签选择器类选择器自定义类名 { 属性 : 值 ;.....} ID 选择器 # 自定义名称 { 属性 : 值 ;....} 通配符选择器 *{ 属性 : 值 ;......} 标签指定式选择器（交集选择器）标签名 . 名称 { 属性 : 值 ;} 后代选择器选择器选择器 { 属性 : 值 ;} 并集选择器选择器 , 选择器 , 选择器 { 属性 : 值 ;} 子代选择器选择器 > 选择器 { 属性 : 值 ;....} 属性选择器标签 [ 属性 = ”值”]{ 属性 : 值 ;} text-align: left| center | right; 注意：使用该属性的时候，标签必须属于块级元素。内容居中（文字，图片）字体属性联写 font: font-style font-weight font-size/line-height font-family; 注意： ◆ font 属性联写中，必须有 font-size 和 font-family ◆ font 属性联写中， font-size 必须在 font-family 前块级元素的特点： ◆如果一个块级元素没有设置宽度，那么其默认宽度就是其父元素的宽度。（宽度，高度不能继承） ◆块级元素可以直接设置宽度和高度 ◆块级元素独占一行显示。行内元素 ◆行内元素不能直接设置宽度和高度

订阅 css选择器