选择器
- 引入方式
- 基础选择器
- 复合选择器
- 属性匹配选择器
- 结构伪类选择器
- 伪元素选择器
引入方式
1：外联
<!-- css引入方式1：外联 外联与内嵌优先级相同，取决于加载顺序 -->
<link rel="stylesheet" type="text/css" href="./index.css">
2：内嵌
<!-- css引入方式2：内嵌（内部样式） 位于 head 标签内 -->
<style>
.myclass{
background-color: pink;
}
</style>
3：内联
<!-- css引入方式3：内联 优先级最高 -->
<div style="background-color: red;width: 100px;"></div>
基础选择器
id选择器、类选择器、标签选择器、通配符选择器
<style>
div{
/* 优先级提到最高（但同样可能会被覆盖）： !important */
background-color: green !important;
}
/* 标签选择器 */
nav{
width: 100%;
height: 75px;
background-color: yellow;
}
/* id选择器 */
#mynav{
width: 200px;
height: 200px;
background-color: green;
}
/* 类选择器 */
.myclass{
background-color: pink;
}
/* 通配符选择器 */
*{
margin: 0;
padding: 0;
}
/* 优先级：id选择器 > 类选择器 > 标签选择器 > 通配符选择器 */
</style>
复合选择器
后代选择器、直系选择器、并集选择器、交集选择器、兄弟选择器
<style>
/* css选择器的权重计算： 内联（1000） > id（100）> class（10）> 标签（1）> *（0） */
#page_header .left img{
/* id为 page_header的标签下面的类为 left的标签下面的 img标签被选中 */
}
/* 后代选择器 */
#page_header .mynav .left{ /* 100+10+10 */
/* 不一定是父子关系 */
color: green;
}
/* 直系选择器 */
#page_header>nav>.left{ /* 100+1+10 */
/* 必须是父子关系 */
color: red;
}
/* 并集选择器 */
nav,li{
/* 逗号（表示：和）*/
font-size: 24px;
}
/* 交集选择器 */
li.left{
/* 紧挨在一起，中间无空格 */
background-color: aquamarine;
}
/* ~所有弟弟 +紧邻的弟弟 */
#bro+span {
background-color: green;
}
</style>
属性匹配选择器
^、*、$
<style>
/* 全匹配 */
div[class="yangshi"]{
background-color: gold;
}
/* 开头匹配 */
input[type^="t"] {
border: none;
border-bottom: 1px solid red;
}
/* 结尾匹配 */
input[type$="d"] {
border: none;
border-bottom: 1px solid red;
}
/* 包含 */
input[type*="o"] {
border: none;
border-bottom: 1px solid red;
}
</style>
结构伪类选择器
:first-child、:first-of-type
<style>
#myDiv :first-child {
background-color: #84c284;
}
#myDiv span:first-of-type {
background-color: #e6a9fc;
}
#myDiv2>:first-child {
background-color: #7eb6ff;
}
#myDiv2>span:first-of-type {
background-color: #ffe054;
}
</style>
<div id="myDiv">
<div>我是myDiv的第 1 个孩子div</div>
<div id="myDiv_2Son">
<p>我是myDiv_2Son的第 1 个孩子p</p>
<span>我是myDiv_2Son的第 2 个孩子，第 1 个span</span>
</div>
<span>我是myDiv的第 3 个孩子，第 1 个span</span>
</div>
<div id="myDiv2">
<div>我是myDiv2的第 1 个孩子div</div>
<div id="myDiv2_2Son">
<p>我是myDiv2_2Son的第 1 个孩子p</p>
<span>我是myDiv2_2Son的第 2 个孩子，第 1 个span</span>
</div>
<span>我是myDiv2的第 3 个孩子，第 1 个span</span>
</div>
效果:
:nth-child(n)、:nth-of-type(n)（n从1开始）
<style>
#myDiv :nth-child(2) {
background-color: #84c284;
}
#myDiv p:nth-of-type(2) {
background-color: #e6a9fc;
}
</style>
<div id="myDiv">
<div>我是myDiv的第 1 个孩子div</div>
<div>我是myDiv的第 2 个孩子div</div>
<div id="myDiv_3Son">
<span>我是myDiv_3Son的第 1 个孩子span</span>
<p>我是myDiv_3Son的第 2 个孩子，第 1 个p</p>
<p>我是myDiv_3Son的第 3 个孩子，第 2 个p</p>
</div>
<p>我是myDiv的第 4 个孩子，第 1 个p</p>
<p>我是myDiv的第 5 个孩子，第 2 个p</p>
</div>
效果:
:nth-child(公式)
<style>
/* 选择div标签的奇数个 odd */
div:nth-child(2n-1){
background-color: #ecff7f;
}
/* 选择div标签的偶数个 even */
div:nth-child(2n){
background-color: #7e9aff;
}
/* 选择li标签的3的倍数个 */
li:nth-child(3n){
background-color: #ecff7f;
}
/* 选择li标签的第5个之后的标签（包括第5个） */
li:nth-child(n+5){
color: deeppink;
}
/* 选择li标签的第2个之前的标签（包括第2个） */
li:nth-child(-n+2){
color: #0fa612;
}
</style>
<div>我是第 1 个</div>
<div>我是第 2 个</div>
<div>我是第 3 个</div>
<div>我是第 4 个</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
效果:
:last-child、:last-of-type
<style>
#myDiv :last-child {
background-color: #84c284;
}
#myDiv p:last-of-type {
background-color: #e6a9fc;
}
</style>
<div id="myDiv">
<div id="myDiv_1Son">
<p>我是myDiv_1Son的第 1 个孩子，第 1 个p</p>
<p>我是myDiv_1Son的第 2 个孩子，第 2 个p</p>
<span>我是myDiv_1Son的第 3 个孩子span</span>
</div>
<p>我是myDiv的第 2 个孩子，第 1 个p</p>
<p>我是myDiv的第 3 个孩子，第 2 个p</p>
<div>我是myDiv的第 4 个孩子</div>
</div>
效果:
:only-child、:only-of-type
<style>
#myDiv :only-child {
background-color: #84c284;
}
#myDiv p:only-of-type {
background-color: #e6a9fc;
}
</style>
<div id="myDiv">
<div id="myDiv_1Son">
<div>我是myDiv_2Son唯一的孩子</div>
</div>
<div>我是myDiv的第 3 个孩子div</div>
<p>我是myDiv的第 4 个孩子，唯一的p</p>
</div>
效果:
:not()
<style>
#myDiv :not(:nth-child(2)) {
background-color: #84c284;
}
#myDiv2 :not(p) {
background-color: #e6a9fc;
}
</style>
<div id="myDiv">
<div>我是第 1 个孩子div</div>
<p>我是第 2 个孩子p</p>
<div>我是第 3 个孩子div</div>
</div>
<div id="myDiv2">
<div>div</div>
<p>p</p>
</div>
效果:
:hover、:link、:visited、:active、:focus、:checked、:disabled
一个冒号代表伪类，伪类是基于当前元素的某种状态
<style>
/*注意: :visited 应该在 :link 之后，:hover 必须位于 :link 和 :visited 之后， :active必须位于 :hover之后*/
a:link{
background-color: pink;
}
/* :link :visited 未访问时和已访问时 */
a:visited{
background-color: #546aff;
}
/* :hover 鼠标悬停在上面时 */
a:hover{
background-color: #e31dff;
}
/* :active 被激活时 */
a:active{
background-color: #22a200;
}
/* :focus 拥有焦点时 */
input[type="text"]:focus{
background-color: #93f879;
}
/* :checked 处于选中状态时 */
input[type="checkbox"]:checked{
width: 30px;
height: 30px;
}
/* :disabled 处于禁用状态时 */
button:disabled{
background-color: #fffb00;
}
</style>
<a href="./7.定位.html">超链接</a>
<input type="text">
<input type="checkbox">
<button disabled>按钮</button>
效果:
伪元素选择器
::before、::after、::selection、::first-line、::first-letter、::placeholder
两个冒号代表伪元素，伪元素是对元素中的特定内容进行操作
<style>
/* ::after 在选定元素的内容前插入内容 */
#myDiv::before{
content: "啦啦啦啦"; /* ::after ::before必须设置content属性，用来设置伪元素的内容，如果没有内容则引号留白即可 */
color: #e10730;
}
/* ::before 在选定元素的内容后插入内容 */
#myDiv::after{
content: "嘻嘻嘻嘻";
color: #0fa612;
}
/* ::selection 选定元素中被鼠标拖选中的文本样式 */
p::selection{
background-color: #dfff1e;
}
/* ::first-letter 选定元素的段落中首字母样式 */
p::first-letter{
font-size: 50px;
font-weight: 700;
}
/* ::first-line 选定元素的第一行文本样式 */
textarea::first-line{
color: #e10730;
text-decoration: line-through;
}
/* ::placeholder 选定元素的占位符文本的样式，通常用于 input 和 textarea 元素 */
input::placeholder {
text-align: center;
color: red;
}
</style>
<div id="myDiv">
<span>文字</span>
<div>文字</div>
</div>
<p>可能产生即从次你说说对决是的上的点击菜单扫判搜索</p>
<textarea rows="5" cols="10">可能产生即从次你说说能产生即从次你说说对决是的上的点击菜单搜索</textarea>
<input type="text" placeholder="哈哈哈">
效果:
