澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

总结伪类与伪元素,使用方法介绍

2019-09-11 作者:澳门新萄京赌场网址   |   浏览(110)

总结伪类与伪元素

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选择器(一) 之 使用方法介绍

2015/08/15 · CSS · 选择器

原文出处: Alsiso   

1、给导航加分割线,左右

1、给导航加分割线,左右

关于 CSS 选择器,CSS选择器

今天刚开通博客,先自我介绍一下,Mike,大学没填志愿就跑到某培训机构学了两年,2012年出道,工作历程可谓坎坷,就不多说了,反正最终选择从
事web前端的工作。
结合出道至今的工作以及学习,写下今天这篇博文,与大家分享,并希望各位指点一二,感激不尽。
当年语文没学好,文采不好,我就直奔主题了。(主要写一下属性以及伪类吧)
1、元素选择器。
这个东西最简单,也最常见,就是以元素为选择器来添加样式
例:
html {color:black;} //设置html元素颜色black
div {color:gray;} //设置div元素颜色gray
h1 {color:silver;} //设置h1元素颜色gray

就是说,你想让某个元素使用某个样式,就直接写 元素{样式} 即可。

2、选择器分组
分组就是把某几个元素写一起设置相同的样式即可
例:
div,p,strong{color:#FF0} //设置div,p,strong它们的颜色色值为 FF0
.part_one div a,.part_two a,.part_three p{color:#FFF} //设置.part_one div a 和 .part_two a 和 .part_three p 的文本颜色值为 FFF

3、类选择器
即元素中带有属性class在设置样式的时候可以使用 .classname{style} 这种方式来设置样式
例:
<div class="mydiv">This is content.</div>
.mydiv{color:#F00;}
这样就设置了class为mydiv的元素的文本颜色值为 F00

4、ID 选择器
即元素中带有属性id在设置样式的时候可以使用 #idname{style} 这种方式来设置样式
例:
<div id="mydiv1">This is content.</div>
#mydiv1{color:#F00;}
这样就设置了id为mydiv的元素的文本颜色值为 F00
(其实跟类选择器没有什么大的区别,只是权重的区别,同一个元素id选择器的样式会覆盖类选择器的样式,这里就不做详细讲解了,)

5、后代选择器
这个也是很常见的一个选择器,只是可能名称听起来有点不太熟悉
举个例子大家就明白了
例:
div ul{color:#FF0}
这就是一个简单的后代选择器,就是谁下面的谁,就是这样了

6、子元素选择器
这个选择器,在最开始的时候,莫名其妙的就被我忽略了,知道后来,突然间看到了一个案例,才又想起来

  • -、
    还是用例子说话比较好
    例:
    div > h1{color:red;}
    <div><h1>my h1</h1></div> //这个有效
    <div><div><h1>li h1</h1></div></div> //这个有效
    <div><ul><li><h1>li h1</h1></li></ul></div>

这个例子中只会选择到第一行和第二行div中的h1而不会选择到第三行里面的h1,
因为这个子元素选择器只会选择它直属的子元素而不会选择它的孙子级别,或者孙子级别以下的元素,
而第三行里面的h1就属于li的直属子元素,而非div的直属子元素了,所以就不起效

7、相邻兄弟选择器
选择紧接在另一个元素后的元素,且二者有相同的父元素
h1 p {color:red;}
<h1>header</h1>
<p>text</p>
<p>text</p>
这里会选择到h1下面的第一个p,而选择不到第二个p,因为第二个p并不是紧接在h1后面

li li {font-weight:bold;}
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
这个样式,只能应用到ul和ol里面的第二、三个li元素,因为第一个li它的上面已经没有紧接着的li了,所以就不会有效果

8、伪类
听起来很高大上,但是如果说起来a:link,a:visited,a:hover,a:active 这些都是伪类的一种的话,是不是就比较亲民了,其实这个a的叫伪锚类(这名
字就更高大上了。。)
:focus
这个比较实用,可以用在input text 里面设置背景
input:focus{background-color:yellow;}
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="submit" value="Submit" />
这样的话,按钮点下去的时候也会背景变黄,这就有点不爽了,可以随便扩展一下
如:
input[type="text"]:focus{background-color:yellow;}
这样submit按钮就点下去的时候不会变黄了

:first-child
必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。
p:first-child {font-weight: bold;}
li:first-child {font-weight: bold;}

<p>test words1</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ul>
<p>test words ul p</p>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>test words2</p>
<p>test words3<p>test words4</p></p>
first-child伪类,刚开始理解的时候有点无奈,总是以为是谁下面的第一个元素,搞半天,才弄明白,原来是第一个这个元素
就想上面的html一样
css会选择到的是 第一个p 即:<p>test words1</p>,和第二个ul中的p <p>test words ul p</p>,剩余的p都不会被选择
同样会选择到每个ul中的第一个li,因为他们拥有不同的父级
注:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。

:lang
说实话,这个,我还真搞不明白什么时候用它比较好 - -、 希望哪个看到的大大同样能为大家解答一下,tks~!
:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型
q:lang(no){quotes: "~" "~" }
<p>text <q lang="no">what?</q></p>

9、伪元素(这块我使用到的比较少,查了一下用法,给大家上写实例吧)
:first-letter 向文本的第一个字母添加特殊样式(只能用于块级元素)
p:first-letter{color:#ff0000;font-size:xx-large;}
这样就设置了p中的首字母颜色 F00 字体大小为 xx-large

伪元素可以与 CSS 类配合使用:
p.article:first-letter{color: #FF0000;}
<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

下面的属性可应用于 "first-letter" 伪元素:
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

:first-line 向文本的首行添加特殊样式
这个我自己感觉没什么用,挺少见有只给首行加不同样式的
p:first-line{color:#0000ff;}

:before 在元素之前添加内容
这种我经常用在清楚浮动上面,效果挺不错
div:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}下面是网上的案例:
h1:before{content:url(images/logo.gif)}
在h1之前添加一个图片

:after 在元素之后添加内容
h1:after {content:url(images/logo.gif)}
在h1之后添加一个图片

10、属性选择器
对于 IE8 及更早版本的浏览器中的 [attribute=value],必须声明 <!DOCTYPE>。
下面列举出来属性选择器的用法
[attribute] 用于选取带有指定属性的元素。
例:
[title]{color:F00;}
<h1 title="hello css">hello h1~!</h1>
<h2>hello h2~!</h2>
这样就可以设置元素带有title属性的文本颜色为 F00 ,即h1的颜色将会被设置为 F00 ,但h2的将不被控制
*[title]{color:F00;} //设置带有title属性的元素文本颜色为 F00
a[title]{color:F00;} //设置带有title属性的a元素颜色为 F00
.mydiv ul li a[title]{color:F00;} //设置类名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00
#mydiv ul li a[title]{color:F00;} //设置id名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00

[attribute=value] 用于选取带有指定属性和值的元素。
这个功能在某些特定情况下是很实用的,比如高亮,就不用使用jq或者后台程序来判断,只用css来就可以实现
例:
a[target="_blank"]{color:yellow;} //这样就设置了所有target属性值为_blank的a元素的颜色为yellow
h1[title="mytitle"]{color:yellow;} //这样就设置了所有title属性值为mytitle的h1元素的颜色为yellow
上面两个例子看过之后,是否就会想出在某些特定情况下的高亮实现方法了呢?

[attribute~=value] 用于选取属性值中包含指定词汇的元素。
这种用法,第一次见到的时候还是在wordpress里面,这里就以一个简单的例子来看一下
img[title~="first"]{border:3px solid yellow} //这样就设置了下方图片title 属性中包含单词first的图片会带有黄色边框

<img src="a.jpg" title="this is first img" />
<img src="b.jpg" title="this is second img" />

[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[class|=my]{background:yellow;}
<h1 class="my-header">this is header</h1>
<p class="my-text">this is text</p>
<p class="my-content">this is content</p>
<p class="my">this is content</p>
<p class="my content">this is content</p>
<p class="mycontent">this is content</p>
<p class="my_content">this is content</p>
只有前四个才会应用样式,后三个都不行。但是我不明白为什么第五个就也不行,希望有能为为大家解答的大大出现

[attribute^=value] 匹配属性值以指定值开头的每个元素。
这个用法也是在wordpress里面常见的,控制性很强大
div[class^="my"]{background:#FF0;}
<div class="my">this is first</div> //这个会有效果
<div class="my_first">this is first</div> //这个会有效果
<div class="my-first">this is first</div> //这个会有效果
<div class="second">this is second</div>
<div class="third_my">this is third</div>

[attribute$=value] 匹配属性值以指定值结尾的每个元素。
这个功能就跟上面的差不多了,上一个是开头,这个是结尾
div[class$="my"]{background:#ffff00;}
<div class="my_first">this is first</div>
<div class="second">this is second</div>
<div class="third_my">this is third</div> //这个会有效果
<div class="third-my">this is third</div> //这个会有效果
<div class="my">this is third</div> //这个会有效果

[attribute*=value] 匹配属性值中包含指定值的每个元素。
上面两个,一个开头,一个结尾,这个就是包含了
div[class*="my"]{background:#ffff00;}
div[class$="my"]{background:#ffff00;}
<div class="my_first">this is first</div> //这个会有效果
<div class="second">this is second</div>
<div class="secmyond">this is second</div> //这个会有效果
<div class="sec-my-ond">this is second</div> //这个会有效果
<div class="third_my">this is third</div> //这个会有效果
<div class="third-my">this is third</div> //这个会有效果
<div class="my">this is third</div> //这个会有效果

这些东西,不知道在博客园里面会有多少人能看到,我就当是记录自己的一些东西吧。
这篇博文并不深入,而且我自己的见解并不多,还有很多要学习的,只是在我工作学习中看到、使用到的一些总结,如果有错误的地方,还希望大家能
为我指点出来,互相学习感激不尽。

最后,发现写这个东西还挺累,真不知道那些几百几千篇博文的大大们,咋写的,膜拜一下他们,哈哈!

 

补充:

element1~element2选择器

该选择器可以选择在同一父元素中的element1元素之后的所有element2元素(element2不必须跟element1同级)

例:

p~ul{color:red} 

这样将会设置p后面的3个ul里面的文本颜色为红色

<p>p1</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<h2>h2</h2>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</ul>

前言

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

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

澳门新萄京官方网站 4

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

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

 .nav li::before,.nav li::after{

 .nav li::before,.nav li::after{

html css 属性选择器

<div style="position: fixed; display: block; z-index: 999999; left: 5px; top: 30px;">
<iframe>
</iframe>
</div>

这个应该能选出来

div[style="position: fixed; display: block; z-index: 999999; left: 5px; top: 30px;"]  

导图与源码

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

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

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

            content:"";

            content:"";

网页设计中对于新建CSS的选择器类型问题

仅对该文档--指的是css代码直接出现在网页的内部。

新建样式表文件--指的是在网页外部建立一个css文件,网页引用这个文件。

你用的应该是dreamweaver 8.0以下版,类、标签和高级其实在面板上都有一个简短的说明。

高级-----举一个例子,你可以制作导航栏文字,鼠标移动到文字,文字变色或变换背景。
标签-----也就是让你自己定制html元素,比如h1的字体,你可以随意设置大小、颜色等等。
类----你可以把网页里相同的元素定义为一个类,应用这个样式这些元素就会统一了。  

CSS 选择器,CSS选择器 今天刚开通博客,先自我介绍一下,Mike,大学没填志愿就跑到某培训机构学了两年,2012年出道,工作历程可谓...

基本选择器

            position:absolute;

            position:absolute;

通配符选择器 *

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

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

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

            top:14px;

            top:14px;

元素选择器 E

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

CSS

ul{ list-style:none; }

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

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

            height:25px;

            height:25px;

类选择器.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选择器的支持会下面的内容统一整理列出表格。

            width:1px; 

            width:1px; 

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的元素都会被选择,进行清楚内边距。

        .nav li::before{

        .nav li::before{

子元素选择器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元素

            left:0;

            left:0;

相邻兄弟元素选择器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

            background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

通用兄弟选择器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

            background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

属性选择器

选择器 描述 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

            background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

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

            background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

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"表单元素。

            background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

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开头

        .nav li::after{

        .nav li::after{

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结尾

            right:0;

            right:0;

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

            background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

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-"的开头

            background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

伪类选择器

            background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

动态伪类

一般动态伪类是在用户操作体验时触发的,最常见的就是超链接,它拥有访问前,鼠标悬停,被点击,已访问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;
}

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

            background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

表单状态伪类

我们把以下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的文本会变成红色

            background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

结构伪类

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

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

         .nav li:first-child::before{ background:none;}

         .nav li:first-child::before{ background:none;}

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加上添加后的内容并设置其颜色

         .nav li:last-child::after{ background:none;}

         .nav li:last-child::after{ background:none;}

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

 

 

第四代选择器

2、

2、

发展历史

自从哈坤·利提出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 收藏 评论

澳门新萄京官方网站 6

html代码:

html代码:

 

 

<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="#" class="icon">我类名是icon</a>

<a href="#" class="icon">我类名是icon</a>

<a href="#" title="我的title是more">我的title是more</a>

<a href="#" title="我的title是more">我的title是more</a>

 

 

css代码  

css代码  

 

 

a[class^=icon]{

a[class^=icon]{

  background: green;

  background: green;

  color:#fff;//定义以icon开头的任何字符串

  color:#fff;//定义以icon开头的任何字符串

}

}

a[href$=pdf]{

a[href$=pdf]{

  background: orange;

  background: orange;

  color: #fff;定义href以pdf结尾任何字符串

  color: #fff;定义href以pdf结尾任何字符串

}

}

a[title*=more]{

a[title*=more]{

  background: blue;

  background: blue;

  color: #fff;定义有title的的任何字符串

  color: #fff;定义有title的的任何字符串

}

}

例如:<style>

例如:<style>

    a[class^=column]{

    a[class^=column]{

        background:#fc0001;

        background:#fc0001;

        }

        }

    a[href$=doc]{

    a[href$=doc]{

        background:#007d02;

        background:#007d02;

    }

    }

    a[title*=box]{

    a[title*=box]{

        background:#0000fe;

        background:#0000fe;

    }

    }

</style>

</style>

<a href="##" class="columnNews">我的背景想变成红色</a>

<a href="##" class="columnNews">我的背景想变成红色</a>

<a href="##" class="columnVideo">我的背景想变成红色</a>

<a href="##" class="columnVideo">我的背景想变成红色</a>

<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>

<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>

<a href="1.doc">我的背景想变成绿色</a>

<a href="1.doc">我的背景想变成绿色</a>

<a href="2.doc">我的背景想变成绿色</a><br/>

<a href="2.doc">我的背景想变成绿色</a><br/>

<a href="##" title="this is a box">我的背景想变成蓝色</a>

<a href="##" title="this is a box">我的背景想变成蓝色</a>

<a href="##" title="box1">我的背景想变成蓝色</a>

<a href="##" title="box1">我的背景想变成蓝色</a>

<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

 

 

 

 

3、

3、

结构性伪类选择器root

结构性伪类选择器root

:root选择器,从字面上我们就可以很清楚的理解是根选择器,

:root选择器,从字面上我们就可以很清楚的理解是根选择器,

他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>

他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>

(“:root”选择器等同于<html>元素,简单点说:

(“:root”选择器等同于<html>元素,简单点说:

:root{background:orange}

:root{background:orange}

 

 

html {background:orange;}

html {background:orange;}

 

 

得到的效果等同。

得到的效果等同。

 

 

建议使用:root方法。

建议使用:root方法。

 

 

另外在IE9以下还可以借助“:root”实现hack功能。)

另外在IE9以下还可以借助“:root”实现hack功能。)

 

 

 

 

4、

4、

结构性伪类选择器—not

结构性伪类选择器—not

:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:form {

:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:form {

input:not([type="submit"]){

input:not([type="submit"]){

  border:1px solid red;

  border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

}//意思是除了type=submit意外的input边框为红色

 

 

 

 

 

 

5、结构性伪类选择器—empty

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码:

HTML代码:

<p>我是一个段落</p>

<p>我是一个段落</p>

<p> </p>

<p> </p>

<p></p>​

<p></p>​

CSS代码:

CSS代码:

p{

p{

 background: orange;

 background: orange;

 min-height: 30px;

 min-height: 30px;

}

}

p:empty {

p:empty {

  display: none;

  display: none;

}​

}​

6、结构性伪类选择器—target

6、结构性伪类选择器—target

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

例:

例:

<h2><a href="#brand">Brand</a></h2>

<h2><a href="#brand">Brand</a></h2>

<div class="menuSection" id="brand">

<div class="menuSection" id="brand">

  content for Brand

  content for Brand

</div>

</div>

<h2><a href="#jake">Brand</a></h2>

<h2><a href="#jake">Brand</a></h2>

<div class="menuSection" id="jake">

<div class="menuSection" id="jake">

 content for jake

 content for jake

</div>

</div>

<h2><a href="#aron">Brand</a></h2>

<h2><a href="#aron">Brand</a></h2>

<div class="menuSection" id="aron">

<div class="menuSection" id="aron">

    content for aron

    content for aron

</div>

</div>

 

 

css代码:

css代码:

#brand:target {

#brand:target {

  background: orange;

  background: orange;

  color: #fff;

  color: #fff;

}

}

#jake:target {

#jake:target {

  background: blue;

  background: blue;

  color: #fff;

  color: #fff;

}

}

#aron:target{

#aron:target{

  background: red;

  background: red;

  color: #fff;

  color: #fff;

}

}

 

 

 

 

7、结构性伪类选择器—first-child

7、结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

HTML代码:

HTML代码:

<ol>

<ol>

  <li><a href="##">Link1</a></li>

  <li><a href="##">Link1</a></li>

  <li><a href="##">Link2</a></li>

  <li><a href="##">Link2</a></li>

  <li><a href="##">link3</a></li>

  <li><a href="##">link3</a></li>

</ol>

</ol>

CSS代码:

CSS代码:

 

 

 

 

ol > li:first-child{

ol > li:first-child{

  color: red;

  color: red;

}//讲html的序列号第一个变成红色,如果是无序列表则是前端的序列图标变色

}//讲html的序列号第一个变成红色,如果是无序列表则是前端的序列图标变色

First-child与last-child刚好相反

First-child与last-child刚好相反

 

 

8、结构性伪类选择器—nth-child(n)

8、结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n 1、-n 5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n 1、-n 5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

HTML代码:

HTML代码:

<ol>

<ol>

  <li>item1</li>

  <li>item1</li>

  <li>item2</li>

  <li>item2</li>

  <li>item3</li>

  <li>item3</li>

  <li>item4</li>

  <li>item4</li>

</ol>​

</ol>​

CSS代码:

CSS代码:

ol > li:nth-child(2n){

ol > li:nth-child(2n){

  background: orange;

  background: orange;

}//通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

}//通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

 

 

9、结构性伪类选择器—nth-last-child(n)

9、结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素

ol > li:nth-last-child(5){

ol > li:nth-last-child(5){

  background: orange;

  background: orange;

}//选择列表中倒数第五个列表项,将其背景设置为橙色。

}//选择列表中倒数第五个列表项,将其背景设置为橙色。

10、first-of-type选择器

10、first-of-type选择器

“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。

通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。

.wrapper > p:first-of-type {

.wrapper > p:first-of-type {

  background: orange;

  background: orange;

//last-of-type选择器

//last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。

 

 

 

 

 

 

11、nth-of-type(n)选择器

11、nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。

例:.wrapper > p:nth-of-type(2n){

例:.wrapper > p:nth-of-type(2n){

  background: orange;

  background: orange;

}通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

}通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

18、nth-last-of-type(n)选择器

18、nth-last-of-type(n)选择器

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

.wrapper > p:nth-last-of-type(3){

  background: orange;

  background: orange;

}

}

 

 

12、only-child选择器

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

“:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

示例演示

示例演示

通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。

通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。

HTML代码:

HTML代码:

<div class="post">

<div class="post">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

</div>

</div>

<div class="post">

<div class="post">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

</div>

</div>

CSS代码:

CSS代码:

.post p {

.post p {

  background: green;

  background: green;

  color: #fff;

  color: #fff;

  padding: 10px;

  padding: 10px;

}

}

.post p:only-child {

.post p:only-child {

  background: orange;

  background: orange;

}

}

 

 

 

 

13、only-of-type选择器

13、only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

示例演示

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码:

HTML代码:

<div class="wrapper">

<div class="wrapper">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <div>我是一个Div元素</div>

</div>

</div>

<div class="wrapper">

<div class="wrapper">

  <div>我是一个Div</div>

  <div>我是一个Div</div>

  <ul>

  <ul>

    <li>我是一个列表项</li>

    <li>我是一个列表项</li>

  </ul>

  </ul>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

</div>

</div>

CSS代码:

CSS代码:

.wrapper > div:only-of-type {

.wrapper > div:only-of-type {

  background: orange;

  background: orange;

}

}

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:总结伪类与伪元素,使用方法介绍

关键词: