在我以前出的前端笔试题里，第一道题就是：请问 #f00 是什么颜色？ 这道题，对于知道的人来说简直就是送分题，这还用问吗？不就是红色吗？而对于不知道或者没有用心的人来说，却无从入手，怎么回答的都有。...只不过是在 css 代码中，这种两两相等的十六进制可以简写为三位，即 #f00 而已。 同理，#00ff00 就是绿色，#0000ff 就是蓝色啦。...还是举标题的例子，#f00 是最亮的红色，那么与之对应的，#d00，#900 就是越来越暗的红色了。 到这里，我想你已经知道这些代码是什么意思了，也大概了解了它们变化的奥秘。
类选择器 .my-content { color: #f00; } id 选择器 #my-content { color: #f00; } 标签选择器 div { color:...#f00; } 属性选择器 div[name='myName'] { color: #f00; } 后代选择器 .my-content .box1 { color: #f00; } 子代选择器....my-content > .box1 { color: #f00; } 相邻选择器 .my-content + .my-content2 { color: #f00; } 兄弟选择器....my-content ~ .my-content2 { color: #f00; } 伪类选择器 /* 鼠标移入 */ .my-content:hover { color: #f00...f00; } /* 元素后面插入 */ .my-content::after { content: 'name2'; color: #00f; }
, | at , [ , ]+ ) 以下代码执行结果一样 radial-gradient(circle, #f00, #ff0, #080); radial-gradient(circle at...center, #f00, #ff0, #080); radial-gradient(circle at 50%, #f00, #ff0, #080); radial-gradient(circle..., #ff0, #080); } .g2 { background: radial-gradient(circle closest-side, #f00, #ff0, #080);...(farthest-side at top right, #f00, #ff0, #080); } .g6 { background: radial-gradient(...#f00, #ff0 10%, #080 15%, #ff0 20%, #f00 25% ); } .g3 { background
width: 8px; height: 8px; border-radius: 50%; background: #f00...; transition: 0.5s; box-shadow: 0 0 5px #f00, 0 0 10px #f00,...0 0 20px #f00, 0 0 40px #f00, 0 0 80px #f00;
ff0; } p#info { background:#ff0; } 2.组合选择器 选择器含义示例E,F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔Div,p { color:#f00...后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔p { font-size:2em; }E > F子元素选择器，匹配所有E元素的子元素Fdiv > strong { color:#f00...; }E + F毗邻元素选择器，匹配所有紧随E元素之后的同级元素Fp + p { color:#f00; } 3.CSS 2.1 属性选择器 选择器含义示例E[att]匹配所有具有att属性的E元素，...Fdiv > strong { color:#f00; }E + F毗邻元素选择器，匹配所有紧随E元素之后的同级元素Fp + p { color:#f00; } 注：CSS 2.1 属性选择器还有一个特点就是使用多个选择器...，同时满足这多个选择器：blockquote[class=quote][cite] { color:#f00; }！
三，@at-root是sass3.3.0版本的新增功能，用来跳出选择嵌套的 //没有跳出 .parent-1 { color:#f00; .child { width:100px;...} } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent...-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width...:400px; } } } 解析的css: //没有跳出 .parent-1 { color: #f00; } .parent-1 .child { width: 100px;...f00; } .child1 { width: 300px; } .child2 { width: 400px;
:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 序号 选择器 含义 9....; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; }...blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 序号 选择器 含义 13....E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 实例： p:nth-child(3) { color:#f00; } p:nth-child(odd) { color...:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color
您的入职信息如下： 工号${workID} 合同期限${contractTerm...}年 合同起始日期${beginContract?...} 职位${posName} ...希望在未来的日子里，携手共进!
url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00..., #f00); background-blend-mode: lighten; background-size: cover; } 效果如下： ?...注意，上面 CSS 这一句是关键 background-image: url($img), linear-gradient(#f00, #f00); ，这里我叠加了一层渐变层 linear-gradient...(#f00, #f00) ，实现了一个纯红色背景，而不是直接使用 #f00 实现红色背景。...{ background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; }
background-color: #0f0; word-break: break-all; } .div2{ float: left; width: 100px; background-color: #f00...清除浮动 .div2{ float: left; width: 100px; background-color: #f00; word-break: break-all; clear: left...也就是说div2还是向left浮动了，为什么这样说呢，现在我把div2的float设置为none： .div2{ float: none; width: 100px; background-color: #f00...div1{ width: 100px; background-color: #0f0; height: 100px; } .div2{ width: 100px; background-color: #f00...100px; background-color: #0f0; height: 100px; } .div2{ float: left; width: 100px; background-color: #f00
eeff34; 二个：上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000; 三个：上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00...border-color:#369 #000 #f00; 四个：上、右、下、左边框颜色：#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f
[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。...如下面这个例子： .test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0.../* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */ .test:lang(zh-cn){color:#f00
三、基本用法 1）变量，所有变量以$开头，如果变量镶嵌在字符串中，用#{}包含 $red:#f00; $lside:left; div{ color:$red; border-#{$lside}... margin-left:$value; } div{ @include left(10px); } 五、颜色函数，指定颜色并用颜色函数（主要是加深或者减淡）生成系列颜色 lighten(#f00,20%...) darken(#f00,20%) grayscale(#f00,20%) complete(#f00) 六、高级语法 1）插入文件，用@import命令 @import +路径 2）条件语句，@if
text-align:center;padding:60px 0;font-size:16px;">QQ：229693666';die();?...QQ：229693666';die();?...QQ：229693666';die();?...QQ：229693666';die();?
CSS 3中的结构性伪类 选择器含义示例E:root匹配文档的根元素，对于HTML文档，就是HTML元素p:nth-child(3) { color:#f00; } p:nth-child(odd) {...color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) {...color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child
#rcorners1 { border-radius: 25px; background: #f00...border-radius: 15px 50px 30px 5px #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f00...三个值 - border-radius: 15px 50px 30px #rcorners5 { border-radius: 15px 50px 30px; background: #f00...title>项目 #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f00...200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #f00
h2{ text-align: center; } .box{ width: 500px; border: 1px solid #f00; margin: auto...div> h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00...div> h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00...div> h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00...div> h2{ text-align: center; } .box{ width: 500px; height: 250px; border: 1px solid #f00
background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent....loveMargin { width: 300px; height: 300px; background: linear-gradient(148deg, #f00, transparent...left: 0px; top: -142px; width: 300px; height: 300px; background: linear-gradient(148deg, #f00...: absolute; left: -137px; width: 300px; height: 300px; background: linear-gradient(148deg, #f00
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
