Rumah > hujung hadapan web > tutorial css > css基本选择器

css基本选择器

无忌哥哥
Lepaskan: 2018-06-28 17:04:20
asal
2005 orang telah melayarinya

<!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; /*每个球之间的右外边距*/
}
Salin selepas log masuk

/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/

#item1 {
/*background-color: red;*/
}
Salin selepas log masuk

/*类选择器:选择页面中具有同一类样式的全部元素*/

.green {
/*background-color: lightgreen;*/
}
Salin selepas log masuk

/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/

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

/*通配选择器:选择指定父级下面的所有层级的元素*/

ul * {
/*border: 1px solid black;*/
}
Salin selepas log masuk

/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/

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

/*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */

#item2 + li {
/*background-color: black; /*只有第7个小球变黑*/*/
}
Salin selepas log masuk

/*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */

#item2 ~ li {
/*background-color: coral; /*亮橙色*/*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li>2</li>
<li>3</li>
<li class="">4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci css基本选择器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan