Heim Web-Frontend HTML-Tutorial 第 13 章 CSS 选择器[上] - 水之原

第 13 章 CSS 选择器[上] - 水之原

May 20, 2016 pm 04:50 PM

学习要点:

1.选择器总汇

2.基本选择器

3.复合选择器

4.伪元素选择器

 

主讲教师:李炎恢

 

本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素。目前 CSS 选择器的版本已经升级至第三代,即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式,主要分为三大类。

 

一.选择器总汇

本节课主要涉及到三种选择器:基本选择器、复合选择器和伪元素选择器,具体如下:

选择器

名称

说明

CSS 版本

*

通用选择器

选择所有元素

2

元素选择器

选择指定类型的元素

1

#

id 选择器

选择指定 id 属性的元素

1

.

class 选择器

选择指定 class 属性的元素

1

[attr]系列

属性选择器

选择指定 attr 属性的元素

2 ~ 3

s1,s2,s3...

分组选择器

选择多个选择器的元素

1

s1 s2

后代选择器

选择指定选择器的后代元素

1

s1 > s2

子选择器

选择指定选择器的子元素

2

s1 + s2

相邻兄弟选择器

选择指定选择器相邻的元素

2

s1 ~ s2

普通兄弟选择器

选择指定选择器后面的元素

3

::first-line

伪元素选择器

选择块级元素文本的首行

1

::first-letter

伪元素选择器

选择块级元素文本的首字母

1

::before

伪元素选择器

选择元素之前插入内容

2

::after

伪元素选择器

选择元素之后插入内容

2

 

二.基本选择器

使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

<span style="color: #800000;">* </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}
Nach dem Login kopieren

解释:“*”号选择器是通用选择器,功能是匹配所有 html 元素的选择器包括和

标签。可以使用如下元素标记测试效果:
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><br><span style="color: #0000ff;"><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>加粗<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span> <br><span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span></span></span>
Nach dem Login kopieren

通用选择器会将所有元素匹配并配置样式,这是把双刃剑,好处就是非常方便,坏处就是将不必要的元素也配置了。目前为止,还不存在所有元素都必须配置的样式,所以,一般来说,不常用。

 

2.元素选择器

<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>
Nach dem Login kopieren

解释:直接使用元素名称作为选择器名即可。

 

3.ID 选择器

<span style="color: #800000;">#abc </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 20px</span>;
}
Nach dem Login kopieren
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>段落<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>
Nach dem Login kopieren

解释:通过对元素设置全局属性 id,然后使用#id 值来选择页面唯一元素。

 

4.类选择器

<span style="color: #800000;">.abc </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}
Nach dem Login kopieren
<span style="color: #0000ff;"><span style="color: #800000;">b </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>加粗<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><br><span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc"</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span></span>
Nach dem Login kopieren

解释:通过对元素设置全局属性 class,然后使用.class 值选择页面一个或多个元素。

 

<span style="color: #800000;">b.abc </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}
Nach dem Login kopieren

解释:也可以使用“元素.class 值”的形式,限定某种类型的元素。

 

<span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="abc edf"</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span>
Nach dem Login kopieren

解释:类选择器还可以调用多个样式,中间用空格隔开进行层叠。

 

5.属性选择器

//所需 CSS2 版本 

<span style="color: #800000;">[href] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}
Nach dem Login kopieren

解释:属性选择器,直接通过两个中括号里面包含属性名即可。当然,还有更多扩展的属性选择器。

 

//所需 CSS2 版本 

<span style="color: #800000;">[type="password"] </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}
Nach dem Login kopieren

解释:匹配属性值的属性选择器。

 

//所需版本 CSS3

<span style="color: #800000;">[href^="http"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}
Nach dem Login kopieren

解释:属性值开头匹配的属性选择器。

 

//所需版本 CSS3

<span style="color: #800000;">[href$=".com"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}
Nach dem Login kopieren

解释:属性值结尾匹配的属性选择器。

 

//所需版本 CSS3

<span style="color: #800000;">[href*="baidu"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> orange</span>;
}
Nach dem Login kopieren

解释:属性值包含指定字符的属性选择器。

 

//所需版本 CSS2

<span style="color: #800000;">[class~="edf"] </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 50px</span>;
}
Nach dem Login kopieren

解释:属性值具有多个值时,匹配其中一个值的属性选择器。

 

//所需版本 CSS2

<span style="color: #800000;">[lang|="en"] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<span style="color: #0000ff;"><span style="color: #800000;">i </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-us"</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span></span>
Nach dem Login kopieren

 

二.复合选择器

将不同的选择器进行组合形成新的特定匹配,我们称为复合选择器。

1.分组选择器

<span style="color: #800000;">p,b,i,span </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用 ID 选择器、类选择器、属性选择器混合使用。

 

2.后代选择器

<span style="color: #800000;">p b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:选择

元素内部所有元素。不在乎的层次深度。当然,后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。

 

3.子选择器 

<span style="color: #800000;">ul > li </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid red</span>;
}
Nach dem Login kopieren
<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
        </span><span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                我是孙子
            </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
                我是孙子
            </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是儿子
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>
Nach dem Login kopieren

解释:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一级的元素,不可以再往下选择。

 

4.相邻兄弟选择器

<span style="color: #800000;">p + b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

 

5.普通兄弟选择器

<span style="color: #800000;">p ~ b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:普通兄弟选择器匹配和第一个元素后面的所有元素。

 

三.伪元素选择器

伪选择器分为两种第一种是下节伪类选择器,还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆,在 CSS3 中为了区分,伪元素前置两个冒号(::),伪类前置一个冒号(:)。

1.::first-line 块级首行

<span style="color: #800000;">::first-line </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:块级元素比如

等的首行文本被选定。如果想限定某种元素,可以加上前置 p::first-line。

 

2.::first-letter 块级首字母

<span style="color: #800000;">::first-letter </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
Nach dem Login kopieren

解释:块级元素的首行字母。

 

3.::before 文本前插入

<span style="color: #800000;">a::before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> '点击-'</span>;
}
Nach dem Login kopieren

解释:在文本前插入内容。

 

4.::after 文本后插入

<span style="color: #800000;">a::before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> '-请进'</span>;
}
Nach dem Login kopieren

解释:在文本后插入内容。

Erklärung dieser Website
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

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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

See all articles