CSS选择器

选择器

选择器分类：

元素选择器
- id选择器 #element
- 类选择器 .element
- 标签选择器 element
- 通配符选择器（*，损耗资源，慎用）
关系选择器
- 后代选择器 E F
- 直接子代选择器 E > F F是E的子类
- 相邻选择器 E+F E和F相邻
- 兄弟选择器 E~F E和F是兄弟标签
- 并集选择器 E,F
- 交集选择器 E#ele,E.ele
属性选择器
- E[attr]{)属性名
- E[attr=val]{}属性值是val的，根据具体属性
  - 请注意，这种格式要求必须与属性值完全匹配。
    
    如果属性值包含用空格分隔的值列表，匹配就可能出问题。
- E[attr!=val] 属性值非value的
- E[attr~=val]{}属性值列表中包含val就可以了
- E[attr*=val]{}属性值包含val且在任意位置
- E[attr^=val]{}属性值含val且以val为开头的，
  - 如果值是个是列表的话，不会去检索每一个属性，而是检索第一个元素，后面的不管
- E[attr$=val]{}属性值含val且以val为结束的
  - 如果值是个是列表的话，不会去检索每一个属性，而是检索最后一个，前面的不管
- E[attr|=val]{}属性以val为前缀的val-开头的所有元素，如val-test'
- E[attr ~= val]此处~是波浪线，是匹配多个属性名中的一个的，比如class = 'en an al' 则E[class ~= 'en']
伪类选择器
- 四大基本伪类选择器（连接类）
  - :link 用于设置链接初始状态时的样式
  - :visited 用于设置连接被点击过后的样式
  - :hover 用于设置鼠标悬停在链接上方时
  - :active 用于设置鼠标按键按下后但未释放时，链接的样式
伪元素选择器
- E::first-letter 文本的第一个单词或字;
- E::first-line 文本第一行;
- E::selection 可改变选中文的样式，鼠标划出选中的部分
- E::befor
- E::after 在div的内部的前面、或者是后面插入
- ::placeholder 对应h5属性placeholder,但是兼容性不好，
- ::selection 字体被选中后的样式

先重点说一下伪类选择器：

　　结构伪类选择器：

:root  　　　　　　　　　　　　　　  跟标签选择器，相当于html，但是也适用xml
:target　　　　　　　　　　　　　　  锚点被选中时，锚点的变化
:empty　　　　　　　　　　　　　　　 内容为空的元素
:checked　　　　　　　　　　　　　　 input单选，多选被选中
:enabled　　　　　　　　　　　　　　 input可以被选中的
:disabled　　　　　　　　　　　　　　input被disabled属性标记的
:read-only　　　　　　　　　　　　　 input被read-only标记的
:read-write
:first-child　　　　　　　　　　　　选择某个元素的第一个子元素（IE6不支持）
:last-child　　　　　　　　　　　　 选择某个元素的最后一个子元素
:first-of-type　　　　　　　　　　 [CSS3]选择一个上级元素下的第一个同类子元素
:last-of-type　　　　　　　　　　　 [CSS3]选择一个上级元素的最后一个同类子元素
:only-child　　　　　　　　　　　　 [CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type　　　　　　　　　　　 [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-child()　　　　　　　　　　　　[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child()　　　　　　　　　[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:nth-of-type()　　　　　　　　　　　[CSS3]选择指定的元素（IE6-8不支持）
:nth-last-of-type()　　　　　　　　[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

　　以下实例借用别人的博客：https://www.cnblogs.com/ndos/p/8299464.html

下面用例子来说明以上伪类的用法。

1.1 first、last和only伪类选择器

1   <body>
2    
3   <p>（$1）这个段落是其父元素（body）的首个子元素。</p>
4    
5   <h1>欢迎访问nDos的博客</h1>
6   <p>（$2）这个段落不是其父元素的首个子元素，也不是其父元素的最后一个子元素。</p>
7    
8   <div>
9   <p>（$3）这个段落是其父元素（div）的首个子元素。</p>
10  <p>（$4）这个段落是其父元素（div）的最后一个子元素。</p>
11  </div>
12   
13  <nav>
14  <ul>（$4）这个是ul元素，是父元素（nav）的首个子元素。。</ul>
15  <p>（$5）这个段落是其父元素（nav）的段落子元素中的首个子元素。</p>
16  <p>（$6）这个段落是其父元素（nav）的段落子元素中的最后一个子元素。</p>
17  <ul>（$7）这个是ul元素，是父元素（nav）的最后一个子元素。。</ul>
18  </nav>
19   
20  <div>
21  <p>（$8）这个段落是其父元素（div）的唯一一个子元素。</p>
22  </div>
23   
24  <nav>
25  <span>这个span也是父元素（nav）的一个子元素</span>
26  <p>（$9）这个段落不是其父元素（nav）的唯一一个子元素。</p>
27  </nav>
28   
29  <p>（$10）这个段落是其父元素（body）的最后一个子元素。</p>
30  </body>

p:first-child { background:red; } 原理：首先p会筛选出页面所有的标签，:first-child再从这些标签中选中是其父元素的首个子元素的标签，应用{ background:red; }这个样式。对于上面的例子，则会给$1、$3和$8添加红色的背景色。

p:last-child { background:yellow; } 流程是一样的，对于上面的例子则会给$4、$8、$9和$10添加黄色的背景色。

p:first-of-type { background:red; } 与:first-child比较，除了在$1、$3和$8添加红色的背景色外，$5和$9也将会被添加红色的背景色。原理：首先p会筛选出页面所有的标签，:first-of-type再从这些标签中选中排在第一位的标签。通俗的讲，:first-of-type很强势，只要某个标签（比如div标签）内含有标签，它不管怎么样都会选择一个，选择的这个标签是div标签中第一个出现的。

p:last-of-type { background:yellow; } 流程是一样的，对于上面的例子则会给$4、$6、$8、$9和$10添加黄色的背景色。

p:only-child { background:red; } 原理：首先p会筛选出页面所有的标签，然后一一确认这些标签哪些没有任何的兄弟元素。对于上面的例子$8是没有任何的兄弟的元素的，因此会被添加红色的背景色。

p:only-of-type { background:red; } 与:only-child比较，除了$8以外，$9也会被添加红色的背景色。原理就不做讲解了，参照:first-of-type。

不带参数的伪类都介绍完了，下面介绍表格中带参数的4个伪类。

1.2 nth伪类选择器

1   <!DOCTYPE html>
2   <html><head>
3   <style>
4   p { width:50px;float:left;text-align:center;border:1px solid gray; }
5   </style>
6   </head>
7   <body>
8   <h1>nDos的个人博客</h1>
9   <p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p>
10  <p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p>
11  </body></html>

　　上述例子在页面中显示的效果如下图

先看看伪类添加之后，会产生什么样的效果。比如下述nth伪类：

p:nth-child(odd) { background:red; } 加入之后效果如下图所示（odd是奇数的意思）：

有意思的事情发生了，为什么不是奇数的段落背景色为红色呢？先放下这个问题，再来看看下面这个伪类：p:nth-of-type(odd) { background:red; }，显示效果如下图所示：

原理（上例）：nth-child是计算body中所有的子元素（包括h1），然后按照奇偶进行排列，那么“第一个”p标签的顺序标号成为了“2”。而nth-of-type则不同，它是计算body中所有的标签为p的子元素，其他的子元素它不管，然后按照奇偶进行排列。

至于:nth-last-child()和:nth-last-of-type()原理也是一样的，不过它计算的方式，是倒序的。关于这两个伪类就不多展开了。

虽然不展开:nth-last-child()和:nth-last-of-type()，但是nth-child还有东西需要展示一下，比如这个伪类p:nth-child(2n+1) { background:red; }，显示效果与p:nth-child(odd) { background:red; }是一模一样的，这里就不贴图了。

其中需要说的是这个n，写成2i+1，行不行？不行！浏览器认不出来，浏览器只认识n。当然这是规则，就不深究了，下面要继续讨论的是，它只能进行奇偶选择吗？再来看看这个伪类：

p:nth-child(3n+1) { background:red; } 渲染的结果如下图所示：

因为有h1这个标签在，所以这里计算起来有点不太好理解，下面去掉h1那个标签。看看下图：

原理：n是从0开始取值，逐个代入。3n+1的结果就是 1、4、7、10、13……当然例子这里没有那么多元素。当然也可以试试：p:nth-child(5n+1) { background:red; } 等等。

甚至可以试试下面这些伪类：

p:nth-child(-n+5) { background:red; }

p:nth-child(n+5) { background:red; }

p:nth-child(n) { background:red; }

对于nth-of-type、nth-last-child和nth-last-of-type的玩法也脱离不了上面的这些东西，只不过是计算的元素标签的集合不同，计算的开始位置不同。写再多也是重复，就不展开了

posted on 2019-06-30 20:44 code丶wei 阅读(760) 评论(0) 编辑收藏举报