css选择器总结
css常见选择器
开发中经常需要找到特定的网页元素进行设置样式，此时就会用到各种选择器，我们会涉及到的选择器有：
- 通用选择器（universal selector）
- 元素选择器（type selectors）
- 类选择器（class selectors）
- id选择器（id selectors）
- 属性选择器（attribute selectors）
- 组合选择器（combinators）
- 伪类（pseudo-classes）
- 伪元素（pseudo-elements）
❤❤❤具体的使用和效果，让我的猪宝们一起来探索吧：❤❤❤
1.通用选择器：一般用来给所有元素作一些通用性的设置。
- 作用范围：所有的元素都会被选中。
- 应用范围：内边距、外边距、重置一些内容。
<style>
body, p, div, h2, span {
margin: 0;
padding: 0;
color: green;
}
</style>
<body>
<div>你好</div>
<p>我好</p>
<div>
<h2>大家好</h2>
<p>都好 <span>好极了</span> </p>
</div>
</body>
2.简单选择器：开发中常用的选择器（括号中对应使用方法）
简单选择器分类：
- 元素选择器（元素标签的名称）、
- 类选择器（.类名）、
- id选择器（#id）(id是唯一的，取名字不可重复)；
<style>
div {
color: red;
}
.zyj {
color: blue;
}
#home {
color: green;
}
</style>
<div>div元素</div>
<div class="zyj">一个美女</div>
<div id="home">努力猪</div>
<p class="zyj">一个P元素</p>
<h2 id="div">p标签</h2>
3.属性选择器：选择器用于选取带有指定属性的元素。
- [attribute] 选择器用于选取带有指定属性的元素。
- [attribute=“value”] 选择器用于选取带有指定属性和值的元素。
- [attribute~=“value”] 选择器选取属性值包含指定词的元素。
- [attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。
- [attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。
- [attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。
- [attribute*=“value”] 选择器选取属性值包含指定词的元素。
注意：重点在于分辨出属性和值，然后通过公式对其进行引用。
<style>
[target] {
color: red;
}
[title=h2] {
background-color: blue;
}
</style>
<body>
<div>我是div元素</div>
<a target="div">hello</a>
<h2 title="h2">world</h2>
</body>
4.后代选择器：又称为包含选择器，可以选择作为某元素后代的元素。
- 全选所有的后代：选择器之间用空格分隔；
- 后代选择器的进一步说明：通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。
.home span {
color: yellow;
font-size: 40px;
}
<div class="home">
<span>啦啦啦啦</span>
<div class="box">
<p>我是p元素</p>
<span class="home1">呵呵呵呵</span>
</div>
<div class="home-item">
<div class="item">
<p>
<span class="home1">哈哈哈哈</span>
</p>
</div>
</div>
</div>
<div class="home-unselected">不会变色</div>
5.子组合器：（>）被放在两个 CSS 选择器之间，它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。
.home > span {
background-color: green;
}
<div class="home">
<span>hello</span>
<span>喜喜</span>
<div class="box">
<p>我是p元素</p>
<span class="home-item">呵呵呵呵</span>
</div>
<span>zyjzyj</span>
<span class="hei">嘿嘿</span>
<div class="content">
<div class="desc">
<p>
<span class="home-item">哈哈哈哈</span>
</p>
</div>
</div>
</div>
**6.兄弟选择器：**分为通用兄弟选择器（~）和相邻兄弟选择器 (+) 。
- 相邻兄弟选择器： (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父 element 的子元素，则第二个元素将被选中。
- 通用兄弟选择器：（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。
<body>
<div class="home">
<div>hello</div>
<div class="box">world</div>
<div class="content">a</div>
<div>beautiful</div>
<div>universal</div>
<p>pppppp</p>
</div>
</body>
<style>
.box + .content {
color: red;
}
.box ~ div {
font-size: 30px;
background-color: blue;
color: orange;
}
</style>
效果：
7.选择器列表：CSS 选择器列表（,）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。
选择器列表的分类
- 并集选择器：在开发中通常为了给多个元素设置相同的样式，两个选择器之间用逗号（，）分割。
并集选择器的详细解释：当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白（字符）。 - 交集选择器：在开发中精准的选择某一个元素。
<style>
/* 并集选择器 */
.box1,p,h1 {
color: red;
font-size: 40px;
}
</style>
<body>
<!-- 并集选择器 -->
<p>我是p元素</p>
<h1>我是h1元素</h1>
<div class="box1">我是div1元素</div>
<div class="box2">我是div2元素</div>
<br>我是脑title</br>
</body>
/*交集选择器*/
<style>
div.box {
color: green;
}
</style>
<body>
<!--交集选择器-->
<div class="box">我是div元素</div>
<p class="box">我是p元素</p>
</body>
伪类和动态伪类和伪元素的说明见文章添加链接描述
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
