css一个空格是什么选择器,css – 属性选择器中空格的规则是什么？

属性选择器中的空格规则在语法中有所描述.这是属性选择器的

Selectors 3生产(一些标记用其字符串等价物代替说明; S *表示0或更多的空格字符)：

attrib

: '[' S* [ namespace_prefix ]? IDENT S*

[ [ '^=' |

'$=' |

'*=' |

'=' |

'~=' |

'|=' ] S* [ IDENT | STRING ] S*

]? ']'

;

当然,对于想要了解如何编写属性选择器的人来说,语法对于实现选择器引擎的人来说并不是非常有用的.

这是一个简单的英文解释：

属性选择器之前的空格

这在上面的生产中没有涵盖,但第一个明显的规则是,如果你将一个属性选择器附加到另一个简单的选择器或伪元素,不要使用空格：

a[href]::after

如果你这样做,空格被视为一个descendant combinator,而通用选择器隐含在属性选择器和任何可能跟随它.换句话说,这些选择器相当于彼此,但与上述不同：

a [href] ::after

a *[href] *::after

属性选择器中的空格

您是否在括号内和周围的比较运算符之间有任何空格并不重要;我发现浏览器似乎把它们看作是不存在的(但是我还没有广泛测试).根据语法,这些都是有效的,据我所见,在所有现代浏览器中都可以使用：

a[href]

a[ href ]

a[ href="http://stackoverflow.com" ]

a[href ^= "http://"]

a[ href ^= "http://" ]

(显然,用空格打破^和=是不正确的.)

如果IE7和IE8正确地实现了语法,那么它们也应该能够处理它们.

如果使用namespace prefix,则前缀和属性名称之间不允许使用空格.

这些是不正确的：

unit[sh| quantity]

unit[ sh| quantity="200" ]

unit[sh| quantity = "200"]

这些是正确的：

unit[sh|quantity]

unit[ sh|quantity="200" ]

unit[sh|quantity = "200"]

属性值内的空格

但请注意上面的属性值的引号;如果您将其退出,并且尝试选择属性在其值中具有空格的内容,则会出现语法错误.

这是不正确的

div[class=one two]

这是对的：

div[class="one two"]

这是因为未引用的属性值被视为标识符,不包括空格(因为明显的原因),而引用的值被视为字符串.详见this spec.

为了防止这种错误,我强烈建议您始终引用属性值,无论是HTML,XHTML(必需),XML(必需),CSS或jQuery(once required).

空格后的属性值

对于选择器4,属性选择器可以接受在属性值之后出现的标识符的形式的标志.到目前为止,已经为case-sensitivity定义了一个标志(或者说是不区分大小写)：

div[data-foo="bar" i]

因此语法已经是updated：

attrib

: '[' S* attrib_name ']'

| '[' S* attrib_name attrib_match [ IDENT | STRING ] S* attrib_flags? ']'

;

attrib_name

: wqname_prefix? IDENT S*

attrib_match

: [ '=' |

PREFIX-MATCH |

SUFFIX-MATCH |

SUBSTRING-MATCH |

INCLUDE-MATCH |

DASH-MATCH

] S*

attrib_flags

: IDENT S*

简单的英文：如果属性值没有引用(即它是一个标识符),则它和attrib_flags之间的空格是必需的;否则,如果属性值被引用,则空格是可选的,但强烈建议为了可读性. attrib_flags和关闭括号之间的空格是可选的.