html – 匹配包含部分URL和特定类的链接

概述此页面上有一个包含不同链接的网页.我的目标是找到包含以下内容的链接：/ dir / flowers /并且有类：flower big 并以不同的方式设置它们(即使这些链接成为红色). 以下是应匹配的示例链接： <a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a> <a class="fl 此页面上有一个包含不同链接的网页.我的目标是找到包含以下内容的链接：/ dir / flowers /并且有类：flower big

并以不同的方式设置它们(即使这些链接成为红色).

以下是应匹配的示例链接：

<a  href="http://example.net/dir/flowers/spring.PHP">Spring</a> <a  href="http://example.net/dir/flowers/winter.PHP">Winter</a>    <a  href="http://example.net/dir/flowers/fall.PHP">Fall</a>

等等

因此,如果链接包含：/ dir / flowers / {*}并且具有类：“flower big”,那么它应该匹配.

我尝试了类似下面的东西,但它不起作用：

(a[] AND a[href~="/dir/flowers/"] ) {color:red}

解决方法 你可以使用2 CSS attribute selectors

> [class ^ =“flower big”]与^将查找属性名为class且其第一个值以“flower big”为前缀的任何元素.
> [href * =“/ dir / flowers /”]带*,它将查找属性名称为href且其值至少包含一个字符串“/ dir / flowers”作为子字符串的a.

a {  display: block}[class^="flower big"][href*="/dir/flowers/"] {  color: red;}

<a  href="http://example.net/dir/flowers/spring.PHP">Will be red because has both classes in order and /dir/flowers/</a><a  href="http://example.net/dir/flowers/winter.PHP">Will be red because has both classes in order and /dir/flowers/</a><a  href="http://example.net/dir/flowers/fall.PHP">Will be red because has both classes in order and /dir/flowers/</a><a  href="http://example.net/dir/flowers/spring.PHP">Won't be red because hasn't classes in order even having  the /dir/flowers/</a><a  href="http://example.net/dir/foobar/fall.PHP">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

UPDATE

如果您想要在其中有更多的类或更改这两个类的顺序,那么您需要以不同的方式选择CSS,例如.flower.big或.big.flower.

a {  display: block}.big.flower[href*="/dir/flowers/"] {  color: red;}

<a  href="http://example.net/dir/flowers/spring.PHP">Will be red because has both classes in link and /dir/flowers/</a><a  href="http://example.net/dir/flowers/winter.PHP">Will be red because has both classes in link and /dir/flowers/</a><a  href="http://example.net/dir/flowers/fall.PHP">Will be red because has both classes in link and /dir/flowers/</a><a  href="http://example.net/dir/flowers/spring.PHP">Won't be red because hasn't classes in link  even having  the /dir/flowers/</a><a  href="http://example.net/dir/foobar/fall.PHP">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

总结

以上是内存溢出为你收集整理的html – 匹配包含部分URL和特定类的链接全部内容，希望文章能够帮你解决html – 匹配包含部分URL和特定类的链接所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。