金沙澳门官网网址总结伪类与伪元素,使用方法

作者: 前端知识  发布:2019-08-08

小结伪类与伪元素

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">小编是第1个</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.伪类与伪元素的实际用法

这一章以含义分析和例子的秘诀列出当先48%的伪类和伪成分的具体用法。上面是基于用途分类的伪类总括图和基于冒号分类的伪成分总括图:

金沙澳门官网网址 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”, “卡帕”会成为漆黑:

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 奥迪Q7WD"></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

当UPAJEROL带有锚名称,指向文书档案内有个别具体的成分时,: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输入框的光滑度会成为百分之五十。

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的背景不会被设为深湖蓝,第3个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选取器(一) 之 使用方法介绍

2015/08/15 · CSS · 选择器

原来的书文出处: Alsiso   

前言

今日整治了CSS一些技巧首要字,不过因为自个儿的文化过于虚亏,认为思量的不充足有欠缺,随后便在sf.gg提议了这几个主题材料《有关CSS大旨技艺首要字都有怎么着?》,也是为着让决定的人联手参预进去,用他们的经验告诉大家CSS中哪一块的知识点是首要,大概说是不可欠缺的,也依旧说是应该打好基础的。

在整治那份CSS手艺首要字的发端,首先想到的是采纳器,它看成最常用的的一个特色,大概每一天都在运用,可是只要让你说出20种CSS选拔器,是否足以搜索枯肠呢? 哎,可能大家被浏览器逼的还停留在CSS2.1那些选用器把?CSS4标准都要出版了,大家还在玩那些?

金沙澳门官网网址 4

带着这几个问号,决定梳理一下在此以前运用的知识点,最终以八种小说的不二秘诀说一说小编对选用器的知道,具体包罗的内容如下:

  • 选用器的底子运用,重假诺CSS3,也会介绍新添CSS4选用器,包蕴各浏览器对选拔器的支撑情形
  • 选择器的使用技艺,使用时常出现的有个别标题,扒一扒解决方案,再说一说效用和优化的有的
  • 接纳器的优先级,理一理相比较感冒的权重主题材料,怎么着更自在的知情它

导图与源码

自身在写那篇小说的时候会梳理一份思维导图,用于越来越直观的查看全部的CSS接纳器,而且也可以有编写制定示例代码,更有利于通晓作品中的示例。

关于思维导图和演示代码,会上传至Github,当然也会趁着岁月的允许,不定义补充和更新
旅舍地址:
心想导图:https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css…
亲自去做代码:

关于everyday是本人天天记下和小结的地点,这里有代码,布局方案,移动端适配方案等等,后续会不停的填补和换代,迎接一同聊代码,玩前端。金沙澳门官网网址 5

主导选拔器

通配符采纳器 *

通配符选取器用来选取具有的成分

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;
}
 

但是使用通配符要谨慎,实际不是因为通配符会带来质量难题,而是滥用通配符会产生“承接失效”或“承接短路”的题目,这种气象会对开采变成一定水平的影响。

要素选拔器 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

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址总结伪类与伪元素,使用方法

关键词: 金沙澳门官网