Heim > Artikel > Web-Frontend > CSS-Basisselektor

CSS-Basisselektor

无忌哥哥Original: 2018-06-28 17:04:201897Durchsuche

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.基本选择器</title>
<style type="text/css">
/*元素选择器*/
ul {   
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after {  /*子块撑开父块*/
content:&#39;&#39;;  /*在子元素尾部添加空内容元素*/
display: block;  /*并设置为块级显示*/
clear:both;   /*清除二边的浮动*/
}
li { 
list-style: none; /*去掉默认列表项样式*/
float: left;  /*左浮动*/
width: 40px;  /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}

/*id-Selektor: Wählen Sie das einzige Element auf der Seite aus. Es wird empfohlen, denselben ID-Bezeichner nur einmal zu verwenden Seite. Alle Elemente*/

#item1 {
/*background-color: red;*/
}

/*Eltern-Kind-Selektor: Es besteht eine hierarchische Beziehung zwischen Elementen und die ausgewählten Elemente haben ein gemeinsames übergeordnetes Element*/

.green {
/*background-color: lightgreen;*/
}

/*Platzhalter-Selektor: Wählen Sie „Elemente auf allen Ebenen unterhalb des übergeordneten Elements angeben“ aus. id*/

ul li {  /*层级关系用空格表示*/
color: white;
}

/*Angrenzender Geschwisterselektor+: Wählen Sie nur den ersten Geschwisterknoten dahinter aus*/

ul * {
/*border: 1px solid black;*/
}

/*Alle Geschwisterselektoren~: Wählen Sie alle Geschwisterknoten dahinter aus*/

ul > li {   /*等价于: ul > * {} */
/*background-color: blue;*/
}

Das obige ist der detaillierte Inhalt vonCSS-Basisselektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 标识符 class 选择器 li

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

Vorheriger Artikel：Drei Ebenen, eingeführt im CSS-StilNächster Artikel：Drei Ebenen, eingeführt im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen