Heim > Artikel > Web-Frontend > Was sind die CSS-Selektoren? Umfassende Zusammenfassung der CSS-Selektoren (mit Code)

Was sind die CSS-Selektoren? Umfassende Zusammenfassung der CSS-Selektoren (mit Code)

不言Original: 2018-07-27 17:30:3412035Durchsuche

Was sind die CSS-Selektoren? Zu den grundlegenden Selektoren von CSS gehören Platzhalterselektoren, Typselektoren, Attributselektoren, Klassenselektoren, Einschlussselektoren und Unterobjektselektoren. Es gibt auch einen speziellen Selektor, der Selektoren mischt separat.

1.Wildcard Selector(Universal Selector):

Syntax: *

Hinweis: 1. * stellt ein Platzhalterzeichen dar, das alles angibt
2. Format: *{Stilliste}
3. Wird für Schriftart, Rand, Hintergrund usw. der gesamten Seite oder Website verwendet.

Beispiel: Außer Es wird angegeben, dass die im p-Tag enthaltenen Elemente den in den p-Klammern angegebenen Stil verwenden und die anderen die in den *-Klammern angegebenen Stile verwenden. Die Ausgabe von

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通配选择符</title>
<style type="text/css">
*
{/**定义网页中所有元素字体、边距样式*/
 margin:0px;
 font-size:28px;
 font-family: "华文彩云";
}
div  *
{/**定义div中所有元素字体、边距样式*/
margin:10px;
color:#FF0000;
}
</style>
</head>  
<body>
普通文本
<p>段落文本</p>
<span>span内联文本</span>
<div>div文本
      <div>div子div元素中的文本</div>
      <p>div中段落文本</p>
      <span>div中span内联文本</span>
</div>
</body>
</html>

lautet wie folgt:

2. Typselektoren:

Syntax: E1

Beschreibung: 1. Der Typselektor wird verwendet, um den Stil eines bestimmten HTML-Elements festzulegen
2. Bei Elementnamen wird die Groß-/Kleinschreibung nicht beachtet
3. Format: HTML-Elementname {Stilliste🎜>

Beispiel: p gibt den Stil innerhalb der geschweiften Klammern an, dann verwendet der folgende Tag-Typ p seinen Stil in ähnlicher Weise, der folgende p verwendet ihn ebenfalls.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类型选择符</title>
<style type="text/css">
p
{
font-size:1cm;
font-style:oblique;
}
div
{
color:#FFFF00;
font-family:"方正黄草简体";
font-size:1in;
}
</style>
</head>
<body>
<p>类型选择符</p>
<div>类型选择符</div>
</body>
</html>

Die Ausgabe ist wie folgt:

3. Attributselektoren:

Syntax: 1.

E1[attr] 2.
E1[attr=Wert] 3.
E1[attr~=Wert] 4.
E1[attr|=value]

Beschreibung: HTML-Elementstil, der zum Definieren bestimmter Attributwerte verwendet wird.

Beispiel: Wir sehen das folgende Beispiel. Wenn das erste Attribut Ist der Typ, dann verwenden die folgenden Attribute des Typs den von ihm angegebenen Stil. Einige Leute haben gefragt, ob es in diesem Fall nicht auch den folgenden Beschriftungsstil gibt um den vorherigen Typ in derselben Klammer abzudecken, wobei der spätere Vorrang hat.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>属性选择符</title>
<style type="text/css">
input[type]
{
border:2px solid #E81D2B;
}
input[name=&#39;button&#39;]
{
border:1px solid  #868686;
height:25px;
width:60px;
}
</style>
</head>
<body>
<form action="#">
<div>用户名:<input type="text"  name="name"/></div>
<div>密码:<input  type="password"  name="password"/></div>
<div>确认密码:<input  type="password"  name="confirmPWD"/></div>
<div>电子邮箱:<input  type="text"  name="email"/></div>
<div><input  type="submit"  value="用户注册" name="button"/> 
<input  type="reset"  value="重新填写" name="button"/></div>
</form>
</body>
</html>

Die Ausgabe ist wie folgt:

4. Enthält Selektoren (Descendant Selectors):

Syntax:

E1 E2 Beschreibung: 1. Wird für untergeordnete Elemente verwendet, um den Stil des übergeordneten Elements zu erweitern

2. Format: übergeordneter Selektor untergeordneter Selektor { Stilliste🎜> 3. Achten Sie auf die Einschlussbeziehung der HTML-Elemente

Beispiel: Der Einschlussselektor ist einfach. Der folgende Bereich ist beispielsweise in p enthalten, aber die Elemente in span werden ausgewählt. Es ist der durch p p spezifizierte Stil. Das Element in p wählt das durch p p spezifizierte Element aus. Dies ist das Proximity-Prinzip:

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>包含选择符</title>
<style type="text/css">
div p
{
font-size:32px ;
font-weight:lighter;
}
div p span
{
color:#FF0000 ;
text-shadow: 20px 10px 2px #E81D2B;  
}
</style>
</head>
<body>
    <p>包含选择符</p>
    <div>
        <p> 包含选择符
         <span>包含选择符</span>
        </p>
    </div>
</body>
</html>

Die Ausgabe ist wie folgt:

5. Untergeordnete Selektoren: Syntax:

E1>E2

Beschreibung: 1. Wird für untergeordnete Objektelemente verwendet, um den Stil von übergeordneten Objektelementen zu erweitern

2. Format: Auswahl des übergeordneten Objekts>Name des HTML-Elements des untergeordneten Objekts {Stilliste}

3. Passen Sie auf zum Unterschied zwischen Selektoren und Einschlüssen

4. In seltenen Fällen kann normalerweise der Einschlussselektor anstelle von

verwendet werden. Beispiel: Der Unterobjektselektor hat tatsächlich keine Änderung gegenüber der ursprünglichen Tag-Verwendung B. ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6,,,bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689, dann ist der Inhalt im folgenden 25edfb22a4f469ecb59f1190150159c6

<!DOCTYPE html >
<html >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>子对象选择符</title>
<style type="text/css">
/**
常用子对象选择符
table>tbody>tr>td
ul>li
ol>li
div>子div
dl>dt
dl>dd
form>input
*/
ul > li
{
font-size:18px;
color:#4F87C2;
}
table>td
{
font-style:italic;
font-weight:bolder;
}
dl>dd
{
font-weight:bolder;
}
div >div{
font-weight:bolder;
}
form> input
{
border:2px solid #4F87C2;
}
</style>
</head>
<body>
水果列表
<ul >
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<table > 
  <tr>
  <td>单元格一</td>
  <td>单元格一</td>
  </tr>
</table>
三大球类运动
<dl>
 <dt>足球</dt>
 <dd>全世界第一大球类运动</dd>
 <dt>篮球</dt>
 <dd>全世界第二大球类运动</dd>
 <dt>排球</dt>
 <dd>全世界第三大球类运动</dd>
</dl>
<div>第一层div<div>第二层div</div></div>
<form>
<input type="button" value="普通按钮"/>
</form>

</body>
</html>

Die Ausgabe ist wie folgt:

6. ID-Selektoren:

Syntax: #sID

Beschreibung: 1. Wird verwendet, um den Stil des eindeutigen ID-Attributwertelements zu definieren 2. Format: #Selektorname {Stilliste}

3. Der Selektorname muss mit der Element-ID identisch sein. Die Attributwerte müssen gleich sein und es wird zwischen Groß- und Kleinschreibung unterschieden.

Beispiel: Das ID-Selektor-Tag beginnt mit #, wenn der Inhalt der folgenden ID lautet das gleiche wie nach #, verwenden Sie den Stil unter dieser Definition, z. B. Name.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ID选择符</title>
<style type="text/css">
#name
{
border:2px solid #4F87C2;
width:200px;
height:30px;
}
</style>
</head>
<body>
<form  action="#">
 文本框一:
 <input type="text" name="name" id="name"/>
 文本框二:
 <input type="text" name="address"/>
</form>
</body>
</html>

输出如下：

七.类选择符（Class Selectors）：

语法：E1.className
说明： 1.用于选择特定类选择符

2. 可以选择一个或以上的类选择符

3.区分大小写

例子：以点.开头的标签定义下的样式，下面class后面的内容和前面点后面的一样的话就使用该样式。

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类选择符</title>
<style type="text/css">
.myButton
{
border:2px solid #4F87C2;
width:200px;
height:30px;
}
</style>
</head>
<body>
<form  action="#">
 文本框一:
 <input type="text" name="name" class="myButton"/>
 文本框二:
 <input type="text" name="address"  class="mybutton"/>
</form>
</body>
</html>

输出如下：

八.（选择符混合使用）选择符分组（Grouping）：

语法：E1.E2.E3
说明： 1.常见的有类型选择符与类选择符；格式:html元素名.类选择符名称,中间不能有空格

2.其它选择与包含选择符；最常见使用方式

例子：顾名思义就是混乱在一起使用，规则还是那样。

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择符混合使用</title>
<style type="text/css">
p.bigFont
{
font-size:36px;
font-family:"微软雅黑"；
}
p#colorFont
{
color:#FF0000;
} 
.div1 span, #div1 span, div div p
{
color:#FF00FF;
font-weight:lighter;
}
</style>
</head>
<body>
<p>普通文字<div>11</div></p>
<p class="bigFont">放大文字</p>
<div class="bigFont">div放大文字</div>
<p id="colorFont">彩色字体</p>
<div class="div1">
<span>div中的span文字</span>
</div>
<div><div><p>子DIV中的段落文字</p></div></div>
</body>
</html>

输出如下：

常见的三种样式表：

一.内嵌样式表：内嵌样式表其实就是把样式放在93f0f5c25f18dab9d176bd4f6de5d30e,,,,9c3bca370b5104690d9ef395f2c5f8d1内部。

例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内嵌样式表</title>
<head>
<!-- 定义在头部标签里面-->
<style type="text/css">
p
{ font-family:"隶书";
  font-size:28px;
 color:#FF0000;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<h2>作者李白</h2>
<p>床前明月光，</p>
<p>疑是地上霜.</p>
<p>我是郭德刚，</p>
<p>低头思故乡.</p>
</body>
</html>

输出如下：

二.行内样式表：其实就是把样式放在6c04bd5ca3fcae76e30b72ad730ca86d,,,,,,,,36cc49f0c466276486e50c850b7e4956内部。

例子：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内样式表</title>
</head>
<body>
<div style="float:right" >
    <h1>静夜思</h1>
    <h2>作者李白</h2>
    <div style="font-family:&#39;隶书&#39;;font-size:28px;color:#FF0000;">
        <p>床前明月光，</p>
        <p>疑是地上霜.</p>
        <p>我是郭德刚，</p>
        <p>低头思故乡.</p>
    </div>
</div>
</body>
</html>

输出如下：

三.链接外部样式表：样式放在链接的css/demo.css那个文档里，而链接放在93f0f5c25f18dab9d176bd4f6de5d30e,,,,,,,,,,,9c3bca370b5104690d9ef395f2c5f8d1内部。

例子：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>链接外部样式表</title>
<link href="css/demo.css" type="text/css"   rel="stylesheet"/>
</head>
<body>
<h1>静夜思</h1>
<h2>作者李白</h2>
<p>床前明月光，</p>
<p>疑是地上霜.</p>
<p>我是郭德刚，</p>
<p>低头思故乡.</p>
</body>
</html>

输出如下：

In Verbindung stehende Artikel

Mehr sehen