css选择器
1. 标签选择器
p 选择标签名为p的元素
<style>
p{
background:#ccc;
}
</style>
<body>
<div>
<p>我变了</p>
<p>我也变了</p>
</div>
<div>我没变 </div>
</body>
2. 类别选择器
.change 选择class属性值为”change”的元素
<style>
.change{
background:#c00;
}
</style>
<body>
<div class="change">我变了</div>
<div>我没变 </div>
</body>
3. ID选择器
#change 选择id属性值为”change”的元素
<style>
#change{
background:#cc0;
}
</style>
<body>
<div id="change">我变了</div>
<div>我没变 </div>
</body>
4. 通配符选择器
* 选择所有的元素
<style>
*{
margin:0;
}
p{
background:#ccc;
}
</style>
<body>
<p>body的边距没有了</p>
<p>我的边距没了</p>
<p>我的边距也没了 </>
</body>
5. 并集选择器
并集选择器可以同时选择多个元素,元素之间用逗号(“,”)分隔
div,p,#demo_id,.demo_class 同时选择标签名为div、标签名为p、id为demo_id、class为demo_class的元素
<style>
div,p,#demo_id,.demo_class{
background:#ccc;
}
</style>
<body>
<div>div变了</div>
<span class="demo_class">class为demo_class的span变了</span>
<p>p变了</p>
<a href="" id="demo_id">id为demo_id的a变了</a>
</body>
6. 交集选择器
交集选择器由两个选择器直接连接构成
第一个必须是标签选择器,第二个必须是class选择器或ID选择器,选择器之间没有间隔
<style>
div.change{
background:#c00;
}
</style>
<body>
<div class="change">我变了</div>
<div>我没变</div>
<div class="change">我变了</div>
<div>我没变</div>
<p class="change">我没变</p>
</body>
7. 后代选择器
div p 选择div元素下的所有p元素
<style>
div p{
background:#c00;
}
</style>
<body>
<div>
<p>我是div里面的子元素p</p>
<ul>
<li>
<p>我也是div里面的子元素p</p>
</li>
</ul>
</div>
<p>我是div外面的p元素</p>
</body>
8. 子元素选择器
div>p 选择div元素下的直接子元素p
<style>
div>p{
background:#c00;
}
</style>
<body>
<div>
<p>我是div里面的直接子元素p</p>
<ul>
<li>
<p>我是div里面的子元素p,但我不是div的直接子元素</p>
</li>
</ul>
</div>
<p>我是div外面的p元素</p>
</body>
9. 相邻兄弟元素选择器
div+p 选择紧跟在div元素之后的那一个p元素
<style>
div+p{
background:#c00;
}
</style>
<body>
<div>我是div</div>
<p>我是紧跟在div元素之后的p元素,我会变</p>
<p>我是没有紧跟在div元素之后的p元素,我不会变</p>
<div>
<p>我是在div元素内部的p元素,我不会变</p>
</div>
</body>
10. 属性选择器:选择带有某个属性的元素
<style>
input[name]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="我有name属性"/>
<input type="text" value="我没有name属性"/>
</body>
11. 属性选择器:选择带有指定属性值的元素
标签中的属性值必须与选择器中的属性值完全相同才能匹配,如果有标签中有该属性值但还有其他的属性值是不能匹配的
<style>
input[name="password"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="我的name属性为user"/><!--能匹配-->
<input type="text" name="password" value="我的name属性为password"/>
</body>
<style>
input[name="user"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="name属性为user"/><!--能匹配-->
<input type="text" name="user name" value="name属性为user和name"/><!--不能匹配-->
</body>
12. 属性选择器:当属性值有多个时,选择属性值含有某个单词的元素
<style>
input[name~="user"]{
background:#ccc; width:300px;
}
</style>
<body>
<input type="text" name="user" value="我的name属性为user"/>
<input type="text" name="user name" value="我的name属性为user和name"/>
</body>
13. 属性选择器:选择属性值以(特定值)或(特定值+连字符"-")开始的元素
<style>
input[name|="user"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="属性值为user">
<input type="text" name="user-1" value="属性值为user-1">
<input type="text" name="user2" value="属性值为user2">
<input type="text" name="user_2" value="属性值为user_2">
</body>
14. 属性选择器:选择属性值以特定值开头的元素
标签的的属性值只要以这个特定值开头即可,后面跟什么字符串都可以
<style>
input[name^="user"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="属性值为user">
<input type="text" name="user-1" value="属性值为user-1">
<input type="text" name="user2" value="属性值为user2">
<input type="text" name="user_2" value="属性值为user_2">
<input type="text" name="username" value="属性值为username">
<input type="text" name="nameuser" value="属性值为nameuser">
</body>
15. 属性选择器:选择属性值以特定值结尾的元素
<style>
input[name$="user"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="属性值为user">
<input type="text" name="nameuser" value="属性值为nameuser">
<input type="text" name="name_user" value="属性值为name_user">
<input type="text" name="username" value="属性值为username">
</body>
16. 属性选择器:选择属性值包含特定值的元素
<style>
input[name*="user"]{
background:#ccc;
}
</style>
<body>
<input type="text" name="user" value="属性值为user">
<input type="text" name="nameusername" value="属性值为nameusername">
<input type="text" name="name_user" value="属性值为name_user">
<input type="text" name="name" value="属性值为name">
</body>
17. 匹配选择器
选择出现在div标签后面的同级p元素(即拥有相同的父元素)
<style>
div~p{
background: #c00;
}
</style>
<body>
<p>这是在div前面的段落标记</p>
<div>这是一个div
<p>这是div里面的段落标记</p>
</div>
<p>这是在div后面的段落标记</p>
<p>这是在div后面的段落标记</p>
</body>