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

css基本选择器

无忌哥哥asal: 2018-06-28 17:04:201887semak imbas

<!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选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/

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

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

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

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

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

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

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

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

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

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

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

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

#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>

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

css 标识符 class 选择器 li

Kenyataan：

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

Artikel sebelumnya：css样式引入的三个级别Artikel seterusnya：css属性选择器实例

Artikel berkaitan

Lihat lagi