熟悉前端的人都会听过css的伪类与伪元素

小结伪类与伪成分

2016/05/21 · CSS · 1
评论 ·
伪元素,
伪类

原稿出处:
AlloyTeam   

熟习前端的人都会听过css的伪类与伪成分,不过大多数的人都会将这两个混淆。本文从分析伪类与伪成分的意义出发,区分那多头的区分,况且列出大多数伪类与伪成分的具体用法,即使你有用过伪类与伪成分,但在那之中总有蒸蒸日上五个你没见过的啊。

1.伪类与伪元素

先说一说为何css要引进伪成分和伪类,以下是css2.1
Selectors章节中对伪类与伪元素的汇报:

CSS introduces the concepts of pseudo-elements and pseudo-classes  to
permit formatting based on information that lies outside the document
tree.

直译过来正是:css引进伪类和伪成分概念是为着格式化文书档案树以外的音讯。也等于说,伪类和伪成分是用来修饰不在文书档案树中的部分,比方,一句话中的第二个字母,可能是列表中的第一个因素。下边分别对伪类和伪成分进行表明:

伪类用于当已有成分处于的有个别状态时,为其拉长对应的样式,那个情状是依赖客户作为而动态变化的。举例说,当顾客悬停在钦点的因素时,大家得以经过:hover来描述这几个因素的事态。即使它和平时性的css类相似,可感觉已有的成分增多样式,可是它独有处于dom树无法描述的处境下才具为要素增添样式,所以将其称作伪类。

伪元素用于创设一些不在文档树中的成分,并为其增加样式。比方说,我们得以经过:before来在二个因素前增添部分文书,并为这么些文件增添样式。固然顾客能够见到这个文件,不过这么些文件实际上不在文书档案树中。

2.伪类与伪成分的区分

此地通过多个例子来验证二者的界别。

下边是三个粗略的html列表片段:

XHTML

<ul> <li>我是率先个</li>
<li>小编是第一个</li> </ul>

1
2
3
4
<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>

万风姿浪漫想要给第百废俱兴项增加样式,能够在为率先个<li>增添二个类,并在那类中定义对应样式:

HTML:

XHTML

<ul> <li class=”first-item”>小编是率先个</li>
<li>作者是第三个</li> </ul>

1
2
3
4
<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

CSS:

XHTML

li.first-item { color: orange }

1
2
3
li.first-item {
    color: orange
}

借使不用增多类的法子,大家得以由此给安装第一个<li>的:first-child伪类来为其增进样式。今年,被修饰的<li>成分依然处于文书档案树中。

HTML:

XHTML

<ul> <li>小编是第七个</li>
<li>笔者是第三个</li> </ul>

1
2
3
4
<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>

CSS:

XHTML

li:first-child { color: orange }

1
2
3
li:first-child {
    color: orange
}

下边是另一个简练的html段落片段:

XHTML

<p>Hello World, and wish you have a good day!</p>

1
<p>Hello World, and wish you have a good day!</p>

假设想要给该段落的率先个字母加多样式,能够在第一个假名中封装叁个<span>成分,并安装该span成分的体裁:

HTML:

XHTML

<p><span class=”first”>H</span>ello World, and wish
you have a good day!</p>

1
<p><span class="first">H</span>ello World, and wish you have a good day!</p>

CSS:

CSS

.first { font-size: 5em; }

1
2
3
.first {
    font-size: 5em;
}

风流倜傥经不创立一个<span>成分,咱们能够透过安装<p>的:first-letter伪元一贯为其丰硕样式。那年,看起来好疑似成立了多少个设想的<span>成分并增加了体制,但实质上文档树中并官样文章此个<span>成分。

HTML:

XHTML

<p>Hello World, and wish you have a good day!</p>

1
<p>Hello World, and wish you have a good day!</p>

CSS:

CSS

p:first-letter { font-size: 5em; }

1
2
3
p:first-letter {
    font-size: 5em;
}

从上述例子中能够看看,伪类的操作对象是文书档案树中已有的成分,而伪元素则开创了一个文书档案数外的因素。因而,伪类与伪成分的界别在于:有未有创制二个文书档案树之外的成分。

 

3.伪成分是行使单冒号仍然双冒号?

CSS3典型中的须求运用双冒号(::)表示伪成分,以此来区分伪成分和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了有的低于IE8版本的浏览器外,大多数浏览器都扶植伪成分的双冒号(::)表示方法。

不过,除了少部分伪元素,如::backdrop必需运用双冒号,超过二成伪成分都辅助单冒号和双冒号的写法,比方::after,写成:after也足以正确运维。

对于伪成分是选拔单冒号还是双冒号的主题素材,w3c标准中的描述如下:

Please note that the new CSS3 way of writing pseudo-elements is to use
a double colon, eg a::after { … }, to set them apart from
pseudo-classes. You may see this sometimes in CSS. CSS3 however also
still allows for single colon pseudo-elements, for the sake of backwards
compatibility, and we would advise that you stick with this syntax for
the time being.

大概的意趣就是:固然CSS3专门的工作供给伪成分使用双冒号的写法,但也长期以来辅助单冒号的写法。为了向后杰出,我们建议你在当前恐怕接受单冒号的写法。

骨子里,伪成分使用单冒号依然双冒号很难说得清是是非非,你能够遵守个人的喜好来挑选某一种写法。

 

4.伪类与伪元素的实际用法

那黄金时代章以含义分析和例子的不二法门列出半数以上的伪类和伪成分的绘声绘色用法。上边是基于用途分类的伪类总括图和依照冒号分类的伪成分总括图:

图片 1

图片 2

一点伪类或伪成分仍旧居于试验阶段,在动用前提议先在Can I
Use等网址查风度翩翩查其浏览器包容性。处于试验阶段的伪类或伪元素会在题目中标明。

 

伪类

状态

鉴于景况伪类的用法大家都丰富熟谙,这里就无须例子表明了。

1 :link

选取未访问的链接

2 :visited

分选已拜访的链接

3 :hover

选料鼠标指针浮动在其上的成分

4 :active

选拔活动的链接

5 :focus

分选获取关节的输入字段

 

结构化

1 :not

一个死不认同伪类,用于相配不适合参数选用器的因素。

如下例,除了第2个<li>成十一分,其余<li>成分的文书都会化为深橙。

HTML:

XHTML

<ul> <li class=”first-item”>一些文本</li>
<li>一些文本</li> <li>一些文本</li>
<li>一些文本</li> </ul>

1
2
3
4
5
6
<ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

CSS:

CSS

li:not(.first-item) { color: orange; }

1
2
3
li:not(.first-item) {
    color: orange;
}

2 :first-child

相配成分的第多少个子成分。

如下例,第二个<li>成分的文本会变为蛋青。

HTML:

XHTML

<ul> <li>这里的文本是砖红的</li>
<li>一些文本</li> <li>一些文本</li> </ul>

1
2
3
4
5
<ul>
    <li>这里的文本是橙色的</li>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

CSS:

XHTML

li:first-child { color: orange; }

1
2
3
li:first-child {
    color: orange;
}

3 : last-child

相配成分的终极三个子成分。

如下例,最终多个<li>成分的文本会变为紫灰。

HTML:

XHTML

<ul> <li>一些文本</li> <li>一些文本</li>
<li>这里的文书是橄榄棕的</li> </ul>

1
2
3
4
5
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>这里的文本是橙色的</li>
</ul>

CSS:

XHTML

li:last-child { color: orange; }

1
2
3
li:last-child {
    color: orange;
}

4 first-of-type

同盟属于其父成分的第1个特定类型的子成分的种种成分。

如下例,第一个<li>成分和第3个<span>成分的文本会变为碳灰。

HTML:

XHTML

<ul>     <li>这里的文本是驼灰的</li>
    <li>一些文书
<span>这里的文件是中蓝的</span></li>
    <li>一些文本</li> </ul>

1
2
3
4
5
<ul>
    <li>这里的文本是橙色的</li>
    <li>一些文本 <span>这里的文本是橙色的</span></li>
    <li>一些文本</li>
</ul>

CSS:

CSS

ul :first-of-type {     color: orange; }

1
2
3
ul :first-of-type {
    color: orange;
}

5 :last-of-type

相配成分的末尾三个子成分。

如下例,最终五个<li>成分的文本会变为蟹灰。

HTML:

XHTML

<ul>     <li>一些文本<span>一些文本</span>
<span>这里的文书是暗褐的</span></li>
    <li>一些文本</li>
    <li>这里的文件是铁灰的</li> </ul>

1
2
3
4
5
<ul>
    <li>一些文本<span>一些文本</span> <span>这里的文本是橙色的</span></li>
    <li>一些文本</li>
    <li>这里的文本是橙色的</li>
</ul>

CSS:

CSS

ul :last-of-type {     color: orange; }

1
2
3
ul :last-of-type {
    color: orange;
}

6 :nth-child

:nth-child依照成分的职位相称几个依旧八个成分,它承当三个an+b情势的参数,an+b相配到的因素示比如下:

  • 1n+0,或n,匹配每贰个子成分。
  • 2n+0,或2n,相配岗位为2、4、6、8…的子成分,该表明式与首要字even等价。
  • 2n+1相配地点为1、3、5、7…的子成分、该表明式与首要字odd等价。
  • 3n+4相配岗位为4、7、10、13…的子成分。

如下例,有以下HTML列表:

XHTML

<ol>     <li>Alpha</li>     <li>Beta</li>
    <li>Gamma</li>     <li>Delta</li>
    <li>Epsilon</li>     <li>Zeta</li>
    <li>Eta</li>     <li>Theta</li>
    <li>Iota</li>     <li>Kappa</li> </ol>

1
2
3
4
5
6
7
8
9
10
11
12
<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

CSS:

选料第二个因素,”Beta”会成为洋红:

XHTML

ol :nth-child(2) {     color: orange; }

1
2
3
ol :nth-child(2) {
    color: orange;
}

分选地方序号是2的倍数的要素,”Beta”, “Delta”, “Zeta”, “kappa”会化为土色:

JavaScript

ol :nth-child(2n) {     color: orange; }

1
2
3
ol :nth-child(2n) {
    color: orange;
}

采用地点序号为偶数的成分:

JavaScript

ol :nth-child(even) {     color: orange; }

1
2
3
ol :nth-child(even) {
    color: orange;
}

选料从第6个起初,地点序号是2的倍数的因素,”Zeta”, “Theta”,
“卡帕”会形成铅白:

JavaScript

ol :nth-child(2n+6) {     color: orange; }

1
2
3
ol :nth-child(2n+6) {
    color: orange;
}

7 :nth-last-child

:nth-last-child与:nth-child相似,区别之处在于它是从最终一个子成分开端计数的。

8 :nth-of-type

:nth-of-type与nth-child相似,分裂之处在于它是只十一分特定项指标因素。

如下例,第贰个<p>成分会成为品红。

HTML:

JavaScript

<article>     <h1>作者是标题</h1>
    <p>一些文本</p>     <a href=””><img
src=”images/rwd.png” alt=”Mastering 普拉多WD”></a>
    <p>这里的文本是普鲁士蓝的</p> </article>

1
2
3
4
5
6
<article>
    <h1>我是标题</h1>
    <p>一些文本</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
    <p>这里的文本是橙色的</p>
</article>

CSS:

JavaScript

p:nth-of-type(2) {     color: orange; }

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

9 :nth-last-type

:nth-last-of-type与nth-of-type相似,差别之处在于它是从最终三个子元素开始计数的。

10 :only-child

当成分是其父元素中天下第一三个子成分时,:only-child相称该因素。

HTML:

JavaScript

<ul>     <li>这里的文书是茶褐的</li> </ul>  
<ul>     <li>一些文本</li>
    <li>一些文本</li> </ul>

1
2
3
4
5
6
7
8
<ul>
    <li>这里的文本是橙色的</li>
</ul>
 
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

CSS:

熟悉前端的人都会听过css的伪类与伪元素。JavaScript

ul :only-child {     color: orange; }

1
2
3
ul :only-child {
    color: orange;
}

11 :only-of-type

当成分是其父成分中唯风度翩翩三个一定项指标子成分时,:only-child相称该因素。

如下例,第一个ul元素只有四个li类型的成分,该li元素的文本会变为灰褐。

HTML:

JavaScript

<ul>     <li>这里的文书是蓝色的</li>
    <p>这里不是清水蓝</p> </ul>   <ul>
    <li>一些文本</li>     <li>一些文本</li>
</ul>

1
2
3
4
5
6
7
8
9
<ul>
    <li>这里的文本是橙色的</li>
    <p>这里不是橙色</p>
</ul>
 
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

CSS:

JavaScript

li:only-of-type {     color: orange; }

1
2
3
li:only-of-type {
    color: orange;
}

12 :target

当U库罗德L带有锚名称,指向文档内有些具体的因素时,:target相称该因素。

如下例,url中的target命中id值为target的article成分,article成分的背景会形成深紫红。

URL:

HTML:

JavaScript

<article id=”target”>
    <h1><code>:target</code> pseudo-class</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit!</p> </article>

1
2
3
4
<article id="target">
    <h1><code>:target</code> pseudo-class</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>

CSS:

JavaScript

:target {     background: yellow; }

1
2
3
:target {
    background: yellow;
}

表单相关

1 :checked

:checked相称被选中的input成分,那个input成分富含radio和checkbox。

如下例,当复选框被选中时,与其隔壁的<label>元素的背景会化为暗绛红。

HTML:

JavaScript

<input type=”checkbox”/> <label>我同意</label>

1
2
<input type="checkbox"/>
<label>我同意</label>

CSS:

JavaScript

input:checked + label {     background: yellow; }

1
2
3
input:checked + label {
    background: yellow;
}

2 :default

:default相称默许选中的成分,比方:提交按键总是表单的暗中同意开关。

如下例,唯有付出按键的背景产生了米色。

熟悉前端的人都会听过css的伪类与伪元素。熟悉前端的人都会听过css的伪类与伪元素。HTML:

JavaScript

<form action=”#”>     <button>重置</button>
    <button type=”submit”>提交</button> </form>

1
2
3
4
<form action="#">
    <button>重置</button>
    <button type="submit">提交</button>
</form>

CSS:

JavaScript

:default  {     background: yellow; }

1
2
3
:default  {
    background: yellow;
}

3 :disabled

:disabled相称禁止使用的表单成分。

如下例,被剥夺input输入框的发光度会成为二分之一。

HTML:

JavaScript

<input type=”text” disabled/>

1
<input type="text" disabled/>

CSS:

JavaScript

:disabled {     opacity: .5; }

1
2
3
:disabled {
    opacity: .5;
}

4 :empty

:empty相称未有子成分的因素。假诺成分中含有文本节点、HTML成分或许三个空格,则:empty不可能相称那一个因素。

如下例,:empty能合营的成分会成为深青莲。

第一个成分中有文件节点,所以其背景不会成为洋蓟绿;

第3个因素中有贰个空格,有空格则该因素不为空,所以其背景不会化为莲红;

其三个成分中绝非别的内容,所以其背景会成为花青;

第三个因素中唯有三个讲解,此时该因素是空的,所以其背景会化为暗绛红;

HTML:

CSS:

JavaScript

div {     background: orange;     height: 30px;     width: 200px; }  
div:empty {     background: yellow; }

1
2
3
4
5
6
7
8
9
div {
    background: orange;
    height: 30px;
    width: 200px;
}
 
div:empty {
    background: yellow;
}

5 :enabled

:enabled相称未有安装disabled属性的表单成分。

6 :in-range

:in-range匹配在钦定区域内成分。

如下例,当数字选拔器的数字在5到10是,数字选择器的边框会设为藤黄。

HTML:

JavaScript

<input type=”number” min=”5″ max=”10″>

1
<input type="number" min="5" max="10">

CSS:

JavaScript

input[type=number] {     border: 5px solid orange; }  
input[type=number]:in-range {     border: 5px solid green; }

1
2
3
4
5
6
7
input[type=number] {
    border: 5px solid orange;
}
 
input[type=number]:in-range {
    border: 5px solid green;
}

7 :out-of-range

:out-of-range与:in-range相反,它特别不在钦赐区域内的因素。

8 :indeterminate

熟悉前端的人都会听过css的伪类与伪元素。indeterminate的土耳其(Turkey)语意思是“不鲜明的”。当某组中的单选框或复选框还不曾接纳状态时,:indeterminate相配该组中有着的单选框或复选框。

如下例,当下边包车型客车黄金时代组单选框未有三个远在被入选时,与input相邻的label成分的背景会被设为煤黑。

HTML:

JavaScript

<ul>     <li>         <input type=”radio” name=”list”
id=”option1″>         <label for=”option1″>Option
1</label>     </li>     <li>         <input
type=”radio” name=”list” id=”option2″>         <label
for=”option2″>Option 2</label>     </li>     <li>
        <input type=”radio” name=”list” id=”option3″>
        <label for=”option3″>Option 3</label>
    </li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1</label>
    </li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2</label>
    </li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3</label>
    </li>
</ul>

CSS:

JavaScript

:indeterminate + label {     background: orange; }

1
2
3
:indeterminate + label {
    background: orange;
}

9 :valid

:valid相配原则表明正确的表单元素。

如下例,当email输入框内的值相符email格式时,输入框的边框会被设为茶色。

HTML:

JavaScript

<input type=”email”/>

1
<input type="email"/>

CSS:

10 :invalid

:invalid与:valid相反,相配原则注解错误的表单成分。

11 :optional

:optional相配是负有optional属性的表单元素。当表单成分未有安装为required时,即为optional属性。

如下例,第三个input的背景不会被设为深铁黑,第二个input的背景会被设为土色。

HTML:

JavaScript

熟悉前端的人都会听过css的伪类与伪元素。<input type=”text” required /> <input type=”text” />

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

CSS:

JavaScript

:optional {     background: yellow; }

1
2
3
:optional {
    background: yellow;
}

12 :required

:required与:optional相反匹配设置了required属性的表单成分。

13 :read-only

:read-only相称设置了只读属性的成分,表单成分可以经过设置“readonly”属性来定义成分只读。

如下例,input成分的背景会被设为淡白紫。

HTML:

JavaScript

<input type=”text” value=”I am read only” readonly>

1
<input type="text" value="I am read only" readonly>

CSS:

JavaScript

input:read-only {     background-color: yellow; }

1
2
3
input:read-only {
    background-color: yellow;
}

14 :read-write

:read-write相称处于编辑状态的因素。input,textarea和装置了contenteditable的HTML成分别得到取关节时即地处编辑状态。

如下例,input输入框和富文本框获取关节时,背景形成青莲。

HTML:

JavaScript

<input type=”text” value=”获取关节时背景变黄”/>   <div
class=”editable” contenteditable>
    <h1>点击这里能够编写</h1>
    <p>获取关节时背景变黄</p> </div>

1
2
3
4
5
6
<input type="text" value="获取焦点时背景变黄"/>
 
<div class="editable" contenteditable>
    <h1>点击这里可以编辑</h1>
    <p>获取焦点时背景变黄</p>
</div>

CSS:

JavaScript

:read-write:focus {     background: yellow; }

1
2
3
:read-write:focus {
    background: yellow;
}

15 :scope(处于试验阶段)

:scope相配处于style成效域下的因素。当style未有设置scope属性时,style内的样式会对总体html起效果。

如下例,第一个section中的成分的文本会变为斜体。

HTML:

JavaScript

<article>     <section>
        <h1>很健康的有的文本</h1>
        <p>很正规的片段文本</p>     </section>
    <section>         <style scoped>             :scope {
                font-style: italic;             }         </style>
        <h1>这里的文书是斜体的</h1>
        <p>这里的文本是斜体的</p>     </section>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
    <section>
        <h1>很正常的一些文本</h1>
        <p>很正常的一些文本</p>
    </section>
    <section>
        <style scoped>
            :scope {
                font-style: italic;
            }
        </style>
        <h1>这里的文本是斜体的</h1>
        <p>这里的文本是斜体的</p>
    </section>
</article>

注:方今支撑这几个伪类的浏览器独有火狐。

语言相关

1 :dir(处于试验阶段)

:dir相称钦赐阅读方向的因素,当HTML成分中安装了dir属性时该伪类技能奏效。现时扶植的翻阅方向有二种:ltr(从左往右)和rtl(从右往左)。这段时间,只有火狐浏览器支持:dir伪类,并在火狐浏览器中央银行使时索要加上前缀(
-moz-dir() )。

如下例,p成分中的意大利语(德文是从右往左阅读的)文本会产生茶色。

HTML:

JavaScript

<article dir=”rtl”> <p>التدليك واحد من أقدم العلوم الصحية
التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده
الطفل.</p> </article>

1
2
3
<article dir="rtl">
<p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>

CSS:

JavaScript

/* prefixed */ article :-moz-dir(rtl) {     color: orange; }   /*
unprefixed */ article :dir(rtl) {     color: orange; }

1
2
3
4
5
6
7
8
9
/* prefixed */
article :-moz-dir(rtl) {
    color: orange;
}
 
/* unprefixed */
article :dir(rtl) {
    color: orange;
}

如下例,p成分中的阿尔巴尼亚语文本会形成洋红

HTML:

JavaScript

<article dir=”ltr”>     <p>اIf you already know some HTML
and CSS and understand the principles of responsive web design, then
this book is for you.</p> </article>

1
2
3
<article dir="ltr">
    <p>اIf you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>

CSS:

JavaScript

article :-moz-dir(ltr) {     color: blue; }   /* unprefixed */ article
:dir(ltr) {     color: blue; }

1
2
3
4
5
6
7
8
article :-moz-dir(ltr) {
    color: blue;
}
 
/* unprefixed */
article :dir(ltr) {
    color: blue;
}

2 :lang

:lang相称设置了一定语言的成分,设置一定语言能够透过为了HTML元素设置lang=””属性,设置meta成分的charset=””属性,大概是在http底部上安装语言属性。

事实上,lang=””属性不仅能够在html标签上安装,也能够在其他的因素上设置。

如下例,分别给区别的言语设置不一样的引用样式:

HTML:

JavaScript

<article lang=”en”>     <q>Lorem ipsum dolor sit
amet.</q> </article> <article lang=”fr”>
    <q>Lorem ipsum dolor sit amet.</q> </article>
<article lang=”de”>     <q>Lorem ipsum dolor sit
amet.</q> </article>

1
2
3
4
5
6
7
8
9
<article lang="en">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
    <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
    <q>Lorem ipsum dolor sit amet.</q>
</article>

CSS:

JavaScript

:lang(en) q { quotes: ‘“’ ‘”’; } :lang(fr) q { quotes: ‘«’ ‘»’; }
:lang(de) q { quotes: ‘»’ ‘«’; }

1
2
3
:lang(en) q { quotes: ‘“’ ‘”’; }
:lang(fr) q { quotes: ‘«’ ‘»’; }
:lang(de) q { quotes: ‘»’ ‘«’; }

其他

1 :root

:root相配文档的根成分。日常的html文件的根成分是html成分,而SVG或XML文件的根成分则恐怕是此外因素。

如下例,将html成分的背景设置为木色

JavaScript

:root {     background: orange; }

1
2
3
:root {
    background: orange;
}

2.:fullscreen

:fullscreen相称处于全屏方式下的要素。全屏格局不是经过按F11来开发的全屏格局,而是通过Javascript的Fullscreen
API来张开的,分歧的浏览器有分歧的Fullscreen
API。近年来,:fullscreen需求加上前缀本领采用。

如下例,当处于全屏形式时,h1成分的背景会成为铅色

HTML:

JavaScript

<h1
id=”element”>在全屏格局下,这里的文书的背景会产生暗黑.</h1>
<button>步入全屏形式!</button>

1
2
<h1 id="element">在全屏模式下,这里的文本的背景会变成橙色.</h1>
<button>进入全屏模式!</button>

JAVASCRIPT:

JavaScript

var docelem = document.getElementById(‘element’); var button =
document.querySelector(‘button’); button.onclick = function() {       if
(docelem.requestFullscreen) {         docelem.requestFullscreen();
    }else if (docelem.webkitRequestFullscreen) {
        docelem.webkitRequestFullscreen();     } else
if(docelem.mozRequestFullScreen) {
        docelem.mozRequestFullScreen();     } else
if(docelem.msRequestFullscreen) {         docelem.msRequestFullscreen();
    } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var docelem = document.getElementById(‘element’);
var button = document.querySelector(‘button’);
button.onclick = function() {
 
    if (docelem.requestFullscreen) {
        docelem.requestFullscreen();
    }else if (docelem.webkitRequestFullscreen) {
        docelem.webkitRequestFullscreen();
    } else if(docelem.mozRequestFullScreen) {
        docelem.mozRequestFullScreen();
    } else if(docelem.msRequestFullscreen) {
        docelem.msRequestFullscreen();
    }
}

CSS:

JavaScript

h1:fullscreen {     background: orange; }   h1:-webkit-full-screen {
    background: orange; }   h1:-moz-full-screen {     background:
orange; }   h1:-ms-fullscreen {     background: orange; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1:fullscreen {
    background: orange;
}
 
h1:-webkit-full-screen {
    background: orange;
}
 
h1:-moz-full-screen {
    background: orange;
}
 
h1:-ms-fullscreen {
    background: orange;
}

 

伪元素

1 ::before/:before

:before在被选成分前插入内容。必要使用content属性来钦点要插入的剧情。被插入的剧情实在不在文档树中。

HTML:

JavaScript

<h1>World</h1>

1
<h1>World</h1>

CSS:

JavaScript

h1:before {     content: “Hello “; }

1
2
3
h1:before {
    content: "Hello ";
}

2 ::after/:after

:after在被元素后插入内容,其用法和特色与:before相似。

3 ::first-letter/:first-letter

:first-letter相配成分中文本的首字母。被修饰的首字母不在文书档案树中。

CSS:

JavaScript

h1:first-letter  {     font-size: 5em; }

1
2
3
h1:first-letter  {
    font-size: 5em;
}

4 ::first-line/:first-line

:first-line相配成分中首先行的文本。这么些伪元素只可以用在块成分中,不能够用在内联成分中。

CSS:

JavaScript

p:first-line {     background: orange; }

1
2
3
p:first-line {
    background: orange;
}

5 ::selection

::selection相称客商被客户选中可能处于高亮状态的片段。在火狐浏览器选取时索要增多-moz前缀。该伪成分只扶助双冒号的样式。

CSS:

JavaScript

::-moz-selection {     color: orange;     background: #333; }  
::selection  {     color: orange;     background: #333; }

1
2
3
4
5
6
7
8
9
::-moz-selection {
    color: orange;
    background: #333;
}
 
::selection  {
    color: orange;
    background: #333;
}

6 ::placeholder

::placeholder相称占位符的文书,唯有成分设置了placeholder属性时,该伪成分才具见效。

该伪成分不是CSS的标准,它的得以达成只怕在未来会有所变动,所以要调整选拔时必得事缓则圆。

在有的浏览器中(IE10和Firefox18及其以下版本)会接纳单冒号的款型。

HTML:

JavaScript

<input type=”email” placeholder=”name@domain.com”>

1
<input type="email" placeholder="name@domain.com">

 CSS:

JavaScript

input::-moz-placeholder {     color:#666; }  
input::-webkit-input-placeholder {     color:#666; }   /* IE 10 only
*/ input:-ms-input-placeholder {     color:#666; }   /* Firefox 18
and below */ input:-moz-input-placeholder {     color:#666; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
input::-moz-placeholder {
    color:#666;
}
 
input::-webkit-input-placeholder {
    color:#666;
}
 
/* IE 10 only */
input:-ms-input-placeholder {
    color:#666;
}
 
/* Firefox 18 and below */
input:-moz-input-placeholder {
    color:#666;
}

7 ::backdrop(处于试验阶段)

::backdrop用于转移全屏形式下的背景颜色,全屏方式的默许颜色为浅绿灰。该伪成分只援救双冒号的花样

HTML:

JavaScript

<h1 id=”element”>This heading will have a solid background color
in full-screen mode.</h1> <button onclick=”var el =
document.getElementById(‘element’);
el.webkitRequestFullscreen();”>Trigger full screen!</button>

1
2
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById(‘element’); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

JavaScript

h1:fullscreen::backdrop {     background: orange; }

1
2
3
h1:fullscreen::backdrop {
    background: orange;
}

 

1 赞 12 收藏 1
评论

图片 3

发表评论

电子邮件地址不会被公开。 必填项已用*标注