xml地图|网站地图|网站标签 [设为首页] [加入收藏]
总结伪类与伪元素,谈CSS的设计模式
分类:web前端

总结伪类与伪元素

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

一个否定伪类,用于匹配不符合参数选择器的元素。

如下例,除了第一个<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

匹配属于其父元素的首个特定类型的子元素的每个元素。

如下例,第一个<li>元素和第一个<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”, “Kappa”会变成橙色:

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 RWD"></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:

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

当URL带有锚名称,指向文档内某个具体的元素时,: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匹配默认选中的元素,例如:提交按钮总是表单的默认按钮。

如下例,只有提交按钮的背景变成了黄色。

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输入框的透明度会变成50%。

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能匹配的元素会变为黄色。

第一个元素中有文本节点,所以其背景不会变成黄色;

第二个元素中有一个空格,有空格则该元素不为空,所以其背景不会变成黄色;

第三个元素中没有任何内容,所以其背景会变成黄色;

第四个元素中只有一个注释,此时该元素是空的,所以其背景会变成黄色;

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

indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时,: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

<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

谈CSS的设计模式

2016/08/11 · CSS · 设计模式

原文出处: 灵感的小窝   

在 CSS 中使用功能查询

2016/09/04 · CSS · 功能查询

原文出处: Jen Simmons   译文出处:Erichain_Zain   

在 CSS 里,有一个你可能没有听过的工具,但是它已经出现一段时间了,而且非常强大。也许,它会成为 CSS 中你最喜欢的东西之一。

那么,是什么呢?就是 @support,也就是功能查询。

通过 @support,你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值),然后,根据测试的结果来决定是否要应用某段样式。比如:

CSS

@supports ( display: grid ) { // 如果浏览器支持 Grid,这里面的代码才会执行 }

1
2
3
@supports ( display: grid ) {
    // 如果浏览器支持 Grid,这里面的代码才会执行
}

如果浏览器能够理解 display: grid,那么,大括号里的代码都会被应用,否则,这些样式就会被跳过。

现在,对于功能查询是什么,你也许还有一点疑惑。这并不是通过某种额外的验证来分析浏览器是否已经确切的实现了某个 CSS 属性。如果你需要查看额外的验证,可以查看 Test the Web Forward。

功能查询让浏览器自己就能够表现出是否支持某个 CSS 属性或者 CSS 属性值。然后通过这个结果来判断是否要应用某段 CSS。如果一个浏览器没有正确的(或者完全的)实现一个 CSS 属性,那么,@supports 就没有什么用了。它并不是一个能够让浏览器的 bug 消失的魔杖。

但是,我已经发现 @supports 是那么难以置信的有帮助。比起以前没有这个属性的时候,@supports 能够让我一再的使用新的 CSS 功能。

多年以来,开发者们都在使用 Modernizr 来实现功能查询,但是 Modernizr 需要 JavaScript。虽然这部分 JavaScript 很小,但是,CSS 结构中添加了 Modernizr 的话,在 CSS 被应用之前,就需要下载 JavaScript 然后等待执行完成。比起使用 CSS,加入了 JavaScript 总是会更慢。而且,要是 JavaScript 执行失败了呢?另外,Modernizr 还需要一层额外复杂的、很多项目都无法理解的东西。相比之下,功能查询更快,功能更强大,使用起来更简单。

你也许注意到了,@supports 的写法和媒体查询很类似,我觉得他们可能就是堂兄弟的关系。

CSS

@supports ( display: grid ) { main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

1
2
3
4
5
6
@supports ( display: grid ) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

大多数时候,你其实不需要这样的测试。比如,你可以直接这样写:

CSS

aside { border: 1px solid black; border-radius: 1em; }

1
2
3
4
aside {
    border: 1px solid black;
    border-radius: 1em;
}

如果浏览器能够理解 border-radius,那么,在相应的容器上就会应用圆角样式。如果它不能理解这个属性,那么,就会直接跳过并继续执行下面的语句。容器的边缘也就保持直角了。完全没有必要使用功能查询或者测试,CSS 就是这样运作的。这是属于 CSS 中稳固设计,渐进增强的一个基本的原则。浏览器会直接跳过他们无法解析的语句,不会抛出任何错误。

图片 4

大多数浏览器都会应用 border-radius: 1em;,然后展示出右边的效果。但是,在 IE6,7,8 上你却不能看到圆角,你看到的将是左边的效果。可以看看这个例子:A Rounded Corner Box。

对于这个例子,没有必须要使用功能查询。

那么,什么时候才需要使用 @supports 呢?功能查询是将 CSS 声明绑定在一起的一个工具,以便于这些 CSS 规则能够在某种条件下以一个组合的方式运行。当你需要混合使用 CSS 的新规则和旧规则的时候,并且,仅当 CSS 新功能被支持的时候,就可以使用功能查询了。

译者注:以下例子中的 initial-letter 属性现在在所有现代浏览器中都不受支持,所以,以下例子中的代码可能都是无效的代码。如果下文中有提到此属性在某某浏览器中受支持的话,请忽略。需要了解 initial-letter 详细的说明,可以参考initial-letter | MDN。

来看一个关于使用 initial-letter 的例子。这个属性告诉浏览器要将特指的那个元素变得更大,就像一个段首大字一样。在这里,我们要做的就是让段落的第一个字母的大小为四行文字那么大。同时,我们再对它进行加粗,在它的右边设置一些 margin,还给它设置一个高亮的橘色。OK,很不错了。

CSS

p::first-letter { margin-right: 0.5em; color: #FE742F; font-weight: bold; -webkit-initial-letter: 4; initial-letter: 4; }

1
2
3
4
5
6
7
p::first-letter {
    margin-right: 0.5em;
    color: #FE742F;
    font-weight: bold;
    -webkit-initial-letter: 4;
    initial-letter: 4;
}

图片 5

这是在 Safari 上的效果

让我们看看在其他浏览器上的效果。

图片 6

好吧,简直没法接受。除了使用 initial-letter 来达到我们想要的效果之外,我们并不想要改变字体的 colormargin,和font-weight。所以,我们需要一个方法来测试浏览器是否支持 initial-letter 这个属性,然后在浏览器支持这个属性的时候再应用相关的样式。所以,使用功能查询:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; } }

1
2
3
4
5
6
7
8
9
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}

注意,测试的时候需要进行完全的测试,CSS 属性和值都得写上。一开始我也比较疑惑,为什么非得测试 initial-letter: 4呢?4 这个值很重要吗?如果我写成 17 呢?莫非是需要匹配我即将要应用的 CSS 中的样式吗?

原因是这样的:@supports 在测试的时候,需要提供属性和值,因为有时候测试的是属性,有时候测试的是值。对于 initial-letter ,你输入多少值并不重要。但是,如果是 @suports ( dislay: grid ) 就不一样了,所有浏览器都识别 display,但是,并不是所有浏览器都识别 display: grid

回到我们的例子,当前的 initial-letter 只在 Safari 9 上受支持,并且需要加前缀。所以,我加了前缀,同时,保持着不加前缀的规则,并且,我还写了测试来测试另外的属性。没错,在功能查询中,还可以使用 and, or, not 声明。

下面是新的结果。理解 initial-letter 的浏览器会显示一个巨大加粗高亮的段首大字。其他浏览器的行为就像是这个段首大字不存在一样。当然,如果更多的浏览器支持了这个属性,那么,他们的行为也将会是有一个段首大字。

图片 7

什么是设计模式?

曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上;也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候。

先来看一下比较官方的解释:”设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。”

今天我们来聊聊CSS的设计模式。

设计模式,这个词汇我们常见,几乎所有的编程语言都会有几套,但深入研究的人不多,原因如下:

1、似乎没有太大必要性去强调它,有问题了改一下或者按团队规范来就行;
2、不去使用一些既有的模式也无伤大雅;
3、不少人所接触的业务量级还没有达到需要规划和组织的程度,光写布局,写特效,照顾兼容,就够喝一壶的了,没有意识去思考一些方法论的问题。

当然,这三者都是我经历过的,相信你也是~

我们都会长大,都会慢慢的做更多、更大、更复杂的项目,这个时候,就需要自上而下,全流程的去思考一些问题,后台不说,只讲前端,比如:风格的制定、色调、模块、布局方式、交互方式、逻辑等等,如果再加上团队合作,若再没有一个规划的话,要不了多久,那些看起来没问题的代码,就会暴露出各种问题,模块命名、类的命名、文件的组织、共用模块的提取、代码的复用、可读性、扩展性、维护性。它们看起来只是一些简单的小动作,却需要你看得更远,避免将来出问题需要付出更大的代价,甚至被迫整个项目重构,可谓,功在当代,利在千秋~

既然要对CSS进行设计,那么肯定是它本身存在一些问题或者缺陷,其中,一个最明显的就是,它的任何一个规则,都是全局性的声明,会对引入它的页面当中所有相关元素起作用,不管那是不是你想要的。而独立及可组合的模块是一个可维护系统的关键所在。下面,我们就从多个层面来探讨一下,到底该怎样写CSS,才是更科学的。

组织你的代码

现在,也许你迫不及待的想要使用这个工具来将你的代码分为两个分支,使其变得干净一些。“Hey,浏览器,如果你识别 Viewport 单位,就执行这个,否则,执行另外的”。感觉很不错,有条理。

CSS

@supports ( height: 100vh ) { // 支持 viewport height 的样式 } @supports not ( height: 100vh ) { // 对于旧浏览器的替代样式 } // 我们希望是好的,但这是一段烂代码

1
2
3
4
5
6
7
@supports ( height: 100vh ) {
    // 支持 viewport height 的样式
}
@supports not ( height: 100vh ) {
    // 对于旧浏览器的替代样式
}
// 我们希望是好的,但这是一段烂代码

这段代码并不好,至少当前看来是这样的。发现问题了吗?

问题就是,并不是所有的浏览器都支持功能查询,不理解 @supports 的浏览器会直接跳过两段代码,这也许就太糟糕了。

意思就是,除非浏览器百分之百支持功能查询,否则我们就没法使用了吗?当然不是,我们完全可以使用功能查询,而且应该使用功能查询,只要不像上面那样写代码就行。

那么,怎么做才对呢?其实与使用媒体查询类似,我们在浏览器完全支持媒体查询之前就开始使用了不是吗?事实上,功能查询使用起来比媒体查询更简单,只要脑子放聪明一点就行了。

你想要让你的代码知道浏览器是否支持功能查询或者正在测试的某个功能,我来告诉你怎么做。

当然,在未来,浏览器 100% 支持功能查询的时候,我们可以大量使用 @supports not 来组织我们的代码。

从需求出发


我们刚开始学习写字的时候,是不会去考虑,写出来的某句话好不好,文章结构合适不合适,因为我们是意识不到的。写代码也一样,刚开始,我们只是去定义规则,能用对了属性,语法正确,把页面实现出来了,就好。慢慢地,就会发现,页面也是有结构的,我们按照页面的结构去组织代码,会不会更好?比如,分成头部、导航、侧边栏、banner区、主内容区、底部等。

然而这样貌似还是不够,因为还有一些东西,复用度是很高的,又不好把它归为任何一个固有模块,比如:面包屑、分页、弹窗等,它们不适合被放到某一个固有模块的代码中,就可以单独的分出一段专属的css和js,或许,这就是组件化的由来~


在分了之后,我们的代码看起来已经比之前好很多了,组织清晰,维护性大幅提高,但是,好像还是不够,我们会发现另外一些东西,很细小,但复用度也很高,它们同样不适合被放到模块中去,比如,边框、背景、图标、字体、边距、布局方式等等。如果我们在每个需要它们的地方,都定义一次,它们会被重复很多次,显然,这背离好的实践,会造成代码冗余和维护困难。所以,我们需要“拆”。拆过之后会怎样?我们想在哪里用可以直接加,需要改的时候统一改。


经过了“分”、“拆”,我们的代码结构已经十分清晰,各个内容模块,功能模块,UI模块都乖巧的等待召唤,那么还差什么?是的,还差有序的组织,分类清晰之后,还需要排列有序,从不同纬度去考量,我们总能精益求精。举个栗子,我们可能会看到像这样:

@import “mod_reset.css”;
@import “ico_sprite.css”;
@import “mod_btns.css”;
@import “header.css”;
@import “mod_tab.css”;
@import “footer.css”;

我们将不同的部分按照一定的顺序去摆放,能让我们的代码看起来更加有序,易于维护,同时,有利于进行继承或层叠覆盖。不要小看这一步,看似可有可无,实际要求比较高的统筹规划能力,可以减少冗余代码和快速定位问题位置等。

除此之外,我们依然可以有其他的方法来帮助我们进行区分代码范围,比如:

1、在文件头部建立一个简要的目录

图片 8

2、使用区块注释

图片 9

在注释中,应该尽量详细的写清楚该段代码的目的,状态切换,调整原因,交互逻辑等等,这样不仅利于自己的维护,更加利于别人接手维护你的代码。

功能查询的支持情况

所以,@supports 现在支持度什么样了呢?

自从 2013 年中,@supports 就能够在 Firefox,Chrome 和 Opera 中使用了。在 Edge 的各个版本中也受支持。Safari 在 2015 年秋季才实现这个功能。具体的支持情况,请看下面这张图:

图片 10

你可能会觉得 IE 不支持此功能会是一个大问题,但是,其实不是这样的。待会儿就会告诉你原因。我相信,最大的一个障碍是 Safari 8,我们需要留意在这个浏览器上发生的事情。

让我们来看另外一个例子。假设我们有些布局代码,为了正常运行,需要使用 object-fit: cover;。对于不支持这个属性的浏览器,我们想要使用不同的样式。

图片 11

所以,我们可以这样写:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; } } div { width: 300px; background: yellow; } @supports (object-fit: cover) { img { object-fit: cover; } div { width: auto; background: green; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}
 
div {
    width: 300px;
    background: yellow;
}
@supports (object-fit: cover) {
    img {
        object-fit: cover;
    }
    div {
        width: auto;
        background: green;
    }
}

会发生什么呢?@supports 有支持或者不支持的情况,object-fit 也有支持或者不支持的情况,所以,就有了四种可能性:

功能查询支持情况 属性(或者值)支持情况 会发生什么 是否我们想要的
支持 不支持 CSS 将会被应用
支持 不支持 CSS 不会被应用
不支持 支持 CSS 不会被应用
不支持 不支持 CSS 不会被应用

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:总结伪类与伪元素,谈CSS的设计模式

上一篇:翻角效果,移动端样式小技巧 下一篇:理解CSS属性值语法,AngularJs前端架构
猜你喜欢
热门排行
精彩图文