css选择器

最新推荐文章于 2023-12-12 09:35:39 发布

msmmqxmst

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量220

点赞数 1

本文链接：https://blog.csdn.net/qq_39900771/article/details/77941281

版权

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>

msmmqxmst

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

css选择器1. 标签选择器p 选择标签名为p的元素p{background:#ccc;}我变了我也变了我没变 2. 类别选择器 .change 选择class属性值为”change”的元素.change{background:#c00;}我变了我没变 3. ID选择器#change 选择id属性值为”change”的元素
复制链接

扫一扫