css3 属性选择器加伪类选择器一起使用

先看代码，以下代码是可以工作，这里记录下实现机制。

<!DOCTYPE html>
<html>
<head>
<style>
p[class="a1"]:nth-of-type(5)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p class="a1">第一个段落。</p>
<p class="a2">第二个段落。</p>
<p class="a1">第三个段落。</p>
<p class="a2">第四个段落。</p>
<p class="a1">第五个段落。</p>

</body>
</html>

其最终效果是第五个p元素且该元素的类名为a1，而不是第五个p.a1元素。另外不确定这样用是否存在性能问题，待确认。

时间： 2024-12-07 14:18:07

css3 属性选择器加伪类选择器一起使用的相关文章

CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

Css3之高级-1 Css复杂选择器（兄弟选择器、属性选择器、伪类选择器、伪元素选择器）

一.兄弟选择器相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

如何使用CSS3中的结构伪类选择器和伪元素选择器

原文:如何使用CSS3中的结构伪类选择器和伪元素选择器结构伪类选择器介绍# 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表属性描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一个子元素. E:nth-child(n) 匹配E元素的第n个子元素. E:nth-child(2n)或者E:nth-child(even) 匹配E元素的偶数子元素. E:nth-child(2n+1)或者E:nth-child(odd) 匹配

CSS3新增加的伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3新增加的伪类选择器</title> <style type="text/css"> /*root所有的元素*/ :root{ color: pink;

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar

css3属性选择器，兄弟选择器，伪类选择器

属性选择器 css3语法(类似于正则) 属性选择器:属性是相对于标签而言. 所谓属性选择器就是根据指定名称的属性的值来查找元素 /*1.E[attr]:查找指定的拥有attr属性的E标签.如查找拥有style属性的li标签*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签.如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/ li[class=re

css3新增选择器：伪类选择器和属性选择器

一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li>我是第五个</li>