`

CSS 选择器参考手册

 
阅读更多

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)

 

选择器
例子
例子描述
CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 <input> 元素。 3
:disabled input:disabled 选择每个禁用的 <input> 元素 3
:checked input:checked 选择每个被选中的 <input> 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3
 
 

 

分享到:
评论

相关推荐

    CSS完全参考手册3.0

    1. **选择器**:CSS选择器是定位HTML或XML文档中特定元素的工具,例如`#id`用于选择ID为特定值的元素,`.class`用于选择具有特定类的元素,以及`tag`用于选择特定标签名的元素。 2. **属性与值**:属性定义了元素的...

    CSS层叠样式表技术参考手册

    - **9.2 CSS选择器参考手册** - **选择器列表**:提供CSS选择器的完整列表。 - **选择器说明**:解释每个选择器的功能及应用场景。 - **9.3 CSS听觉参考手册** - **听觉属性**:介绍CSS中的听觉相关属性。 - **...

    CSS3.0精美参考手册

    1. **选择器**:CSS3.0引入了更强大的选择器,如类选择器、ID选择器、属性选择器、伪类和伪元素等,使得对网页元素的定位更加精确。例如,`:hover`、`:active`、`:focus`等伪类用于实现交互效果,`nth-child()`和`...

    CSS完全参考手册3.0.chm中文版带实例

    《CSS完全参考手册3.0》是一本专为前端开发者准备的权威指南,它全面覆盖了CSS(Cascading Style Sheets)3.0版本的所有特性,包括选择器、布局、颜色与背景、字体与文本、定位、盒模型、边框与边距、过渡与动画、...

    css3参考手册

    以上只是CSS3众多特性的冰山一角,CSS3参考手册详细涵盖了所有这些内容,并可能包括更多高级主题,如CSS自适应图像、多背景、盒模型修正、以及选择器的优先级等。对于任何想要精通CSS3的开发者来说,这是一份...

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    CSS3(层叠样式表)是CSS的第三个主要版本,它带来了许多新的选择器、布局模式和动画效果。CSS3的选择器如`:nth-child()`、`:not()`、`:checked`等,使得选取特定元素变得更加精准。多列布局(column-count、column-...

    CSS中文完全参考手册

    《CSS中文完全参考手册》是一本详尽的资源,旨在帮助开发者全面理解并熟练掌握CSS(Cascading Style Sheets)的使用。CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它使得我们可以将...

    CSS2中文参考手册+CSS浮动

    **CSS2中文参考手册** CSS2(层叠样式表2)是Web开发中不可或缺的一部分,它为网页设计提供了丰富的样式控制能力。这个中文参考手册详细介绍了CSS2规范中的各项属性和规则,帮助开发者理解并应用这些特性。CSS2扩展...

    CSS 参考手册 CSS 参考手册.

    CSS 参考手册是开发者在编写和调试CSS代码时的重要工具,提供了详尽的语法、属性和选择器的说明,帮助开发者更高效地理解和运用CSS。 **CSS的基本结构**: CSS的语法由选择器和声明组成。选择器指向要应用样式的...

    CSS2.0完美参考手册

    **CSS2.0完美参考手册**是一本专为学习CSS2.0设计的详细指南,旨在帮助读者深入理解和掌握这一核心网页样式语言。CSS(层叠样式表)2.0是互联网开发中的重要规范,它定义了如何在HTML或XML(包括SVG、XHTML等)文档...

    CSS中文完全参考手册.zip

    《CSS中文完全参考手册》是一本详尽的资源,旨在帮助中文用户深入理解和掌握层叠样式表(CSS)这一强大的网页设计语言。CSS是构建网页布局、颜色、字体、间距等视觉元素的关键工具,它允许开发者将内容与表现分离,...

    CSS3.0中文参考手册

    **CSS3.0中文参考手册**是一本全面介绍CSS3.0规范的资源,对于学习和掌握CSS3的新特性及用法具有极高的价值。在Web开发领域,CSS(层叠样式表)是用于控制网页元素外观的关键技术,而CSS3.0作为其最新版本,带来了...

    CSS3参考手册(css3语法使用查询手册)CHM版.rar

    CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...

    css参考手册4.2.4是一套最新版版的css3中文参考手册.zip

    1. **选择器**:CSS3扩展了选择器的范围,如伪类(`:hover`, `:active`, `:focus`)和伪元素(`::before`, `::after`),以及更复杂的属性选择器和子选择器。此外,还有`nth-child()`, `nth-of-type()`, `not()`等,...

    CSS2.0中文参考手册

    综上所述,**CSS2.0中文参考手册**是学习和掌握CSS2.0技术的重要资源,它不仅涵盖基础概念,还详细讲解了各种属性、选择器和布局技巧,对于Web设计师和开发者来说具有很高的实用价值。通过深入学习和实践,开发者...

    HTML5+CSS3中文参考手册(3手册).zip

    这个“HTML5+CSS3中文参考手册(3手册)”压缩包文件包含了全面的学习资料,帮助开发者快速理解和应用这两项技术。 首先,HTML5在结构上进行了许多改进,引入了新的元素,如、、、和等,这些元素有助于更好地组织网页...

    css2.0 中文参考手册.chm

    优先级由选择器的特异性、来源和重要性声明(`!important`)决定。 2. **定位和布局**:CSS2.0支持绝对定位和相对定位,使得元素可以相对于其父元素或文档坐标进行定位。此外,还引入了浮动(`float`)属性,用于...

    HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包

    此chm版中文参考手册涵盖了HTML5和CSS3的各个方面,包括基本语法、新特性、实例解析和最佳实践。通过详细的学习,开发者可以掌握如何有效地利用这些新特性来构建符合现代标准的网页,提高开发效率,同时提升用户在多...

    CSS2和CSS3的参考手册(chm格式)

    《CSS2和CSS3的参考手册》是一套全面的在线帮助文档,包含了关于CSS2.0和CSS3.0的详尽指南。这些手册对于Web开发者来说是宝贵的资源,能够帮助他们深入理解并熟练掌握这两种样式表语言。 CSS2.0参考手册详细介绍了...

Global site tag (gtag.js) - Google Analytics