Home > Article > Web Front-end > css basic selector

css basic selector

无忌哥哥Original: 2018-06-28 17:04:201908browse

<!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 selector: Select the only element on the page. It is recommended that the same id identifier be used only once. */

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

/*Class selector: Select the same type of style on the page. All elements*/

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

/*Parent-child selector: There is a hierarchical relationship between elements, and the selected elements have a common parent*/

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

/*Wildcard selector: Select Specify all levels of elements below the parent */

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

/*Child element selector>: Select all li elements below the parent element, which is equivalent to the label selector, so its priority is lower than class,id*/

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

/*Adjacent sibling selector: select only the first sibling node behind it*/

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

/*All sibling selectors~: select Relative to all sibling nodes behind it*/

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

The above is the detailed content of css basic selector. For more information, please follow other related articles on the PHP Chinese website!

css 标识符 class 选择器 li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Three levels introduced by css styleNext article：Three levels introduced by css style

See more

css basic selector

Related articles