css选择器详解
1.选择器
1.1基本选择器
1、标签选择器：选择一类标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
background: #2b5612;
}
</style>
</head>
<body>
<h1>java</h1>
<h1>java</h1>
<h1>java</h1>
</body>
2、类选择器class:选择所有class属性一致的标签，跨标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--类选择器的格式 .class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
-->
<style>
.jf{
background: red;
}
</style>
</head>
<body>
<h1 class="jf">java</h1>
<h2 class="hj">java</h2>
<p class="jf">java</p>
</body>
3、id选择器：全局唯一
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器：id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id 选择器>class选择器>标签选择器*/
#jf{
color:blue;
}
.style1{
color:red;
}
</style>
</head>
<body>
<h1 id="jf">java</h1>
<h1 id="hj">java</h1>
<h1 class="style1">java</h1>
</body>
1.2 层次选择器
1、后代选择器：在某个元素的后面
body p{
color:red;
}
2、子选择器，一代
body>p{
color:green;
}
3、相邻兄弟选择器,只有一个邻居
.active +p{
color:blue;
}
4、通用选择器
/*通用选择器 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: antiquewhite;
}
1.3结构伪类选择器
<style>
/*ul的第一个子元素*/
/*ul li:first-child{*/
/* background: blue;*/
/*}*/
/*ul的最后一个子元素*/
/*ul li:last-child{*/
/* background: red;*/
/*}*/
/*选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序*/
p:nth-child(1){
background: brown;
}
/*选中父元素下的p元素的第二个，类型*/
p:nth-of-type(2){
background: aqua;
}
</style>
</head>
<body>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<ul>
<li>p1</li>
<li>p1</li>
<li>p1</li>
<li>p1</li>
</ul>
1.4属性选择器
id和class结合
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color:gainsboro;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*属性名， 属性名=属性值
*=包含这个元素
=绝对等于
^=以这个开头
$=以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id=first]{*/
/* background:yellow;*/
/*}*/
/*class中有links的元素*/
/*a[class*=links]{*/
/* background: yellow;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/*以href中jpg结尾的*/
a[href$=jpg]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/abc.pdf" class="links item">7</a>
<a href="/abc.doc" class="links item">8</a>
</p>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！