使用方法介绍,几个CSS的黑科技
分类:前端技术

几个CSS的黑科技

2015/08/03 · CSS · 2 评论 · 黑科技

原文出处: JellyBool(@JellyBool)   

昨天由于某些原因没有写博客,之前说好的每天一篇的,这篇是为了补昨天的了。然后我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

玩转CSS选择器(一) 之 使用方法介绍

2015/08/15 · CSS · 选择器

原文出处: Alsiso   

[html] 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>js中的转码解码</title> 
<style> 
/*reset*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 
table{border-collapse:collapse;border-spacing:0;} 
fieldset,img{border:0;} 
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 
ol,ul{list-style:none;} 
caption,th{text-align:left;} 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 
q:before,q:after{content:'';} 
abbr,acronym{border:0;font-variant:normal;} 
sup{vertical-align:text-top;} 
sub{vertical-align:text-bottom;} 
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} 
input,textarea,select{*font-size:100%;} 
input:focus,textarea:focus,select:focus{ outline:none;} 
select,input {vertical-align:middle;} 
legend{color:#000;} 
.clean:before,.clean:after,.clearfix:before,.clearfix:after{content:"";display:table;} 
.clean:after,.clearfix:after{clear:both;} 
.clean,.clearfix{zoom:1;} 
.clear{clear:both;} 
.fl{float:left;} 
.fr{float:right;} 
.break{word-wrap:break-word;width:inherit;} 
.linkhidden {text-indent:-9999em;overflow:hidden;} 
.hidden {display:none;} 
/*reset*/ 
body { backgroundnull:url( 
.main { margin:20px auto; padding:20px 0; width:960px; backgroundnull:url(); border-radius:10px; box-shadow:2px 5px 7px #ccc;} 
h1 { font:30px/50px "microsoft yahei"; color:#069; text-align:center; text-shadow:2px 2px 2px #006666;} 
textarea { display:block; margin:20px auto; padding:10px; width:80%; height:200px; border:1px solid #eee; border-radius:5px; box-shadow:2px 5px 5px #ccc; resize:vertical;} 
.box { margin:10px auto; width:50%;} 
.box label { padding:0 20px; width:150px; font:12px/28px Arial, simsun; text-align:right;} 
.box input { margin:0 15px 0 0; padding:0 5px; height:26px; border:1px solid #2A77FF; border-radius:4px; background:-webkit-gradient(linear, 0 0, 0 100%, from(#008EEA), to(#0080D3)); background:-moz-linear-gradient(top, #008EEA,#0080D3); box-shadow:2px 4px 4px #999999; font-size:12px; color:#FFF; cursor:pointer;} 
</style> 
<script src="; 
<script> 
$(function(){ 
    $("input").click(function(){ 
        var fun = $(this).data().type; 
                $txt = $("#txt"); 
                str = $txt.val(); 
        function dispose(str){ 
            switch(fun){ 
                case "escape": 
                    return escape(str); 
                    break; 
                case "unescape": 
                    return unescape(str); 
                    break; 
                case "encodeURI": 
                    return encodeURI(str); 
                    break; 
                case "decodeURI": 
                    return decodeURI(str); 
                    break; 
                case "encodeURIComponent": 
                    return encodeURIComponent(str); 
                    break; 
                case "decodeURIComponent": 
                    return decodeURIComponent(str); 
                    break; 
                case "unicode": 
                    return decodeURIComponent(escape(str).toLocaleLowerCase().replace(/%u/gi, '\u'));//转码、转小写、正则替换"%"、decodeURIComponent解码 
                    break; 
                case "deunicode": 
                    return unescape(str.replace(/\u/gi, '%u'));//正则替换""、解码 
                    break; 
                default: 
                    break; 
            }; 
        }; 
        $txt.val(dispose(str)); 
    }); 
}); 
</script> 
</head> 
 
<body> 
<div class="main"> 
    <h1>JS常用转码大全</h1> 
    <textarea id="txt"></textarea> 
    <div class="box clearfix"> 
        <label class="fl">escape</label> 
        <input class="fl" type="button" data-type="escape" value="加密" /> 
        <input class="fl" type="button" data-type="unescape" value="解密" /> 
    </div> 
    <div class="box clearfix"> 
        <label class="fl">encodeURI</label> 
        <input class="fl" type="button" data-type="encodeURI" value="加密" /> 
        <input class="fl" type="button" data-type="decodeURI" value="解密" /> 
    </div> 
    <div class="box clearfix"> 
        <label class="fl">encodeURIComponent</label> 
        <input class="fl" type="button" data-type="encodeURIComponent" value="加密" /> 
        <input class="fl" type="button" data-type="decodeURIComponent" value="解密" /> 
    </div> 
    <div class="box clearfix"> 
        <label class="fl">unicode</label> 
        <input class="fl" type="button" data-type="unicode" value="加密" /> 
        <input class="fl" type="button" data-type="deunicode" value="解密" /> 
    </div> 
</div> 
</body> 
</html> 

border-radius

很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:

CSS

.box { border-radius: 4px; }

1
2
3
.box {
  border-radius: 4px;
}

稍微高端一点的是这样的:

CSS

.box { border-radius: 4px 6px 6px 4px; }

1
2
3
.box {
  border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:

CSS

.box { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

1
2
3
.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

对,它可以赋8个值,没见过?不着急,具体的解释是这样的:

CSS

斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

1
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

 border-radius

  很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:

.box {
  border-radius: 4px;
}

  稍微高端一点的是这样的:

.box {
  border-radius: 4px 6px 6px 4px;
}

  然而,终极黑科技是这样用的:

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

  对,它可以赋8个值,没见过?不着急,具体的解释是这样的:

斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

前言

前几天整理了CSS一些技术关键字,但是因为自己的知识过于单薄,觉得考虑的不充分有欠缺,随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些?》,也是为了让厉害的人一起参与进来,用他们的经验告知我们CSS中哪一块的知识点是重要,或者说是不可欠缺的,也或者说是应该打好基础的。

在整理这份CSS技术关键字的开始,首先想到的是选择器,它作为最常用的的一个特性,几乎天天都在使用,但是如果让你说出20种CSS选择器,是不是可以脱口而出呢? 哎,或许我们被浏览器逼的还停留在CSS2.1那些选择器把?CSS4规范都要问世了,我们还在玩那个?

图片 1

带着这些疑问,决定梳理一下之前用到的知识点,最终以系列文章的方式说一说我对选择器的理解,具体包含的内容如下:

  • 选择器的基础使用,主要是CSS3,也会介绍新增CSS4选择器,包括各浏览器对选择器的支持情况
  • 选择器的使用技巧,使用时常出现的一些问题,扒一扒解决方案,再说一说效率和优化的部分
  • 选择器的优先级,理一理比较头疼的权重问题,如何更轻松的理解它

] !doctype html html head meta charset=utf-8 titlejs中的转码解码/title style /*reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,te...

outline-offset

相信很多开发者在写CSS的时候对下面的语句会很熟悉:

CSS

input { outline : none; } input:focus { outline : none; }

1
2
3
4
5
6
7
input {
    outline : none;
}
 
input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样

CSS

input { outline-offset: 4px ; }

1
2
3
input {
    outline-offset: 4px ;
}

调节该属性值的大小你就可以看到outline的距离变化了。

 outline-offset

  相信很多开发者在写CSS的时候对下面的语句会很熟悉:

input {
    outline : none;
}

input:focus {
    outline : none;
}

  这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样

input {
    outline-offset: 4px ;
}

  调节该属性值的大小你就可以看到outline的距离变化了。

导图与源码

我在写这篇文章的时候会梳理一份思维导图,用于更加直观的查阅所有的CSS选择器,并且也有编写示例代码,更方便理解文章中的示例。

关于思维导图和示例代码,会上传至Github,当然也会随着时间的允许,不定义补充和更新
仓库地址:
思维导图:https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css…
示例代码:

关于everyday是我每天记录和总结的地方,这里有代码,布局方案,移动端适配方案等等,后续会不断的补充和更新,欢迎一起聊代码,玩前端。图片 2

类的声明

对于下面的类的声明,可能大家都很熟悉:

CSS

.col-8 { }

1
2
3
.col-8 {
 
}

这当然没什么,但是如果你这样写呢:

CSS

.♥ { color: hotpink; } .★ { color: yellow; }

1
2
3
4
5
6
7
.♥ {
  color: hotpink;
}
 
.★ {
  color: yellow;
}

嗯,看起来怎么样,你是可以这么用的:

CSS

<div class="♥ ★"></div>

1
<div class="♥ ★"></div>

只要是Unicode的,你都可以这么来声明你的类。

选中连续的几个元素

CSS

ol li:nth-child(n 7):nth-child(-n 14) { background: lightpink; } /** Or Safari Way **/ ol li:nth-child(-n 14):nth-child(n 7) { background: lightpink; }

1
2
3
4
5
6
7
ol li:nth-child(n 7):nth-child(-n 14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n 14):nth-child(n 7) {
  background: lightpink;
}

上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。

 类的声明

  对于下面的类的声明,可能大家都很熟悉:

.col-8 {

}

  这当然没什么,但是如果你这样写呢:

.♥ {
  color: hotpink;
}

.★ {
  color: yellow;
}

  嗯,看起来怎么样,你是可以这么用的:

<div class="♥ ★"></div>

  只要是Unicode的,你都可以这么来声明你的类。

  选中连续的几个元素

ol li:nth-child(n 7):nth-child(-n 14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n 14):nth-child(n 7) {
  background: lightpink;
}

  上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。

基本选择器

伪类设置单标签

html中有几个常见的单标签:<br> ,<hr>等。具体可以查看这里:

下面的示例是实现对<hr>的修饰。

CSS

hr:before { content: "♪♪"; } hr:after { content: " This is an <hr> element"; }

1
2
3
4
5
6
7
hr:before {
    content: "♪♪";
}
 
hr:after {
    content: " This is an <hr> element";
}

没错,关键就是使用 :before 和 :after 这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰 <meta>  和  <link> ,不过这个前提是,你把这两个的 display 属性设置为:

CSS

display: block

1
display: block

 伪类设置单标签

  html中有几个常见的单标签:<br> ,<hr>等。具体可以查看这里:

  

  下面的示例是实现对<hr>的修饰。

hr:before {
    content: "♪♪";
}

hr:after {
    content: " This is an <hr> element";
}

  没错,关键就是使用:before和:after这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰<meta> 和 <link>,不过这个前提是,你把这两个的display属性设置为:

display: block

通配符选择器 *

通配符选择器用来选择所有的元素

JavaScript

* { marigin: 0; padding: 0; }

1
2
3
4
5
* {
    marigin: 0;
    padding: 0;
}
 

在我之的文章中讨论过CSS RESET,其中里面的核心代码就是使用通配符选择器定义的,来重置浏览器所有元素的内边距和外边距。

其实,通配符选择器还可以选择某一个元素下的所有元素

JavaScript

#demo *{ margin:0; }

1
2
3
4
#demo *{
    margin:0;
}
 

不过使用通配符要谨慎,并不是因为通配符会带来性能问题,而是滥用通配符会造成“继承失效”或“继承短路”的问题,这种情况会对开发造成一定程度的影响。

 属性区分大小写

假如我们在写html的时候有类似下面的代码:

XHTML

<div class="box"></div> <input type="email">

1
2
<div class="box"></div>
<input type="email">

然后我们用属性选择器进行CSS修饰:

XHTML

div[class="box"] { color: blue; } input[type="email"] { border: solid 1px red; }

1
2
3
4
5
6
7
div[class="box"] {
  color: blue;
}
 
input[type="email"] {
  border: solid 1px red;
}

这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:

XHTML

div[class="BOX"] { color: blue; } input[type="EMAIL"] { border: solid 1px red; }

1
2
3
4
5
6
7
div[class="BOX"] {
  color: blue;
}
 
input[type="EMAIL"] {
  border: solid 1px red;
}

这变成了大写之后,第一个 class="BOX" 并不会影响到 <div class="box"></div> ,而第二个 type="EMAIL" 还是会正常修饰 <input type="email"> 。所以在使用属性选择器的时候,注意大小写问题。

目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。

Happy Hacking

1 赞 3 收藏 2 评论

图片 3

 属性区分大小写

  假如我们在写html的时候有类似下面的代码:

<div class="box"></div>
<input type="email">

  然后我们用属性选择器进行CSS修饰:

div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

  这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:

div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

  这变成了大写之后,第一个class="BOX"并不会影响到<div class="box"></div>,而第二个type="EMAIL"还是会正常修饰<input type="email">。所以在使用属性选择器的时候,注意大小写问题。

  目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。

元素选择器 E

元素选择器使用也很简单,它用于指定HTML文档中元素的样式

CSS

ul{ list-style:none; }

1
2
3
ul{
    list-style:none;
}

▲ 这里使用元素选择器选择ul元素并去除列表前面的默认圆点

类选择器.className

类选择器是最常用的一种选择器,使用时需要在HTML文档元素上定义类名,然后与样式中的.className相匹配,它一次定义后,在HTML文档元素中是可以多次复用的。

CSS

CSS

.menu { margin:0 auto; }

1
2
3
.menu {
    margin:0 auto;
}

HTML

XHTML

<div class="menu"></div>

1
<div class="menu"></div>

类选择器还可以结合元素选择器来使用,假设文档中有两个元素都使用了.menu类名,但是你只想选择div元素上类名为.menu的元素

CSS

CSS

div.menu { margin:0 auto; }

1
2
3
div.menu {
    margin:0 auto;
}

HTML

XHTML

<div class="menu"></div> <ul class="menu"></ul>

1
2
<div class="menu"></div>
<ul class="menu"></ul>

类选择器支持多类名使用,比如.menu.active这个选择器只对元素中同时包含了menuactive两个类才会起作用

CSS

CSS

.menu { margin:0 auto; } .menu.active { font-weight:bold; }

1
2
3
4
5
6
.menu {
    margin:0 auto;
}
.menu.active {
    font-weight:bold;
}

HTML

XHTML

<div class="menu active"></div>

1
<div class="menu active"></div>

不过多类选择器.className1.className2在 IE6 以上才支持,关于浏览器对CSS选择器的支持会下面的内容统一整理列出表格。

id选择器#id

id选择器与上面的类选择器使用很相似,通过在HTML文档中添加ID名称,然后与样式中的#id相匹配,不过两者的最大的区别在于,ID选择器是一个页面中唯一的值,不可多次使用,而class选择器是可以多次复用的。

CSS

CSS

#menu{ margin:0 auto; }

1
2
3
#menu{
    margin:0 auto;
}

HTML

XHTML

<div id="menu"></div>

1
<div id="menu"></div>

群组选择器s1,s2,...,sN

群组选择器在开发中也是很常用的,它用于将相同样式的元素分组在一起,然后用逗号进行分割。

CSS

CSS

a:active,a:hover { outline: 0; }

1
2
3
a:active,a:hover {
  outline: 0;
}

▲ 这里统一去掉了a链接在点击和浮动时的虚线焦点框。

后代选择器E F

后代选择器是最常使用的选择器之一,它也被称作包含选择器,用于匹配所有被E元素包含的F元素,这里F元素不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中。

CSS

CSS

.menu li{ padding:0 ; }

1
2
3
.menu li{
    padding:0 ;
}

HTML

XHTML

<ul id="menu"> <li> <ul> <li></li> </ul> </li> </ul>

1
2
3
4
5
6
7
<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 这里.menu下的li元素和嵌套的ul元素下的li的元素都会被选择,进行清楚内边距。

子元素选择器E > F

子元素选择器只能选择某元素的子元素,这里的F元素仅仅是E元素的子元素才可以被选中

CSS

CSS

.menu > li{ padding:0 ; }

1
2
3
.menu > li{
    padding:0 ;
}

HTML

XHTML

<ul id="menu"> <li> <ul> <li></li> </ul> </li> </ul>

1
2
3
4
5
6
7
<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 将会对.menu下的li子元素选中,但会忽视内部嵌套的li元素

相邻兄弟元素选择器E F

相邻兄弟选择器可以选择紧接在另一元素后的元素,但是他们必须有一个相同的父元素。比如E元素和F元素具有一个相同的父元素,而且F元素在E元素后面,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

CSS

CSS

h1 p { margin-top:5px; }

1
2
3
h1 p {
    margin-top:5px;
}

HTML

XHTML

<div> <h1>标题</h1> <p>内容</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>内容</p>
</div>

▲ 将会选择h1元素后面的兄弟元素p

通用兄弟选择器E ~ F

通用兄弟元素选择器是CSS3新增加一种选择器,用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似,但不同于前者只是选择相邻的后一个元素,而通用兄弟元素选择器是选择所有元素

CSS

CSS

h1 ~ p { margin-top:5px; }

1
2
3
h1 ~ p {
    margin-top:5px;
}

HTML

XHTML

<div> <h1>标题</h1> <p>内容</p> <p>内容</p> <p>内容</p> </div>

1
2
3
4
5
6
<div>
    <h1>标题</h1>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>

▲ 将会选择h1元素后面的所有的兄弟元素p

属性选择器

选择器 描述 CSS版本
E[attr] 匹配所有具有attr属性的E元素 2.1
E[attr=value] 匹配所有attr属性等于“value”的E元素 2.1
E[attr~=value] 匹配所有attr属性具有多个空格分隔的值、其中一个值等于“value”的E元素 2.1
E[attr^=value] 匹配所有attr属性值是以val开头的E元素 2.1
E[attr$=value] 匹配所有attr属性值是以val结束的E元素 3
E[attr*=value] 匹配所有attr属性值包含有“value”的E元素 3

E[attr]

E[attr]属性选择器是CSS3属性选择器最简单的一种,用于选择具有att属性的E元素。

CSS

CSS

img[alt] { margin: 10px; }

1
2
3
img[alt] {
    margin: 10px;
}

HTML

XHTML

<img src="url" alt="" /> <img src="url" />

1
2
<img src="url" alt="" />
<img src="url" />

▲ 将会选择到第一张图片,因为匹配到了alt属性,你也可以使用多属性的方式选择元素

CSS

img[src][alt] { margin: 10px; }

1
2
3
img[src][alt] {
    margin: 10px;
}

E[attr=value]

E[attr="value"]是指定了属性值value,从而缩小了范围可以更为精确的查找到自己想要的元素。

CSS

CSS

input[type="text"] { border: 2px solid #000; }

1
2
3
input[type="text"] {
    border: 2px solid #000;
}

HTML

XHTML

<input type="text" /> <input type="submit" />

1
2
<input type="text" />
<input type="submit" />

▲ 将会选择到type="text"表单元素。

E[attr~=value]

如果你要根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],你会发现它和E[attr="value"]极为的相似,但是两者的区别是,属性选择器中有波浪(~)时属性值有value时就相匹配,没有波浪(~)时属性值要完全是value时才匹配。

CSS

CSS

div[class~="a"] { border: 2px solid #000; }

1
2
3
div[class~="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="a">1</div> <div class="b">2</div> <div class="a b">3</div>

1
2
3
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

▲ 将会选择到第1、3个div元素,因为匹配到了class属性,且属性值中有一个值为a

E[attr^=value]

E[attr^=”value”]属性选择器,指的是选择attr属性值以“value”开头的所有元素

CSS

CSS

div[class^="a"] { border: 2px solid #000; }

1
2
3
div[class^="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到第1、2个div元素,因为匹配到了class属性,且属性值以a开头

E[attr$=value]

E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,这里是选择attr属性值以”value”结尾的所有元素。

CSS

CSS

div[class$="c"] { border: 2px solid #000; }

1
2
3
div[class$="c"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到第1、3个div元素,因为匹配到了class属性,且属性值以c结尾

E[attr*=value]

E[attr*="value"]属性选择器表示的是选择attr属性值中包含"value"字符串的所有元素。

CSS

CSS

div[class*="b"] { border: 2px solid #000; }

1
2
3
div[class*="b"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到所有的元素,因为匹配到了class属性,且属性值都包含了b

E[attr|=”val”]

E[attr|="val"]是属性选择器中的最后一种,它被称作为特定属性选择器,这个选择器会选择attr属性值等于value或以value-开头的所有元素。

CSS

CSS

div[class|="a"] { border: 2px solid #000; }

1
2
3
div[class|="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="a-test">1</div> <div class="b-test">2</div> <div class="c-test">3</div>

1
2
3
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

▲ 将会选择第1个div元素,因为匹配到了class属性,且属性值以紧跟着"a-"的开头

伪类选择器

动态伪类

一般动态伪类是在用户操作体验时触发的,最常见的就是超链接,它拥有访问前,鼠标悬停,被点击,已访问4种伪类效果。

  • E:link 设置超链接a在未被访问前的样式
  • E:visited 设置超链接a已被访问过时的样式
  • E:hover 设置元素在其鼠标悬停时的样式
  • E:active 设置元素在被用户激活时的样式

不过在使用时的时候,一定要注意书写的顺序,不然在不同的浏览器中会带来一些意想不到的错误。

CSS

a:link {} a:visited {} a:hover {} a:active {}

1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

最可靠的记忆顺序就是遵循爱恨原则:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。

还有一个用户行为的动态伪类:focus,常用于表单元素(触发onfocus事件发生)时的样式。

CSS

input[type="text"]:focus{ border: 2px solid #000; }

1
2
3
input[type="text"]:focus{
    border: 2px solid #000;
}

▲ 当用户聚焦到输入框内,会给输入框添加一个边框颜色。

表单状态伪类

我们把以下3种状态称作表单状态伪类,你会发现这些关键字就是HTML表单元素的属性,checked用于type="radio"type="checkbox"够选中状态,disabled用于type="text"禁用的状态,而enabled这里表示type="text"可用的状态。

  • E:checked 匹配用户界面上处于选中状态的元素E
  • E:enabled 匹配用户界面上处于可用状态的元素E
  • E:disabled 匹配用户界面上处于禁用状态的元素E

CSS

CSS

input[type="text"]:enabled { background: #fff; } input[type="text"]:disabled{ background: #eee; } input:checked span { background: red; }

1
2
3
4
5
6
7
8
9
input[type="text"]:enabled {
    background: #fff;
}
input[type="text"]:disabled{
    background: #eee;
}
input:checked span {
    background: red;
}

HTML

XHTML

<input type="text" value="可用状态" /> <input type="text" value="可用状态" /> <input type="text" value="禁用状态" disabled="disabled" /> <input type="text" value="禁用状态" disabled="disabled" /> <label><input type="radio" name="radio" /><span>黑色</span></label>

1
2
3
4
5
<input type="text" value="可用状态" />
<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />
<input type="text" value="禁用状态" disabled="disabled" />
<label><input type="radio" name="radio" /><span>黑色</span></label>

▲ 将会给可用状态的文本框设置为白色(#fff)背景,禁用状态设置为灰色(#eee)背景,如果你选中了radio,它兄弟元素span的文本会变成红色

结构伪类

  • E:first-child 匹配父元素的第一个子元素E
  • E:last-child 匹配父元素的最后一个子元素E
  • E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效
  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效
  • E:first-of-type 匹配同类型中的第一个同级兄弟元素E
  • E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
  • E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
  • E:only-child 匹配父元素仅有的一个子元素E
  • E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
  • E:empty 匹配没有任何子元素(包括text节点)的元素E

E:first-child 和 E:last-child
E:first-child是用来选择父元素的第一个子元素E,但是它必须为父元素的第一个子元素,不然会失效,举例说明

CSS

CSS

p:first-child { color:red; }

1
2
3
p:first-child {
    color:red;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>段落</p>
</div>

▲ 你会发现p元素的字体并没有变为红色,因为p元素前面还有个h1,它并不是父元素下的第一个子元素。

XHTML

<div> <p>段落</p> </div>

1
2
3
<div>
    <p>段落</p>
</div>

▲ 这时需要改变结构,效果才会正常。

E:last-childE:first-child选择器的作用类似,不同的是E:last-child选择是的元素的最后一个子元素。

CSS

CSS

p:last-child { color:red; }

1
2
3
p:last-child {
    color:red;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>段落</p>
</div>

▲ 将p元素的字体设置为红色

E:nth-child(n) 和 E:nth-last-child(n)
E:nth-child(n)用于匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
该选择符允许使用一个乘法因子(n)来作为换算方式,如下:

CSS

li:nth-child(2) { background:#fff}

1
li:nth-child(2) { background:#fff}

▲ 选择第几个标签,“2可以是你想要的数字,最小从0开始”

CSS

li:nth-child(n 4) { background:#fff}

1
li:nth-child(n 4) { background:#fff}

▲ 选择大于等于4标签,“n”表示从整数

CSS

li:nth-child(-n 4) { background:#fff}

1
li:nth-child(-n 4) { background:#fff}

▲ 选择小于等于4标签

CSS

li:nth-child(2n) { background:#fff} li:nth-child(even) { background:#fff}

1
2
li:nth-child(2n) { background:#fff}
li:nth-child(even) { background:#fff}

▲ 选择偶数标签,2n也可以是even

CSS

li:nth-child(2n-1) { background:#fff} li:nth-child(odd) { background:#fff}

1
2
li:nth-child(2n-1) { background:#fff}
li:nth-child(odd) { background:#fff}

▲ 选择奇数标签,2n-1也可以是odd

CSS

li:nth-child(3n 1) { background:#fff}

1
li:nth-child(3n 1) { background:#fff}

▲ 自定义选择标签,3n 1表示“隔二取一”

E:nth-last-child(n)又要开始反着来了,CSS3选择器有正就有反

CSS

li:nth-last-child(3) { background:#fff}

1
li:nth-last-child(3) { background:#fff}

▲ 选择倒数第3个标签

E:first-of-type 和 E:last-of-type
E:first-of-type的使用方法类似于我们上面讲过的E:first-child,不过区别在于该选择器只会选择同类型的第一个元素,而不是父元素的第一个元素,举例说明:

CSS

CSS

p:first-of-type { color:red; } p:last-of-type { color:green; }

1
2
3
4
5
6
p:first-of-type {
    color:red;
}
p:last-of-type {
    color:green;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> <p>段落</p> <div></div> </div>

1
2
3
4
5
6
<div>
    <h1>标题</h1>
    <p>段落</p>
    <p>段落</p>
    <div></div>
</div>

▲ 你会发现第一个p元素的字体被设置为红色,第二个p元素的字体被设置为绿色,这就是E:first-of-typeE:first-child不同之处。

E:nth-of-type(n) 和 E:nth-last-of-type(n)
这两个选择器的用法类似于:nth-child(n)E:nth-last-child(n),关于区别也是选择器只会选择同类型的兄弟元素,举个栗子

XHTML

<div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> <p>第4个p</p> <p>第5个p</p> </div>

1
2
3
4
5
6
7
8
9
<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
    <p>第4个p</p>
    <p>第5个p</p>
</div>

CSS

p:nth-child(3) { color:red; }

1
2
3
p:nth-child(3) {
    color:red;
}

▲ 如果使用:nth-child(3)你会发现第3个p元素文本并没有变成红色。就像我们之前说的,如果第n个子元素不是E,则是无效选择符,但n会递增。

CSS

p:nth-of-type(3) { color:red; }

1
2
3
p:nth-of-type(3) {
    color:red;
}

▲ 但是使用:nth-of-type(3)后会发现第3个p元素文本被设置为红色。

E:only-child 和 E:only-of-type
E:only-child用来匹配父元素仅有的一个子元素E,而E:only-of-type是表示一个元素它有很多个子元素,但是只会匹配其中只有一个子元素的元素,说起来有点绕口,来个栗子

HTML

XHTML

<div> <p>段落</p> </div> <div> <div>容器</div> <p>段落</p> <div>容器</div> </div>

1
2
3
4
5
6
7
8
<div>
    <p>段落</p>
</div>
<div>
    <div>容器</div>
    <p>段落</p>
    <div>容器</div>
</div>

CSS

p:only-child { color: red; }

1
2
3
p:only-child {
    color: red;
}

▲ 将会对第1个div元素下的p元素文本设置成红色。

CSS

p:only-of-type { color: red; }

1
2
3
p:only-of-type {
    color: red;
}

▲ 不仅会第1个div元素下的p元素文本设置成红色,也会对第2个div元素下的p元素文本设置成红色,因为它是p元素中唯一的一个同级兄弟元素。

<iframe width=”100%” height=”300″ src=”//jsfiddle.net/Alsiso/15h4ozee/embedded/” allowfullscreen=”allowfullscreen” frameborder=”0″></iframe>

E:empty
E:empty是用来选择没有任何内容的元素,包括text节点,也就是意味着连一个空格都不能有

HTML

XHTML

<div> <p> </p> <p></p> </div>

1
2
3
4
<div>
    <p> </p>
    <p></p>
</div>

CSS

CSS

p:empty { height: 100px; }

1
2
3
p:empty {
    height: 100px;
}

▲ 将会对第2个空元素p设置一个高度,为什么第一个会失效呢,因为该容器里面有一个空格。

否定类

E:not(s)用于匹配不含有s选择符的元素E,说起来不好理解,那么说一个最常用的开发场景,假如我们要对ul元素下的所有li都加上一个下边框用于内容分割,但是最后一个不需要,如下:

HTML

XHTML

<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul>

1
2
3
4
5
6
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

CSS

CSS

ul li:not(:last-child) { border-bottom: 1px solid #ddd; }

1
2
3
ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

▲ 将会对列表中除最后一项外的所有列表项添加一条下边框

伪元素选择器

  • E:first-letter 选择文本块的第一个字母
  • E:first-line 选择元素的第一行
  • E:before 在元素前面插入内容,配合”content”使用
  • E:after 在元素后面插入内容,配合”content”使用

以上四个伪元素选择器在CSS2.1都已经被支持,但在CSS3中将伪元素选择符前面的单个冒号(:)修改为双冒号(::),如E::first-letterE::first-lineE::beforeE::after,不过之前的单冒号写法也是有效的。

E::first-letter 和 E::first-line

CSS

p::first-letter { font-weight:bold; }

1
2
3
p::first-letter {
    font-weight:bold;    
}

▲ 将会对文本块的第一个字母进行加粗

CSS

p::first-line { font-weight:bold; }

1
2
3
p::first-line {
    font-weight:bold;    
}

▲ 将会对段落的第一行文本进行加粗

E::before 和 E::after

E::beforeE::after是用来给元素的前面和后面差入内容,配合”content”使用,但它必须有值才能生效。

HTML

XHTML

<div>me</div>

1
<div>me</div>

CSS

CSS

div:before{ content:'you before'; color:red; } div:after{ content:'you after'; color:green; }

1
2
3
4
5
6
7
8
div:before{
    content:'you before';
    color:red;
}
div:after{
    content:'you after';
    color:green;
}

▲ 将会在div容器中的文本me加上添加后的内容并设置其颜色

E::placeholder和 E::selection

  • E::placeholder 选择文本块的第一个字母
  • E::selection 选择文本块的第一个字母

E::placeholder用于设置对象文字占位符的样式,但是每个浏览器的CSS选择器都有所差异,需要针对每个浏览器做单独的设定,举个例子看代码

CSS

::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19 */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10 */ color: #999; }

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19 */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10 */
    color:    #999;
}

E::selection用于设置文本被选择时的样式,被定义的样式属性有3个,而且使用时需要对火狐浏览器单独设置。

CSS

p::-moz-selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3); } p::selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3); }

1
2
3
4
5
6
7
8
9
10
p::-moz-selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}

第四代选择器

发展历史

自从哈坤·利提出CSS建议到1996年CSS1.0问世,距离今天已经有20个年头。
不过CSS的发展一直在持续,1997年组织了专门管CSS的工作组,并在1998年发布了CSS2.0,之后发布了修订版本的CSS2.1。

CSS2.1 是我们一直再用的,也是浏览器支持较为完整的一个版本。

CSS3 的开发工作早在2001年以前就启动了,不过发展到今天,大多数的现代浏览器对CSS3属性和选择器支持良好,除了一些微软IE浏览器的较老版本。

历史前进的步伐并不会停止的,新的CSS4也正由W3C编辑团队研发中。在CSS4中引进了许多的新变化,不过基本选择器是不会有变化的,更多的还是添加一些伪类,那么接下来一起看看增加的内容。

提醒:目前这些代码功能可能还在实验规范阶段,浏览器并没有得到支持,所以并不能投入使用 !

升级内容

否定类 E:not(s,s,s..)
E:not其实在选择器已经出现在CSS3了,它用于匹配不含有s选择符的元素E,上面我们讲过它的使用方法,但是它只能用于简单选择器,伪类,标签,id,类和类选择器参数。不过在CSS4中得到了升级,具体区别

CSS

p:not(.header) { font-weight: normal; }

1
2
3
p:not(.header) {
    font-weight: normal;
}

▲ CSS3将会对除了.header类以外的文本加粗

CSS

p:not(.header, .footer) { font-weight: normal; }

1
2
3
p:not(.header, .footer) {
    font-weight: normal;
}

▲ CSS4通过传入一个用逗号,将会对除了.header.footer类以外的文本加粗

关联类 E:has(s)
这个选择器通过一个参数(选择符),去匹配与某一元素对应的任意选择器,举个例子

CSS

a:has(>img) { border: 1px solid #000; }

1
2
3
a:has(>img) {  
    border: 1px solid #000;
}

▲ 将会对所有带有img元素的a元素加个黑色的边框

匹配任何伪类E:matches
这个伪类选择器可以规则运用在所有的选择器组中,它能帮我们简写多组选择器的规则,例子说明,

XHTML

<section> <h1>标题</h1> </section> <nav> <h1>标题</h1> </nav>

1
2
3
4
5
6
<section>
    <h1>标题</h1>
</section>
<nav>
    <h1>标题</h1>
</nav>

▲ 上面的两个容器都有一个h1标题元素,如何对容器下的h1`字体进行字体颜色设置呢

CSS

section h1,nav h1{ color:red; } :matches(section, nav) h1 { color: red; }

1
2
3
4
5
6
7
section h1,nav h1{
    color:red;
}
 
:matches(section, nav) h1 {
    color: red;
}

▲ 这一种是传统的方法,第二种就是:matches方法。

位置伪类E:local-linkE:local-link(n)

位置伪类是访问者在你网站上的位置

  • :local-link(0) 代表一个超连接元素,其target和文档的URL是在同一个源中。
  • :local-link(1) 代表一个超连接元素,其target和文档的URL是在同一个源中。
  • :local-link(2) 代表一个超连接元素,其target和文档的URL是在同一个源中。
CSS

/* 将会匹配 http://example.com/ link(s) */ :local-link(0) { color:
red; } /* 将会匹配 http://example.com/year/ link(s) */
:local-link(1) { color: red; } /* 将会匹配
http://example.com/year/month/ link(s) */ :local-link(2) { color:
red; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-14">
14
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a025160512778-1" class="crayon-line">
/* 将会匹配 http://example.com/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-2" class="crayon-line crayon-striped-line">
:local-link(0) {
</div>
<div id="crayon-5b8f6b937a025160512778-3" class="crayon-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-4" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6b937a025160512778-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f6b937a025160512778-6" class="crayon-line crayon-striped-line">
/* 将会匹配 http://example.com/year/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-7" class="crayon-line">
:local-link(1) {
</div>
<div id="crayon-5b8f6b937a025160512778-8" class="crayon-line crayon-striped-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-9" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a025160512778-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6b937a025160512778-11" class="crayon-line">
/* 将会匹配 http://example.com/year/month/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-12" class="crayon-line crayon-striped-line">
:local-link(2) {
</div>
<div id="crayon-5b8f6b937a025160512778-13" class="crayon-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-14" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


**表单状态伪类 `E:indeterminate`**  
`checkbox`中的`indeterminate`属性用于展示半选择状态,这个属性只是改变`checkbox`的外观,不对它的`checked`属性产生影响,CSS4选择器中也增加了半选择状态的伪类。  



CSS

:indeterminate { opacity: 0.6; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a028060570052-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a028060570052-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a028060570052-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a028060570052-1" class="crayon-line">
:indeterminate {
</div>
<div id="crayon-5b8f6b937a028060570052-2" class="crayon-line crayon-striped-line">
    opacity: 0.6;
</div>
<div id="crayon-5b8f6b937a028060570052-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


**表单状态伪类 `E:required`**和 `E:optional`  
`required`属性是HTML5新添加的,用于规定必需在提交之前填写输入字段  



CSS

:required { border: 1px solid red; } :optional { border: 1px solid
gray; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a02f199693580-1" class="crayon-line">
:required {
</div>
<div id="crayon-5b8f6b937a02f199693580-2" class="crayon-line crayon-striped-line">
    border: 1px solid red;
</div>
<div id="crayon-5b8f6b937a02f199693580-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a02f199693580-4" class="crayon-line crayon-striped-line">
:optional {
</div>
<div id="crayon-5b8f6b937a02f199693580-5" class="crayon-line">
    border: 1px solid gray;
</div>
<div id="crayon-5b8f6b937a02f199693580-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>





XHTML

&lt;input type="text" required="required" /&gt; &lt;input
type="text" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a033702718706-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a033702718706-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a033702718706-1" class="crayon-line">
&lt;input type=&quot;text&quot; required=&quot;required&quot; /&gt;
</div>
<div id="crayon-5b8f6b937a033702718706-2" class="crayon-line crayon-striped-line">
&lt;input type=&quot;text&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


▲
第一个设置了`required`属性的表单元素将会设置一个红色边框,而第二个没有设置该属性的,将会设置一个灰色边框。

**范围限制伪类`E:in-range`和`E:out-of-range`**  
用于表单字段值范围的限制,取决于表单的`min`和`max`属性



CSS

:in-range { background-color:green; } :out-of-range {
background-color:red; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a036881452652-1" class="crayon-line">
:in-range {
</div>
<div id="crayon-5b8f6b937a036881452652-2" class="crayon-line crayon-striped-line">
    background-color:green;
</div>
<div id="crayon-5b8f6b937a036881452652-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a036881452652-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6b937a036881452652-5" class="crayon-line">
:out-of-range {
</div>
<div id="crayon-5b8f6b937a036881452652-6" class="crayon-line crayon-striped-line">
    background-color:red;
</div>
<div id="crayon-5b8f6b937a036881452652-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>



XHTML

&lt;input type="number" value="5" max="10" min="1" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a039710993412-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a039710993412-1" class="crayon-line">
&lt;input type=&quot;number&quot; value=&quot;5&quot; max=&quot;10&quot; min=&quot;1&quot;  /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

▲
如果你输入的值在设置的最小和最大值范围内,那么表单背景会呈现为绿色,如果超出了限制,那么会呈现为红色。

关于更多的CSS4选择器,可参考这里的 [示例介绍](http://css4-selectors.com/selectors/)。

2 赞 5 收藏 评论

图片 4

本文由pc28.am发布于前端技术,转载请注明出处:使用方法介绍,几个CSS的黑科技

上一篇:推而广之名气还是能得赞誉,关于前端的思考与 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • JavaScript开发工具大全,开发者的
    JavaScript开发工具大全,开发者的
    JavaScript 代码静态品质检查 2015/07/15 · JavaScript·品质检查 原作出处: 百度efe -笔者内江人(@i笔者三亚人)    自鸿蒙初判,Brendan Eich 10天捏出 Mocha 之后
  • 疗养 CSS 的艺术
    疗养 CSS 的艺术
    调试 CSS 的方法 2016/09/06 · CSS ·调试 原稿出处: BenFrain   译文出处:众成翻译 -yanni4night    本人经验过不菲 CSS代码的调解专门的学业,有人家写的也是
  • 何以设置链接样式,CSS结商谈层叠
    何以设置链接样式,CSS结商谈层叠
    如何设置链接样式 2016/09/05 · CSS 本文作者: 伯乐在线 -赖祥燃。未经作者许可,禁止转载! 欢迎加入伯乐在线 专栏作者。 每个合法的文档都会生成一个文
  • CSS图像替换,文本缩进
    CSS图像替换,文本缩进
    CSS图像替换:文本缩进,负边距以及更多方法 2016/07/04 · CSS ·图像替换 原文出处: BaljeetRathi   译文出处:众成翻译    CSS中的图像替换有着广泛而多样
  • 用法教程
    用法教程
    CSS Modules 用法教程 2016/06/19 · CSS ·Modules 初藳出处:阮一峰    学过网页开拓就能知晓,CSS 无法算编程语言,只是网页样式的一种描述方法。 为了让 CSS也