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

澳门新萄京官方网站css选拔器补充,呼风唤雨的

2019-10-12 作者:澳门新萄京赌场网址   |   浏览(162)

玩转CSS选择器(一) 之 使用方法介绍

2015/08/15 · CSS · 选择器

原文出处: Alsiso   

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

神通广大的CSS3选择器

2016/02/04 · CSS · 2 评论 · 选择器

原文出处: 大额_skylar(@大额大额哼歌等日落)   

每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器,就可以简化我们的代码。

我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度,如果有需要,可以在这里查看它的浏览器支持情况:「caniuse.com」。

 

前言

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

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

澳门新萄京官方网站 1

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

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

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

一、基本选择器

 1. 通配选择器 「*」

CSS

*{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0 .demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色

1
2
*{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0
.demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色

 

2.元素选择器 「Element」

CSS

body{background:#ccc} //选择body元素 ul{background:#fff} //选择列表ul元素

1
2
body{background:#ccc} //选择body元素
ul{background:#fff} //选择列表ul元素

 

3.ID选择器 「#id」

CSS

html: <div id="demo"></div> css: #demo{do something}

1
2
3
4
html:
<div id="demo"></div>
css:
#demo{do something}

 

4.类选择器 「.class」

CSS

html: <ul class="demo"></ul> css: .demo{do something} ul.demo{do something} //这样只会选择有demo类名的ul元素

1
2
3
4
5
html:
  <ul class="demo"></ul>
  css:
  .demo{do something}
  ul.demo{do something} //这样只会选择有demo类名的ul元素

需要注意的是:多个页面元素可以有相同的类名,但是元素的id在页面中必须是唯一的。

 

5.群组选择器 「selector1,…,selectorN」

CSS

html: <div class="section-1"></div> <div class="section-2"></div> <div class="section-3"></div> ccss: .section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式

1
2
3
4
5
6
html:
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
ccss:
.section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式

 

前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的。

导图与源码

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

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

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

            content:"";

二、层次选择器

6.后代选择器「E F」

选择匹配E的元素内的所有匹配F的元素。

XHTML

html: <div class="parent"> <div class="child"></div> <div class="child"> <div class="c-child"> <div class="c-c-child"></div> </div> </div> </div> css: .parent div{do something} //会选择parent里面的所有div,不管是子元素.child还是孙元素.c-child和.c-c-child

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<div class="parent">
        <div class="child"></div>
        <div class="child">
             <div class="c-child">
                  <div class="c-c-child"></div>
            </div>
        </div>    
</div>
 
css:
 
.parent div{do something} //会选择parent里面的所有div,不管是子元素.child还是孙元素.c-child和.c-c-child

 

7.子选择器「E > F」

选择配配E的元素的匹配F的直系子元素。

XHTML

html: <div class="parent"> <div class="child"></div> <div class="child"> <div class="c-child"> <div class="c-c-child"></div> </div> </div> </div> css: .parent > div{do something} //只会选择.parent元素的直系子元素,也就是只会选择到 .child元素

1
2
3
4
5
6
7
8
9
10
11
12
html:
  <div class="parent">
          <div class="child"></div>
          <div class="child">
               <div class="c-child">
                    <div class="c-c-child"></div>
              </div>
          </div>    
  </div>
 
css:
.parent > div{do something} //只会选择.parent元素的直系子元素,也就是只会选择到 .child元素

 

8.相邻兄弟元素选择器「E F」

E和F是同辈元素,具有相同的父元素,并且F元素紧邻在E元素的后面,此时可以使用相邻兄弟选择器。

XHTML

html: <div> <div class="demo">1</div> <div>2</div> <div>3</div> </div> css: .demo div {do something}//会选中内容为2的div

1
2
3
4
5
6
7
8
9
10
html:
<div>
    <div class="demo">1</div>
    <div>2</div>
    <div>3</div>
</div>
 
css:
 
.demo div {do something}//会选中内容为2的div

 

9.通用兄弟选择器「E ~ F」

E和F是同辈元素,具有相同的父元素,并且F元素在E元素之后,E ~ F将选中E元素后面的所有F元素。

XHTML

html: <div> <div class="demo">1</div> <div>2</div> <div>3</div> <div>4</div> </div> css: .demo ~ div {do something}//会选中内容为2,3,4的div

1
2
3
4
5
6
7
8
9
10
11
html:
  <div>
      <div class="demo">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
 
  css:
 
.demo ~ div {do something}//会选中内容为2,3,4的div

 

 

基本选择器

            position:absolute;

三、伪类选择器

10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」

E:link{do something} //选择定义了超链接但链接还未被访问过的元素 E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素 E:active{do something} //选择匹配的E元素,且元素被激活,常用在锚点和按钮上 E:hover{do something} //选择鼠标停留的匹配的E元素 E:focus{do something} //选择匹配的E元素,且元素获得焦点

1
2
3
4
5
E:link{do something} //选择定义了超链接但链接还未被访问过的元素
E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素
E:active{do something} //选择匹配的E元素,且元素被激活,常用在锚点和按钮上
E:hover{do something} //选择鼠标停留的匹配的E元素
E:focus{do something} //选择匹配的E元素,且元素获得焦点

 

11.目标伪类选择器「E:target」

选择匹配E的所有元素,且匹配元素被相关URL指向。

通俗点说,页面的url如果带有#something这样的字样(https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1)那么:target就是用来匹配页面中id为#something(section-1)的元素的。

这里有一个demo,利用:target实现纯css的手风琴效果:[查看源码][运行demo]

 

12.语言伪类选择器「E:lang(language)」

用来选择指定了lang属性的元素,其值为language。

CSS

html: <html lang="en-US"></html> css: :lang(en-US) {do something}

1
2
3
4
5
html:
<html lang="en-US"></html>
 
css:
:lang(en-US) {do something}

有时候网页切换不同的语言版本的时候,可以通过这个选择器做一些特殊的处理。

 

13.状态伪类选择器「E:checked,E:enabled,E:disabled」

E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮 E:enabled{do something} //匹配所有起用的表单元素 E:disabled{do something} //匹配所有禁用的表单元素

1
2
3
E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮
E:enabled{do something} //匹配所有起用的表单元素
E:disabled{do something} //匹配所有禁用的表单元素

 

14.结构伪类选择器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

 

14.1 [E:first-child]

用来选取特定元素的第一个子元素。

XHTML

html: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> css: ul > li:first-child {do something} //用来选取ul中的第一个li元素

1
2
3
4
5
6
7
8
9
10
11
html:
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
css:
 
ul > li:first-child {do something} //用来选取ul中的第一个li元素

 

14.2 [E:last-child]

用来选取特定元素的最后一个子元素。

XHTML

html: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> css: ul > li:last-child {do something} //用来选取ul中的最后一个li元素

1
2
3
4
5
6
7
8
9
10
html:
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  css:
  ul > li:last-child {do something} //用来选取ul中的最后一个li元素

 

14.3 [E:nth-child()],[E:nth-last-child()]

用来选取某个父元素的一个或多个特定的子元素,其中的n可以是数值(从1开始),也可以是包含n的表达式,也可以是odd(奇数),even(偶数)。

E:nth-last-child()选择器的使用方法于E:nth-child()是相同的,不同的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起。

XHTML

html: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> css: ul > li:nth-child(2n 1) {do something} //用来选取ul中的第2n 1(奇数)个li元素

1
2
3
4
5
6
7
8
9
10
html:
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  css:
   ul > li:nth-child(2n 1) {do something} //用来选取ul中的第2n 1(奇数)个li元素

 

14.4  [E:root]

用来匹配元素E所在的文档中的根元素,在html文档中根元素就始终是html。

 

14.5 [E:nth-of-type(),E:nth-last-of-type()]

E:nth-of-type()只计算父元素中指定的某种类型的子元素,当某个元素的子元素类型不只是一种时,使用nth-of-type来选择会比较有用。

E:nth-last-of-type()的用法同E:nth-of-type()相同,不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。

li:nth-of-type(3)的话就会标识它只会选择第三个li元素,别的元素会忽略掉,如:

XHTML

html: <ul> <li>1</li> <li>2</li> <div>3</div> <div>4</div> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> ul > li:nth-of-type(3){do something} //会选中内容为5的li元素

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul > li:nth-of-type(3){do something} //会选中内容为5的li元素

 

但是使用nth-child就会是这样:

XHTML

html: <ul> <li>1</li> <li>2</li> <div>3</div> <div>4</div> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> ul > li:nth-child(3){do something} //会选中内容为3的div元素

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul > li:nth-child(3){do something} //会选中内容为3的div元素

 

14.6 [E:first-of-type,E:last-of-type]

:first-of-type和:last-of-type这两个选择器类似于:first-child和:last-child,不同的就是指定了元素的类型。

XHTML

html: <ul> <div>1</div> <div>2</div> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> CSS: ul > li:first-of-type{do something} //会选中内容为3的li元素

1
2
3
4
5
6
7
8
9
10
11
html:
  <ul>
      <div>1</div>
      <div>2</div>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
</ul>
CSS:
ul > li:first-of-type{do something} //会选中内容为3的li元素

 

14.7 [E:only-child]

匹配的元素E是其父元素的唯一子元素,也就是说匹配元素的父元素只有一个子元素。

XHTML

html: <div class="demo"> <p>1-1</p> <p>1-2</p> </div> <div class="demo"> <p>2-1</p> </div> css: .demo > p:only-child{do something}//会选取到内容为2-1的p元素

1
2
3
4
5
6
7
8
9
10
11
html:
<div class="demo">
   <p>1-1</p>
   <p>1-2</p>
</div>
<div class="demo">
   <p>2-1</p>
</div>
 
css:
.demo > p:only-child{do something}//会选取到内容为2-1的p元素

 

14.8 [E:only-of-type]

:only-of-type用来选择一个元素,他的类型在他父元素的所有子元素中是唯一的。也就是说,一个父元素有很多子元素,而其中只有一个子元素的类型是唯一的,那么就可以使用:only-of-type来选取这个元素。

这个属性说起来有点绕口,写了个简陋的demo说明意思:[查看源码][运行demo]

 

14.9 [E:empty]

:empty用来选择没有任何内容的元素,哪怕是一个空格都没有的元素。

 

15 否定伪类选择器「E:not(F)」

可以用来选取所有除了F外的所有元素。

input:not([type=submit]){do something} //可以用来给表单的所有input元素定义样式,除了submit按钮之外

1
input:not([type=submit]){do something} //可以用来给表单的所有input元素定义样式,除了submit按钮之外

 

1、相邻选择器

通配符选择器 *

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

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;

四、伪元素

以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号,主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法,但是其他现代浏览器两种表示方法是都可以的,也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。

16. 「::first-letter」

::first-letter用来选择文本块的第一个字母,常用于文本排版方面。

XHTML

html: <div> <p>this is test line.....</p> </div> css: div p::first-letter{do something} //将会选中<p>中的第一个字母t

1
2
3
4
5
6
7
8
html:
<div>
     <p>this is test line.....</p>
</div>
 
css:
 
div p::first-letter{do something} //将会选中<p>中的第一个字母t

 

17. 「::first-line」

::first-line用于匹配元素的第一行文本,也是常用于文本排版。

XHTML

html: <div> <p> this is first line..........省略....... this is the second line ...省略.... </p> </div> css: div p::first-line{do something} //将会选中<p>中的第一行文字

1
2
3
4
5
6
7
8
9
10
11
html:
  <div>
      <p>
         this is first line..........省略.......
         this is the second line ...省略....
     </p>
  </div>
 
css:
 
div p::first-line{do something} //将会选中<p>中的第一行文字

 

18. 「::before,::after」

::before,::after同我们之前熟用的:before和:after使用方法相同,它们不是指存于标记中的内容,是配合使用content属性可以插入额外内容的位置,尽管生成的内容不会成为DOM的一部分,但它同样可以设置样式。

 

19. 「::selection」

css3新定义的伪元素::selection用来匹配突出显示的文本。但是使用前需要确认浏览器对它的支持程度。

浏览器默认的情况下,我们选中的文本背景是蓝色,字体是白色。通过使用::selection,我们可以改变它的效果。

::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了

1
::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了

但是需要注意的是,::selection仅接受两个属性,一个是background,一个是color。

 

E F { sRules }

元素选择器 E

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

CSS

ul{ list-style:none; }

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

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

            height:25px;

五、属性选择器

在html中,通过给元素添加属性,给以给元素添加一些附加的信息,属性选择器就可以通过定位属性来选取特定的元素。

20. 「 E[attr] 」

用来选择有某个属性的元素,不论这个属性的值是什么。

XHTML

html: <div id="demo"> <a href="" id="test"></a> <a href="www.taobao.com" class="taobao"></a> <a href="#" id="show"> </div> css: a[id]{do something} //将会选择具有id属性的a标签

1
2
3
4
5
6
7
8
html:
<div id="demo">
  <a href="" id="test"></a>
  <a href="www.taobao.com" class="taobao"></a>
  <a href="#"  id="show">
</div>
css:
a[id]{do something} //将会选择具有id属性的a标签

 

21. 「 E[attr=val] 」

用来选取具有属性attr并且属性值为val的元素。

XHTML

html: <div id="demo"> <a href="" id="test" title="test"></a> <a href="www.taobao.com" class="taobao"></a> <a href="#" id="show" title="test"> </div> css: a[id=test][title]{do something} //将会选择具有id属性值为test且具有title属性的a标签

1
2
3
4
5
6
7
8
html:
<div id="demo">
   <a href="" id="test" title="test"></a>
   <a href="www.taobao.com" class="taobao"></a>
   <a href="#"  id="show" title="test">
</div>
css:
a[id=test][title]{do something} //将会选择具有id属性值为test且具有title属性的a标签

 

22. 「 E[attr|=val] 」

E[attr|=val]用来选择具有属性attr且属性的值为val或以val-开头的元素(其中-是不可或缺的)。

XHTML

html: <div id="demo"> <a href="" id="test" title="test" lang="zh"></a> <a href="www.taobao.com" class="taobao" lang="zh-cn"></a> <a href="#" id="show" title="test"> </div> css: a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh开头的a标签

1
2
3
4
5
6
7
8
html:
  <div id="demo">
    <a href="" id="test" title="test" lang="zh"></a>
    <a href="www.taobao.com" class="taobao" lang="zh-cn"></a>
    <a href="#"  id="show" title="test">
</div>
css:
  a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh开头的a标签

 

23. 「 E[attr~=val] 」

当某个元素的某个属性具有多个用空格隔开的属性值,此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。

XHTML

html: <div id="demo"> <a href="" id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="second test"></a> <a href="#" id="show" title="test"> </div> css: a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签

1
2
3
4
5
6
7
8
html:
  <div id="demo">
    <a href="" id="test" title="test first"></a>
    <a href="www.taobao.com" class="taobao web" title="second test"></a>
    <a href="#"  id="show" title="test">
</div>
  css:
  a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签

 

24. 「 E[attr*=val] 」

这个属性选择器使用了通配符,用来选择具有属性attr并且只要属性值中包含val字符串的元素。也就是说只要所选属性中有val字符串,不管是不是多个用空格分隔的属性值,都将被选中。

XHTML

html: <div id="demo"> <a href="" id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[title*=test]{do something} //将会选择具有title属性且其属性值包含test字符串的a标签

1
2
3
4
5
6
7
8
html:
    <div id="demo">
      <a href="" id="test" title="test first"></a>
      <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
      <a href="#"  id="show" title="testlink">
   </div>
  css:
    a[title*=test]{do something} //将会选择具有title属性且其属性值包含test字符串的a标签

 

25. 「 E[attr^=val] 」

用来选择属性attr的属性值是以val开头的所有元素,注意它与E[attr|=val]的区别,attr|=val中-是必不可少的,也就是说以val-开头。

XHTML

html: <div id="demo"> <a href=" " id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[href^=http]{do something} //将会选择href属性以http开头的a标签

1
2
3
4
5
6
7
8
html:
     <div id="demo">
       <a href=" http://zhangmengxue.com" id="test" title="test first"></a>
       <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
       <a href="#"  id="show" title="testlink">
    </div>
  css:
     a[href^=http]{do something} //将会选择href属性以http开头的a标签

 

26. 「 E[attr$=val] 」

这个选择器刚好跟E[attr^=val]相反,用来选择具有attr属性且属性值以val结尾的元素。

XHTML

html: <div id="demo"> <a href=" " id="test" title="test first"></a> <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[href$=png]{do something} //将会选择href属性以png结尾的a标签

1
2
3
4
5
6
7
8
html:
     <div id="demo">
        <a href=" http://zhangmengxue.com/header.png" id="test" title="test first"></a>
        <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a>
        <a href="#"  id="show" title="testlink">
     </div>
css:
      a[href$=png]{do something} //将会选择href属性以png结尾的a标签

1 赞 6 收藏 2 评论

澳门新萄京官方网站 3

相邻选择符只会命中符合条件的相邻的兄弟元素。

类选择器.className

类选择器是最常用的一种选择器,使用时需要在HTML文档元素上定义类名,然后与样式中的.className相匹配,它一次定义后,在HTML文档元素中是可以澳门新萄京官方网站css选拔器补充,呼风唤雨的CSS3选用器。多次复用的。

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; 

 

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>

        }

2、兄弟选择器

群组选择器s1,s2,...,sN

群组选择器在开发中也是很常用的,它用于将相同样式的元素分组在一起,然后用逗号进行分割。

CSS

CSS

a:active,a:hover { outline: 0; }

1
2
3
a:active,a:hover {
  outline: 0;
}

▲ 这里统一去掉了a链接在点击和浮动时的虚线焦点框。

     

E~F { sRules }

后代选择器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{

兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

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

<style>

/* 相邻选择符(E F) */

h3   p { color: #f00; }

/* 兄弟选择符(E~F) */

h3 ~ p { color: #f00; }

</style>

<h3>这是一个标题</h3>

<p>p1</p>

<p>p2</p>

<p>p3</p>

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

这个例子中,如果是相邻选择符,那么只有 p1 会变成红色;如果是兄弟选择符,那么 p1/p2/p3 都会变成红色;

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

 

属性选择器

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

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

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

 属性选择器一共有7种选择形式。

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

E[att] { sRules }

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

        }

选择具有att属性的E元素。

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{

<style>

img[alt] {

margin: 10px;

}

</style>

<img src="图片url" alt="澳门新萄京官方网站 4" />

<img src="图片url" />

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;

 

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

此例,将会命中第一张图片,因为匹配到了alt属性

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

E[att="val"] { sRules }

伪类选择器

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

选择具有att属性且属性值等于val的E元素。

动态伪类

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

<style>

input[type="text"] {

border: 2px solid #000;

}

</style>

<input type="text" />

<input type="submit" />

表单状态伪类

我们把以下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);

 

结构伪类

  • 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设置一个高度,为什么第一个会失效呢,因为该容器里面有一个空格。

        }

此例,将会命中第一张input,因为匹配到了type属性,并且属性值为text

否定类

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[att~="val"] { sRules }

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

选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

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

<style>

div[class~="a"] {

border: 2px solid #000;

}

</style>

<div class="a">1</div>

<div class="b">2</div>

<div class="a b">3</div>

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、

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值中有一个值为a

发展历史

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

澳门新萄京官方网站 5

html代码:

E[att^="val"] { sRules }

 

选择具有att属性且属性值为以val开头的字符串的E元素。

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

<style>

div[class^="a"] {

border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

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

 

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

此例,将会命中1, 2两个div,因为匹配到了class属性,且属性值以a开头

 

E[att$="val"] { sRules }

css代码  

选择具有att属性且属性值为以val结尾的字符串的E元素。

 

<style>

div[class$="c"] {

border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

a[class^=icon]{

 

  background: green;

此例,将会命中1, 3两个div,因为匹配到了class属性,且属性值以c结尾

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

E[att*="val"] { sRules }

}

选择具有att属性且属性值为包含val的字符串的E元素。

a[href$=pdf]{

<style>

div[class*="b"] {

border: 2px solid #000;

}

</style>



<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

  background: orange;

 

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

此例,将会命中所有div,因为匹配到了class属性,且属性值中都包含了b

}

E[att|="val"] { sRules }

a[title*=more]{

 

  background: blue;

选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。

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

这样理解会更简单:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。

}

<style>

div[class|="a"] {

border: 2px solid #000;

}

</style>



<div class="a">0</div>

<div class="a-test">1</div>

<div class="b-test">2</div>

<div class="c-test">3</div>

例如:<style>

 

    a[class^=column]{

在这个例子中,前2个div将会被命中:

        background:#fc0001;

第1个div,拥有class属性,并且值为a,所以被命中;

        }

第2个div,拥有class属性,值是a开头并紧跟着连接符“-”,所以被命中;

    a[href$=doc]{

 

        background:#007d02;

4、伪类选择器

    }

 伪类选择器的种类比较多,一共有二十多种。

    a[title*=box]{

E:link { sRules }

        background:#0000fe;

设置超链接a在未被访问前的样式。

    }

如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现

</style>

超链接的4种状态,需要有特定的书写顺序才能生效。

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

超链接状态顺序:

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

a:link {}

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

a:visited {}

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

a:hover {}

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

a:active {}

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

注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后
可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

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

E:visited { sRules }

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

设置超链接a在其链接地址已被访问过时的样式。

 

E:hover { sRules }

 

设置元素在其鼠标悬停时的样式。

3、

E:active { sRules }

结构性伪类选择器root

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

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

E:focus { sRules }

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

设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

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

webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

:root{background:orange}

E:lang(fr) { sRules }

 

匹配使用特殊语言的E元素。

html {background:orange;}

<style>

 

p:lang(zh-cmn-Hans) {

得到的效果等同。

color: #f00;

 

}

建议使用:root方法。

p:lang(en) {

 

color: #090;

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

}

 

</style>

 

</head>

4、

<body>

结构性伪类选择器—not

<p lang="zh-cmn-Hans">大段测试文字</p>

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

<p lang="en">english</p>

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

E:not(s) { sRules }

  border:1px solid red;

匹配不含有s选择符的元素E。

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

有了这个选择符,那么你将可以很好的处理类似这样的场景:假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

 

.demo li:not(:last-child) {

 

border-bottom: 1px solid #ddd;

 

}

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

上述代码的意思是:给该列表中除最后一项外的所有列表项加一条底边线

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

E:first-child { sRules }

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

匹配父元素的第一个子元素E。

HTML代码:

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素。

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

<ul>

<p> </p>

<li>列表项一</li>

<p></p>​

<li>列表项二</li>

CSS代码:

<li>列表项三</li>

p{

<li>列表项四</li>

 background: orange;

</ul>

 min-height: 30px;

在上述代码中,如果我们要设置第一个li的样式,那么代码应该写成li:first-child{sRules},而不是ul:first-child{sRules}。

}

示例代码:

p:empty {

p:first-child{color:#f00;}

  display: none;

 

}​

<div>

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

<h2>我是一个标题</h2>

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

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

例:

</div>

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

只是在p前面加了一个h2标签,你会发现选择器失效了,没有命中p,why?

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

E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。

  content for Brand

E:last-child { sRules }

</div>

匹配父元素的最后一个子元素E。

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

 

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

E:nth-child(n) { sRules }

 content for jake

匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

</div>

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

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

该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

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

使用E:nth-child(n)实现奇偶:

    content for aron

示例代码:

</div>

<style>

 

li:nth-child(2n){color:#f00;} /* 偶数 */

css代码:

li:nth-child(2n 1){color:#000;} /* 奇数 */

#brand:target {

</style>

  background: orange;

 

  color: #fff;

<ul>

}

<li>列表项一</li>

#jake:target {

<li>列表项二</li>

  background: blue;

<li>列表项三</li>

  color: #fff;

<li>列表项四</li>

}

</ul>

#aron:target{

因为(n)代表一个乘法因子,可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数,而(2n 1)换算出来会是奇数

  background: red;

有一点需要注意的是:

  color: #fff;

HTML示例代码:

}

<div>

 

<p>第1个p</p>

 

<p>第2个p</p>

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

<span>第1个span</span>

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

<p>第3个p</p>

HTML代码:

<span>第2个span</span>

<ol>

<p>第4个p</p>

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

<p>第5个p</p>

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

</div>

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

CSS Case 1:

</ol>

p:nth-child(2){color:#f00;}

CSS代码:

很明显第2个p会被命中然后变成红色

 

CSS Case 2:

 

p:nth-child(3){color:#f00;}

ol > li:first-child{

这是会命中第3个p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。

  color: red;

CSS Case 3:

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

p:nth-child(4){color:#f00;}

First-child与last-child刚好相反

这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素

 

E:nth-child(n)会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增。

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

E:nth-last-child(n) { sRules }

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

匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。

HTML代码:

E:first-of-type { sRules }

<ol>

匹配同类型中的第一个同级兄弟元素E。

  <li>item1</li>

要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body

  <li>item2</li>

该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

  <li>item3</li>

E:last-of-type { sRules }

  <li>item4</li>

匹配同类型中的最后一个同级兄弟元素E。

</ol>​

 

CSS代码:

E:nth-of-type(n) { sRules }

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

匹配同类型中的第n个同级兄弟元素E。

  background: orange;

有一点需要注意的是:

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

HTML示例代码:

 

<div>

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

<p>第1个p</p>

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

<p>第2个p</p>

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

<span>第1个span</span>

  background: orange;

<p>第3个p</p>

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

<span>第2个span</span>

10、first-of-type选择器

</div>

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

如上HTML,假设要命中第一个span:

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

span:nth-of-type(1){color:#f00;}

.wrapper > p:first-of-type {

如果使用E:nth-child(n):

  background: orange;

span:nth-child(3){color:#f00;}

//last-of-type选择器

E:nth-last-of-type(n) { sRules }

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

匹配同类型中的倒数第n个同级兄弟元素E。

 

E:checked { sRules }

 

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

 

<style>

input:checked   span {

background: #f00;

}

input:checked   span:after {

content: " 我被选中了";

}

</style>

</head>

<body>

<form method="post" action="#">

<fieldset>

<legend>选中下面的项试试</legend>

<ul>

<li><label><input type="radio" name="colour-group" value="0" />蓝色</label></li>

<li><label><input type="radio" name="colour-group" value="1" />红色</label></li>

<li><label><input type="radio" name="colour-group" value="2" />黑色</label></li>

</ul>

</fieldset>

<fieldset>

<legend>选中下面的项试试</legend>

<ul>

<li><label><input type="checkbox" name="colour-group2" value="0" />蓝色</label></li>

<li><label><input type="checkbox" name="colour-group2" value="1" />红色</label></li>

<li><label><input type="checkbox" name="colour-group2" value="2" />黑色</label></li>

</ul>

</fieldset>

</form>

</body>

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”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。

E:target { sRules }

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

匹配相关URL指向的E元素。

  background: orange;

解释:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。

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

示例代码:

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

#demo:target{color:#f00;}

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

 

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

<div id="demo">

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

<p>E:target伪类使用方法</p>

  background: orange;

</div>

}

假设上述代码在页面 a.html 中,那么当访问 a.html#demo 时,这个div元素将会被:target命中

 

 

12、only-child选择器

5、伪元素选择器

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

 

示例演示

E:first-letter/E::first-letter { sRules }

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

设置对象内的第一个字符的样式。

HTML代码:

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

<div class="post">

该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

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

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

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

即E:first-letter可转化为E::first-letter

</div>

 

<div class="post">

E:first-line/E::first-line { sRules }

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

设置对象内的第一行的样式。

</div>

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

CSS代码:

E:before/E::before { sRules }

.post p {

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

  background: green;

E:after/E::after { sRules }

  color: #fff;

设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

  padding: 10px;

E::placeholder { sRules }

}

设置对象文字占位符的样式。

.post p:only-child {

  • ::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder

  background: orange;

input::-webkit-input-placeholder {

color: #999;

}

input:-ms-input-placeholder { // IE10 

color: #999;

}

input:-moz-placeholder { // Firefox4-18

color: #999;

}

input::-moz-placeholder { // Firefox19 

color: #999;

}

}

 

 

E::selection { sRules }

 

设置对象被选择时的样式。

13、only-of-type选择器

需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。

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

 

示例演示

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

HTML代码:

<div class="wrapper">

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

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

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

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

</div>

<div class="wrapper">

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

  <ul>

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

  </ul>

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

</div>

CSS代码:

.wrapper > div:only-of-type {

  background: orange;

}

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站css选拔器补充,呼风唤雨的

关键词: