suchen
HeimWeb-FrontendHTML-TutorialCSS选择符详解 - 阿讯小飞

一、类型选择符

什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
如下:

  1. body {}   
  2. div {}   
  3. p {}   
  4. span {}  

 
二、群组选择符

对于XHMTL对象,可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。
使用时应该注意”逗号”是在半角模式下,并非中文全角模式。
如下:

  1. h1,h2,h6,p,span   
  2. {   
  3. font-size:12px;   
  4. color:#FF0000;   
  5. font-familyarial;   
  6. }   
  7.    

三、包含选择符
对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。
需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。
这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。
如下:

  1. h2 span   
  2. {   
  3. color:red;   
  4. }  

如下:

  1. body h1 span strong   
  2. {   
  3. font-weight:bold;   
  4. }  

 
四、id选择符

根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=”"的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。
XHTML如下:

  1. "content">
      

 

CSS如下:

  1. #content   
  2. {   
  3. font-size:14px;   
  4. line-height:120%;   
  5. }  

 
五、class选择符

其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
对于XHTML标签使用class=”"进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。
使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
XHTML如下:

  1. "he">

      
  2. "he">   
  3. "he">
      

 

CSS如下:

  1. .he   
  2. {   
  3. margin:10px;   
  4. background-color:red;   
  5. }  

 
六、标签指定式的选择符

如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:

  1. h1#content {}   
  2. /*表示所有id为content的h1标签*/  
  3. h1.p1 {}   
  4. /*表示所有class为p1的h1标签*/  

 
标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。

七、组合选择符

对于上面的所有选择符而言,进行组合使用。如下:

  1. h1 .p1 {}   
  2. /*表示h1下的所有class为p1的标签*/  
  3. #content h1 {}   
  4. 表示id为content的标签下的所有h1标签   
  5. h1 .p1,#content h1 {}   
  6. /*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/  
  7. h1#content h2{}   
  8. /*id为content的h1标签下的h2标签*/  

 
CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

 

############################################################

 

一.选择符模式

模式/含义/内容描述

*

匹配任意元素。(通用选择器)

E

匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)

E F

匹配元素 E 的任意后代元素 F 。(后代选择器)

E > F

匹配元素 E 的任意子元素 F 。(子选择器)

E:first-child

当元素 E 是它的父元素中的第一个子元素时,匹配元素 E 。(:first-child 伪类)

E:link E:visited

如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)

E:active E:hover E:focus

在确定的用户动作中匹配 E 。(动态伪类)

E:lang(c)

如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的),则匹配该元素。(:lang() 伪类)

E + F

如果一个元素 E 直接在元素 F 之前,则匹配元素 F 。(临近选择器)

E[foo]

匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)

E[foo="warning"]

匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)

E[foo~="warning"]

匹配其“foo”属性值为空格分隔的值列表,并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)

E[lang|="en"]

匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)

DIV.warning

仅 HTML。用法同 DIV[class~="warning"]。(类选择器)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。

这是是h1的内容

这是一个段落p的内容!这里是strong的内容这是一个段落p的内容!

从以上代码中,我们可以找出这样的关系:

h1 和 p 同为 div 的“儿子”,两者分别同 div 形成“父/子”关系。

h1,p,strong 都是 div 的“子元素”。(三者都包含在 div 之内)

div 是 h1 和 p 的“父元素”。

strong 和 p 形成“父/子”关系,strong 的“父元素”是 p 。

但 strong 和 div 并非“父/子”关系,而是“祖孙”关系,但 strong 依然是 div 的“子(孙)元素”。

div 是 h1 p strong 三者的“祖先”,三者是 div 的“子(孙)元素”。

h1 和 p 两者是相邻的。

继承上面的实例来具体演示一下E F的关系:假如,我们需要将 strong 内的内容二字变为绿色,我们可以有哪些方法呢?

div strong {color:green;} /* - 正确。strong 是 div 的“子元素”*/

p > strong {color:green;} /* - 正确。strong 和 p 是“父/子”关系*/

div > strong {color:green;} /* - 错误!strong 虽然是 div 的“子(孙)元素”,但两者乃是“祖孙”关系,而非“父/子”关系,因此不能用 > 符号连接*/

临近选择器和通用选择器:通用选择器以星号“*”表示,可以用于替代任何 tag 。

实例:

h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/

二.选择符分类介绍

1.通配选择符

语法:

* { sRules }

说明:

通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。

假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。

示例:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2.类型选择符

语法:

E { sRules }

说明:

类型选择符。以文档语言对象(Element)类型作为选择符。

示例:

td { font-size:14px; width:120px; }

a { text-decoration:none; }

 

3.属性选择符

语法:

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

说明:

属性选择符。

选择具有 attr 属性的 E

选择具有 attr 属性且属性值等于 value 的 E

选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格

选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E

示例:

h[title] { color: blue; }

/* 所有具有title属性的h对象 */

span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a[rel~="copyright"] { color:black; }

4.包含选择符

语法:

E1 E2 { sRules }

说明:

包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。

示例:

table td { font-size:14px; }

div.sub a { font-size:14px; }

5.子对象选择符

语法:

E1 > E2 { sRules }

说明:

子对象选择符。选择所有作为 E1 子对象的 E2 。

示例:

[Copy to clipboard] [ - ]CODE:

body > p { font-size:14px; }

/* 所有作为body的子对象的p对象字体尺寸为14px */

div ul>li p { font-size:14px; }

6.ID选择符

语法:

#ID { sRules }

说明:

ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。

示例:

#note { font-size:14px; width:120px;}

7.类选择符

语法:

E.className { sRules }

说明:

类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。请参阅属性选择符( Attribute Selectors )。

在IE5+,可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。例如:

示例:

div.note { font-size:14px; }

/* 所有class属性值等于(包含)"note"的div对象字体尺寸为14px */

.dream { font-size:14px; }

/* 所有class属性值等于(包含)"note"的对象字体尺寸为14px */

8.选择符分组

语法:

E1 , E2 , E3 { sRules }

说明:

选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。

示例:

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px; }

9.伪类及伪对象选择符

语法:

E : Pseudo-Classes { sRules }

E : Pseudo-Elements { sRules }

说明:

伪类及伪对象选择符。

伪类选择符。请参阅伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。

伪对象选择符。请参阅伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。

示例:

div:first-letter { font-size:14px; }

a.fly :hover { font-size:14px; color:red; }

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
HTML vs. CSS und JavaScript: Vergleich von WebtechnologienHTML vs. CSS und JavaScript: Vergleich von WebtechnologienApr 23, 2025 am 12:05 AM

HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.

HTML als Markup -Sprache: seine Funktion und ihren ZweckHTML als Markup -Sprache: seine Funktion und ihren ZweckApr 22, 2025 am 12:02 AM

Die Funktion von HTML besteht darin, die Struktur und den Inhalt einer Webseite zu definieren, und der Zweck besteht darin, eine standardisierte Möglichkeit zur Anzeige von Informationen bereitzustellen. 1) HTML organisiert verschiedene Teile der Webseite über Tags und Attribute wie Titel und Absätze. 2) Es unterstützt die Trennung von Inhalten und Leistung und verbessert die Wartungseffizienz. 3) HTML ist erweiterbar, sodass benutzerdefinierte Tags SEO verbessern können.

Die Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsDie Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsApr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

HTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenHTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenApr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML: Evolution und Trends im WebdesignDie Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickHTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Ist es eine Programmiersprache oder etwas anderes?HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

HTML: Erstellen der Struktur von WebseitenHTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),