1. Root-Selektor:root
:root{} ist äquivalent zu html{}.
<style>
:root {
background:green;
}
</style>
<p>:root选择器的演示</p>2. Negativer Selektor: nicht
Negativer Selektor, das heißt
<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<p>
<label for="name">账号:</label>
<input type="text" name="name" id="name" placeholder="请填写账号" />
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请填写密码" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
3. Leerer Selektor:empty
Hinweis: :empty wirkt sich nur auf Elemente aus, die überhaupt keinen Inhalt haben, auch wenn ein Leerzeichen vorhanden ist.
<style>
p:empty {
border: 1px solid green;
}
</style>
<p>我这里有内容</p>
<p> <!-- 我这里有一个空格 --></p>
<p></p><!-- 我这里任何内容都没有 -->4. Zielselektor: Ziel
Hyperlinkadresse, entsprechend der ID
<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h2><a href="#test">test</a></h2>
<p class="not_show" id="test">
这是一个测试
</p>
<style>
#pipi:target {
background: orange;
color: #fff;
}
#ruby:target {
background: blue;
color: #fff;
}
#aaron:target {
background: red;
color: #fff;
}
</style>
<h2><a href="#pipi">pipi</a></h2>
<p id="pipi">
content for pipi
</p>
<h2><a href="#ruby">ruby</a></h2>
<p id="ruby">
content for ruby
</p>
<h2><a href="#aaron">Brand</a></h2>
<p id="aaron">
content for aaron
</p>5 und letzte untergeordnete Elemente: erstes Kind: letztes Kind
<style>
ul li:first-child a {
color:green;
}
ul li:last-child a {
color:red;
}
</style>
<ul>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul>6. Geben Sie die Auswahl des untergeordneten Elements an (n) :nth-last-child(n)
<style>
/*2n 偶数*/
ul li:nth-child(2n) {
color:green;
}
/* 用关键词 odd, 表示偶数, 效果同上
ul li:nth-child(odd) {
color:green;
}
*/
/*2n+1 奇数*/
ul li:nth-child(2n+1) {
color:red;
}
/* 用关键词 even, 表示奇数, 效果同上
ul li:nth-child(even) {
color:red;
}
*/
/* 指定子元素索引 */
ul li:nth-child(5) {
background: #08c;
}
/* 倒数第五个 */
ul li:nth-last-child(5){
background: yellow;
}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
7. Das erste und letzte übereinstimmende untergeordnete Element vom Typ „First-of-Type“ und „Last-of-Type“.
<style>
.wrapper > p:first-of-type {
background: green;
}
.wrapper > p:last-of-type {
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个块元素，我是.wrapper的第一个子元素</p>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<p>我是一个块元素</p>
</p>8. Geben Sie den Selektor für das untergeordnete Element des passenden Typs/den ungeraden/geraden Selektor des passenden Typs an:nth-of-type(n):nth-last-of-type (n)
<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个p元素</p>
<p>我是一个段落元素</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
</p>Nur untergeordneter Elementselektor -child
Das übereinstimmende Element hat nur ein untergeordnetes Element in seinem übergeordneten Element, und es ist ein eindeutiges untergeordnetes Element
<style>
.post p:only-child {
background: orange;
}
</style>
<p class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</p>
<p class="post">
<p>我是一个段落</p>
</p>10 Passt eindeutig zu untergeordneten Elementen vom Typ only-of -Typ
<style>
.wrapper > p:only-of-type {
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
</p>
<p class="wrapper">
<p>我是一个p</p>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</p>11. Verfügbare Selektoren: aktiviert
<style>
p{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
</style>
<form action="#">
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</p>
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
</p>
</form>12. Nicht verfügbarer Selektor: deaktiviert
<style>
form {
margin: 50px;
}
p {
margin-bottom: 20px;
}
input {
background: #fff;
padding: 10px;
border: 1px solid orange;
border-radius: 3px;
}
input[type="text"]:disabled {
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}
</style>
<form action="#">
<p>
<input type="text" name="name" id="name" placeholder="我是可用输入框" />
</p>
<p>
<input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
</p>
</form>13. geprüft
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.box input {
opacity: 0;
positon: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
rightright: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;
}
input[type="checkbox"]:checked + span {
opacity: 1;
}
</style>
<form action="#">
<p class="wrapper">
<p class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</p>
<lable for="usename">我是选中状态</lable>
</p>
<p class="wrapper">
<p class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</p>
<label for="usepwd">我是未选中状态</label>
</p>
</form>14. Ausgewählt mit der Maus, High Bright selector::selection
<style>
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
</style>
<p>拿鼠标选中我, 试试看!</p>15. Schreibgeschützter Selektor: schreibgeschützt
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
</style>
<form action="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" value="中国上海" readonly />
</p>
</form>16 -nur Selektor: Lesen/Schreiben
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
input[type="text"]:-moz-read-write{
border-color: #f36;
}
input[type="text"]:read-write{
border-color: #f36;
}
</style>
<form action="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</p>
</form>Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Verwendung gängiger Selektoren in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche anmeldefreien Plätze gibt es in China?
Kostenloser Quellcode für persönliche Websites
Detaillierte Erklärung des Linux-Befehls dd
css3transition
PHP-Tutorial
Verlauf der Oracle-Ansichtstabellenoperationen
Lösung für unzureichenden Cloud-Speicherplatz
Welche Funktionen gibt es zum Erstellen von Websites?
