首頁 web前端 html教學 Css样式技巧:常用的选择器和通用选择器_html/css_WEB-ITnose

Css样式技巧:常用的选择器和通用选择器_html/css_WEB-ITnose

Jun 21, 2016 am 08:51 AM

有效且结构良好的文档为你要应用的样式提供了一个框架。要想使用CSS将样式应用于特定的HTML少已素,需要想办法找到这个元素口在CsS中,执行这一任务的样式规则部分称为选择器。

◇ 常用选择器:

最常用的选择器类型是类型选择器和后代选择器,类型选择器用来寻找特定类型的元素,比如段落或标题元素,只需指定希望应用样式的元素的名称,类型选择器有时候也称为元素选择器或简单选择器。

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中,只缩进是块引用的后代的段落元素,其他所有段落不受影响。

    这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素,可以使用ID选择器和类选择器口顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体械示,第二条规则让日期显示为绿色:

    前面提到过,许多CSS开发人员过度依赖类选择器和皿选择器。如果他们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另一种方式,那么他们很可能创建两个类并几在每个标题上应用一个类,一种简单得多的方法是结合使用类型、后代、D和类这几种选择器:

这是一个非常简单明朗的示例。但是,让你吃惊的是,只使用前面讨论的4种选择器就可以成功地找到了许多元素。如果你发现自己在文档添加了许多不必要的类,那么这可能是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差异。你常常会发现唯一的差异是它们在页面.上出现的位置。不要给这些元素指定不1司的类,而应将一个类或ID应用于它们的祖先,然后使用后代选择器定位它们。

伪类:

有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪类选择器来完成。

:link和:visited称为链接伪类,只能应用于锚元素。:hover  :active和:focus称为动态伪类,理论上可以应用于任何元素。大多数浏览器都支持这个功能口但是,IE6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。

最后,值得指出的是:通过把伪类连接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

◇ 通用选择器

通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符,匹配所有可用元素。与其他语言中的通配符一样,通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。例如,可以使用以下规则删除每个元素上默认的浏览器内边距和外边距:

 

在与其他选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者跳过一级后代。在本文以后将看到这么做的实际效果。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? < iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

< meter>的目的是什麼。 元素? < meter>的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什麼。 元素?

> gt;的目的是什麼 元素? > gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

> gt;的目的是什麼 元素?

< datalist>的目的是什麼。 元素? < datalist>的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什麼。 元素?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

See all articles