常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给class是hcls的一类标签设置模式:3.id选择符#h3{}//给id是h3的标签设置样式:4.关联选择符#div h1.#div h1.ljhcls:5.div,h1,pmspan,button{}基本选择器分为:first-child第一个.::first-letter第一个字母.::fist-li…
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序: :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 demo: <!DOCT…
背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s = document.createElement('style'); s.innerText = style_text; document.head.appendChild(s); } document.onclick = function() { // 添加新的style元素, 覆盖原来的属性,…
一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决…
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new">2>精确属性值 a[href="http:/…
主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 p em {color:red;} 父 子 p > em {color:red;} 紧邻同胞 h2 + p {color:red;} 一般同胞 h2 ~ a {color:red;} 通用 * {color:red;} ID 类 选择符 .class1 {color:red;} #id1 {color:red;} 属性选择符 选择带有属性名的标签 img[title] {co…
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在某种结构上的关系时(比如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式. 一.UI伪类 1.链接伪类 Link:此时,链接就在那儿等着用户点击. Visited:用户此前点击过这个链接. Hover:鼠标指针正悬停在链接上. Active:链接正在被点击(鼠标在元素上按下,还没有…
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: <div> <p>something</p> </div> <div> <div>other something</div> <p>something</p> </div> :only-child…
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; background-color:#dddddd; } </style> </…
之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心态,发现了重新学习CSS3的资源......于是乎,怕之后又忘记了,就打算做个笔记 边框 border-radius border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ 实心上半圆 把高度(height)设为宽度(wid…