CSS3选择器（一）

标签：关系   最新   字符串   数据结构   正则表达式   样式   tor   att   阴影   

• Relationship Selectors：关系型选择器
• Attribute Selectors：属性选择器
• Pseudo-Element Selectors:伪元素选择器

 一、Relationship Selectors:关系型选择器

 1. E + F : 选择E的下一个兄弟元素并且满足条件F

1 /* Relationship Selectors：关系型选择器 */
2 /* e + f */
3 /* e、f分别表示为两个元素： e + f 的CSS选择器所表示的是“e的下一个满足条件的兄弟元素f” */
4 /* 通俗的说就是e的下一个兄弟元素，而且必须是紧挨着的，并且符合f的选择条件的元素 */
5 div + p{
6     background-color: red;
7 }

能匹配（E + F）的代码:

1 <div> div </div>
2 <p> p </p>

不能匹配（E + F）的代码：

1 <div> div </div>
2 <ul> ul </ul>
3 <p> p </p>

E和F除了是示例中的元素选择器，可以是任意其他选择器，比如类选择器，ID选择器。

2. E ~ F :选择E元素下面的符合F选择条件的同级兄弟元素。

1 div ~ p{
2     background-color: red;
3 }

能否匹配请看代码后面的注释：

1 <p> p </p><!-- 不能匹配 -->
2 <div> div </div>
3 <ul> ul </ul>
4 <p> p </p><!-- 能匹配到 -->

所以，前面的e + f不能匹配下面的p标签。(e和f这种关系可以用js的一种数据结构来表示就是：同处于一个集合(数组)下的元素，f的索引值大于e的索引值)

1 <p> p </p><!-- div + p 选择器不能匹配这个p元素 -->
2 <div> div </div>

 二、Attribute Selectors：属性选择器

• CSS2属性选择器与并列选择器
• CSS3属性选择器

1. 在前面的一篇css选择器中就有介绍属性选择器，但是没有具体分析和示例说明，下面就通过一些示例来一一介绍属性选择器。通常我们的属性选择器会这么用。

1 div[data]{
2     background-color: red;
3 }

上面这是属性选择器吗？严格来说，这叫做并列选择器。是由div标签选择器和[data]属性选择器组合而成的并列选择器，所表达的意思是同时符合这两个选择条件的元素。所以CSS2的属性选择器是下面这样的：

[data]{
    background-color: red;
}

很少能见到吧，不是很少，是在开发中几乎看不到这种写法，但它就是纯粹的CSS2的属性选择器，它可以匹配下面示例中的所有元素：

1 <div data="a">a</div>
2 <div data="a b">b</div>
3 <span data="">span</span>
4 <p data="cc">ppp</p>

2. CSS2中还有两个属性选择器：[attr ~="val"]、[attr |= "val"]。

/* [attr~="val"] 表示匹配执行属性attr中含有指定属性值var的元素 */
[data ~="a"]{
    background-color: red;
}
<div data="a">a</div><!--匹配-->
<div data="a-b">b1</div><!--不匹配-->
<div data="a b">b2</div><!--匹配-->
<div data="a b c">c</div><!--匹配-->

[attr |="val"] 表示匹配attr属性且其属性值是"val"或者“var-..."的元素，省略号表示中划线后面可以带有字符，但不能是空格，因为空格表示是间隔两个属性值的符号。（这里的val表示的是属性具体的值）

 1 [data |="a"]{
 2     background-color: red;
 3 }
 4 <div data="a">a</div><!--匹配-->
 5 <div data="a-b">b1</div><!--匹配-->
 6 <div data="a b">b2</div><!--不匹配-->
 7 <div data="a b c">c</div><!--不匹配-->
 8 <div data="aaa">a</div><!--不匹配-->
 9 <div data="a-bbbbb">a</div><!--匹配-->
10 <div data="aa">a</div><!--不匹配-->
11 <div data="aaa">a</div><!--不匹配-->

3. CSS3中的属性选择器：[attr ^= "val"]、[attr $="val"]、[attr !="val"]、[attr *="val"]这四个我就不一一介绍了，如果你懂的正则表达式就知道怎么用的了。（注意的是val表示的不是取某个值，而是将整个属性的字符串作为一个值来匹配的。val表示某个或者某段字符。）

 三、Pseudo-Element Selectors:伪元素选择器

回顾：为元素选择器在CSS2中有e::first-letter(首字母)、e::first-line(首行)、e::before(元素前添加内容)、e::after(元素后添加内容，常被用于清除浮动)

CSS3为元素选择器：e::placeholder、e::selection。【最新版浏览器都已经兼容，但是实际开发规范中可能不允许用，根据公司开发规范而定。】

e::placeholder可以定义input 属性placeholder产生的提示文本的颜色，也就是说这个选择器中只能写color样式。

e::selection用来定义元素文本被选中时的样式，只能设置color,background-color,text-shadow(阴影)。

总结：这篇博客基本上属于废话，实际开发中很少用到这些选择器，但是因为很少用到就有可能是个坑，大家自己看着办，最后友情建议严格按照开发规范开发。

CSS3选择器（一）

标签：关系   最新   字符串   数据结构   正则表达式   样式   tor   att   阴影   

原文地址：https://www.cnblogs.com/ZheOneAndOnly/p/10721278.html