选择器是 CSS 中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在样式表中,一般会书写大量的代码,在大型网站中,样式表中的代码可能会达到几千行。麻烦的是,当整个网站或整个 Web 应用程序全部书写好之后,需要针对样式表进行修改的时候,在洋洋洒洒一大篇 CSS 代码之中,并没有说明什么样式服务于什么元素,只是使用了 class 属性,然后在页面中指定了元素的 class 属性。
使用元素的 class 属性有两个缺点 :
在 CSS3中,提倡使用选择器将样式与元素直接绑定起来,这样在样式表中什么样式与什么元素相匹配变得一目了然,修改起来也很方便。不仅如此,通过选择器还可以实现各种复杂的指定,同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。为此, CSS3增加并完善了选择器的功能,以便更灵活地匹配页面元素。
css 选择器分为 5 大类
复合选择器
分组选择器
伪类选择器
否定伪类选择器
h1{...}
#divNav{...}
.topDiv{...}
div.topDiv{...}
div#divNav{...}
div p{...}
div>p{...}
h1 + p {...}
h1 ~ p {...}
h1,h2,h3,h4,h5,h6{...}
如果采用如下所示的 [att$=val]属性选择器,并且将 val 指定为" -1",则页面中 id 为" subsection1-1"、" subsection2-1"的 div 元素的背景色都变为黄色,因为这些元素的 id 属性的结尾字符都为" -1"字符。另外请注意该属性选择器中在指定匹配字符前必须加上" "这个 escape 字符。
E:indeterminate 伪类选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定。到目前为止,只有 Opera 浏览器对这个选择器提供支持。
·E:invalid 伪类选择器用来指定,当元素内容不能通过 HTML 5通过使用元素的诸如 required 、 pattern 等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用 type 属性值为 Email 的 input 元素来限定元素内容必须为有效的 Email 格式)时的样式。
·E:valid 伪类选择器用来指定,当元素内容通过 HTML 5通过使用元素的诸如 required 、 pattern 等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用 type 属性值为 Email 的 input 元素来限定元素内容必须为有效的 Email 格式)时的样式。
E:default 选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框控件的选取状态设定为非选取状态, E:default 选择器中指定的样式仍然有效。
E:checked 伪类选择器用来指定当表单中的 radio 单选框或 checkbox 复选框处于选取状态时的样式。
·E:read-only 伪类选择器用来指定当元素处于只读状态时的样式。
·E:read-write 伪类选择器用来指定当元素处于非只读状态时的样式。
E:enabled 伪类选择器用来指定当元素处于可用状态时的样式。
·E:disabled 伪类选择器用来指定当元素处于不可用状态时的样式。
E:nth-child(n) 选择所有在其父元素中第 n 个位置的匹配 E 的子元素。
tr:nth-child(even)匹配所有表格的偶数行
<body
lang="en-us" ><body>
,而不匹配 <body lang="fr-argot" ><body>
- \*{...}
UI 元素状态伪类是 CSS3新设计的选择器,其中 UI 是 User Interface (用户界面)的简写, UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定和待机等。
在某元素之前。