您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
# 强大的CSS选择器有哪些及怎么用
CSS选择器是前端开发中精准定位元素的利器。本文将全面解析8大类CSS选择器及其组合用法,通过代码示例展示如何高效控制页面样式。
## 一、基础选择器:网页样式的基石
### 1. 元素选择器
```css
/* 选择所有<p>元素 */
p {
color: #333;
line-height: 1.6;
}
/* 选择class="button"的元素 */
.button {
padding: 8px 16px;
border-radius: 4px;
}
/* 多类选择 */
.btn.primary {
background-color: #1890ff;
}
/* 选择id="header"的元素 */
#header {
height: 60px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 重置所有元素边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 选择有title属性的元素 */
[title] {
border-bottom: 1px dotted #999;
}
/* 匹配type="text"的input */
input[type="text"] {
border: 1px solid #d9d9d9;
}
/* class包含"icon-"的元素 */
[class*="icon-"] {
background-size: contain;
}
/* href以https开头 */
a[href^="https"]::after {
content: "↗";
}
/* src以.png结尾 */
img[src$=".png"] {
filter: drop-shadow(0 0 2px #999);
}
/* 悬停效果 */
button:hover {
transform: translateY(-2px);
transition: all 0.3s;
}
/* 获得焦点的输入框 */
input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}
/* 第一个子元素 */
ul li:first-child {
font-weight: bold;
}
/* 奇数行 */
tr:nth-child(odd) {
background: #fafafa;
}
/* 倒数第三个元素 */
div:nth-last-child(3) {
opacity: 0.8;
}
/* 唯一子元素 */
:only-child {
width: 100%;
}
/* 禁用的按钮 */
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 选中的复选框 */
input[type="checkbox"]:checked + label {
color: #52c41a;
}
/* 添加引号效果 */
blockquote::before {
content: "“";
font-size: 2em;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 文本选中样式 */
::selection {
background: #1890ff;
color: white;
}
/* 文章内的所有段落 */
.article p {
margin-bottom: 1em;
}
/* 只选择直接子菜单 */
.nav > .menu-item {
border-bottom: 1px solid #eee;
}
/* 紧跟在h2后的段落 */
h2 + p {
margin-top: 0;
font-size: 1.1em;
}
/* h2之后的所有段落 */
h2 ~ p {
text-indent: 2em;
}
/* 非最后一个按钮 */
.button:not(:last-child) {
margin-right: 10px;
}
/* 空消息容器隐藏 */
.message:empty {
display: none;
}
/* 当前锚点元素高亮 */
:target {
animation: highlight 1s;
}
优先级规则示例:
#nav .item.active {} /* 1-2-1 */
.header .logo {} /* 0-2-0 */
div#sidebar {} /* 1-0-1 */
/* 不推荐 */
body .wrapper .main .content .post p {}
/* 推荐 */
.post-content p {}
性能优化:
*
选择器维护性技巧:
/* BEM命名规范 */
.block__element--modifier {}
<nav class="main-nav">
<ul>
<li class="active"><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li class="has-dropdown">
<a href="/services">服务</a>
<ul class="dropdown">
<li><a href="/services/design">设计</a></li>
<li><a href="/services/dev">开发</a></li>
</ul>
</li>
</ul>
</nav>
.main-nav {
background: #333;
}
.main-nav > ul > li {
display: inline-block;
position: relative;
}
.main-nav a {
color: white;
padding: 12px 20px;
display: block;
}
.main-nav li.active > a {
background: #1890ff;
}
.main-nav .dropdown {
position: absolute;
display: none;
background: #444;
}
.main-nav li:hover > .dropdown {
display: block;
}
掌握CSS选择器需要: 1. 理解每种选择器的特性 2. 通过实际项目练习组合使用 3. 定期关注CSS新特性(如:has()选择器)
合理运用选择器可以大幅提升开发效率,写出更优雅、易维护的CSS代码。 “`
注:本文实际约2300字,包含: - 8大类选择器详解 - 32个代码示例 - 4个实用技巧模块 - 1个完整实战案例 - 详细的优先级说明
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。