属性选择器[IE7+]
E[attr]
E[type="text"]
E[attr~="value"]以空格隔开,其中词列表中包含了一个value词
E[attr^="value"]以value开头
E[attr$="value"]以value结束的
E[attr*="value"]包含了value
E[attr|="value"]value或以“value-”开头的值(比如说zh-cn)



结构性伪类

of-type,关注以标签计算;

child,关注凡有子节点即计算,有&&的意思,缺一不成立;

E:nth-child(n) E的父元素中的第n个字节点,并且标签必须=E

p:nth-child(odd) 奇数

p:nth-child(even) 偶数

p:nth-child(2n)

E:nth-last-child(n) E的父元素中的第n个字节点,倒数计算



E:nth-of-type(n) E的父元素中的第n个字节点,只算类型E

E:nth-last-of-type(n) E父元素中的第n个字节点,只算类型E,倒数计算

E:empty E元素中没有子节点。注意:子节点包含文本节点

:first-child == :nth-child(1) IE9+
:last-child == :nth-last-child(1) IE9+
:first-of-type == :nth-of-type(1) IE9+
:last-of-type == :nth-last-of-type(1) IE9+

p:nth-of-type(2) 找到P标签父级下的第2个P标签 可能这种更靠谱
p:nth-last-of-type(2) 找到P标签父级下的倒数第2个P标签 可能这种更靠谱
p:empty 只要有东西即不成立,无论任何东西

p:only-child -->匹配那些是其父元素唯一孩子的 E 元素;IE9+
p:only-of-type -->根据 p 的类型,匹配那些在其兄弟里是唯一此类元素的 p 元素。IE9+

<div class='box1'>
<div>
<p>我是p,父级下只有我一个孩子,所以 only-child 及 only-of-type 都选中我</p>
</div>

<div>
<span>我是妹妹span</span>
<p>我是p,父级下只有妹妹span,没有别的哥哥弟弟p,但是也只有 only-of-type选中我;而only-child有妹妹span所以选不中</p>
</div>

<div>
<p>我是p,我有好多兄弟,所有我不能被选中</p>
<p>我是p,我有好多兄弟,所有我不能被选中</p>
</div>
</div>
.box1 p:only-child{background:green;color: #fff;}
.box1 p:only-of-type{background:peru;color: #fff;}

E:target 表示当前的URL片段的元素类型,这个元素必须是E
E:disabled 不可点击时的样式
E:enabled 可点击的样式
E:checked 已选中的checkbox或radio
E:first-line E元素中的第一行
E:first-letter E元素中的第一个字符
E::selection E元素在用户选中文字时
E::before 生成内容在E元素前
E:not(s) E元素不被匹配如 p:not(.tab) //不匹配带有class='tab'的元素
E~F表示E元素毗邻的F元素
Content 属性

<pre>#div1,#div2{width: 100px;height: 100px;background:red;display: none;}

div1:target,#div2:target{display: block;}

input:enabled{background:pink}
input:disabled{background:peru}
input:checked{width: 20px;height: 20px;}

label{ float: left; margin: 0 5px; overflow: hidden; position: relative;}
label input{ position: absolute; left: -50px; top: -50px;}
span{ float: left; width: 20px; height: 20px;border:1px solid #000;}
input:checked ~span{background:green}

p~h2{background:#f90}

.box p:first-line{background:#cdcd00}
.box p:first-letter{font-size: 30px;}

.box2 p::selection{background:darkmagenta; color:#fff;}

.box3:before{content:'before的内容';border:3px solid #000;padding-left: 10px;padding-right: 10px;}
.box3:after{content:'after的内容';border:3px solid #000;padding-left: 10px;padding-right: 10px;}

</pre>

See the Pen WQeqBP by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>



文本屬性

顏色模式:rgba(),应用:背景透明,颜色不透明,反向,边框透明,有bug;

文字陰影:text-shadow:x y blur color...

文字搭邊:-webkit-text-stroke:宽度 颜色 ,只支持webkit

Direction 定义文字排列方式(全兼容) 注意要配合unicode-bidi 一块使用

Text-overflow 定义省略文本的处理方式 clip 无省略号 Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{
direction: rtl;        /*文字從右到左*/
unicode-bidi: bidi-override

/*文字超出點點省略*/
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

自定義字體: @font-face
http://www.fontsquirrel.com/fontface/generator

    @font-face {
        font-family: 'chalk_marksregular';
        src: url('../font/chalkmars-webfont.eot');
        src: url('../font/chalkmars-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/chalkmars-webfont.woff2') format('woff2'),
        url('../font/chalkmars-webfont.woff') format('woff'),
        url('../font/chalkmars-webfont.ttf') format('truetype'),
        url('../font/chalkmars-webfont.svg#chalk_marksregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    p{ font-family: 'chalk_marksregular'; font-size: 100px;transition: 1s}
    p:hover{ color: #f90;}