CSS3-基本选择器语法（实战）

来源：互联网发布：java iterator用法编辑：程序博客网时间：2024/06/04 23:00

直接上实战源码：

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>使用CSS3基本选择器</title><style>*{margin: 0; padding: 0;}.clearfix:after, .clearfix:before{display: table; content: "";}.clearfix:after{clear: both; overflow: hidden}.demo{width: 250px; border: 1px solid #ccc; padding: 10px; margin: 20px auto;}li{list-style: none outside none; float: left; height: 20px; line-height:20px; width: 20px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px;}.demo *{background: orange;}  /* 适配选择器 */ul{background: grey;}/* 元素选择器 */#first{background: lime; color: #000;}/* ID选择器 */#last{background: #000; color: lime;}.item{background: green; color: #fff; font-weight: bold;}/* 类选择器 *//* 类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个 */.item.important{background: red;}/* 注意：多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素 */</style></head><body><ul class="clearfix demo"><li class="first" id="first">1</li><li class="active">2</li><li class="important item">3</li><li class="important">4</li><li class="item">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li class="last" id="last">10</li></ul></body></html>

0 0