css模糊匹配

最新推荐文章于 2024-05-23 09:53:48 发布

weixin_34381666

最新推荐文章于 2024-05-23 09:53:48 发布

阅读量1.1k

点赞数

原文链接：https://my.oschina.net/u/2306318/blog/1015413

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、全局选择器

就是通配符 *

2、元素选择器

如ul li p h1 div等

3、类选择器

如.className{}

4、id选择器

如#identity{}

5、属性选择器

CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]

[class="a"]只能匹配class="a"的元素

[class~="a"]则可以匹配class="a"、class="a b"的元素

[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：

*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；

^=表示以指定字符开头，[href^="/"]则匹配href="/a/a.htm"、href="/b"的元素

$=表示以指定字符结尾，[scr$=".png"]则匹配所有png图片，如src="logo.png"

6、组选择器

简单说就是","选择器，如.className,#identity,td,th,li{}，实现代码公用，实际开发过程随处可见。

7、关系选择器

后代选择器即空格" "，匹配父节点所有子孙节点。

子选择器即">"，匹配父节点直接子节点。

下面代码段中，只有ol中的li标签不会被ul>li{}匹配

<ul>

<li>

<ol>

</ol>

</li>

</ul>

相邻兄弟选择器即"+"，匹配与之相邻、同时拥有相同父节点的节点（如若中间存在文本节点，文本节点将被忽略）。

下面的第一个p标签将被h1+p{}匹配：

我是纯粹的文本节点

<p>我也是文字</p>

广义兄弟选择器即"~"，匹配位置在其后且具有相同直接父节点的节点。

8、伪类选择器

CSS1支持开始:link :visited :active，但只是提供给a标签使用，而且这三个伪类之间是互斥的，也就是:link:active的组合是不生效的。CSS2新增了:hover :focus，而且不再局限于a标签，到这里我们最熟悉的伪类已悉数上场，下面来分析一下其区别。先来引入一个动态伪类的概念，如:hover :focus :active，也就是说这些伪类是在交互过程中动态添加到目标元素的（动态的状态），与之相对应的就是静态伪类，如:link :visited，表示的是元素的静态的状态。静态伪类和动态伪类内部是互斥的，不能进行组合，而静态和动态之间可以进行组合使用，如a:link:focus{} a:visited:focus{}会生效，而a:visited:link是不生效的。

此外CSS2还支持了:first-child和:lang，需要注意的是:first-child是对元素本身状态的描述，而非其它元素，比如li:first-child的意思是“这个li是第一个子节点”，而非“li元素里面的第一个子节点”，这也是伪类和伪元素容易混淆的原因所在（第九点有说明）。:lang(char)相当于属性选择器[lang|=char]，匹配的是带有char（举例）本身及连字符的元素，如char、char-ca、char-be等。

CSS3为我们带来了更加广泛的伪类选择器…待续

9、伪元素选择器

可能很多人会在伪类和伪元素之间迷惑，区别就在：伪类只是对目标元素本身起作用，而伪元素则相当于一个“新”的元素并只对其起作用，所以有的伪元素选择器有content属性，而伪类则没有。举一个最容易混淆的例子p:first-child和p:first-letter，乍一看以为两个都是伪元素，其实不然，:first-child只是对p这个元素属性的一个描述，也就是说这个p是其父级元素的第一个子节点；而:first-letter则是对p下第一个字符（其实也可以看做一个元素）的选择，而非p本身。

包括：CSS1支持的:first-letter :first-line，CSS2支持的:after :before，CSS3并没有新增。伪元素可以和class联合使用。

转载于:https://my.oschina.net/u/2306318/blog/1015413