选择器
- 引入方式
- 基础选择器
- 复合选择器
- 属性匹配选择器
- 结构伪类选择器
- 伪元素选择器
引入方式
1：外联
<!-- css引入方式1：外联 外联与内嵌优先级相同，取决于加载顺序 -->
<link rel="stylesheet" href="./样式.css">
2：内嵌
<!-- css引入方式2：内嵌（内部样式） 位于 head 标签内 -->
<style>
.myclass{
background-color: pink;
}
</style>
3：内联
<!-- css引入方式3：内联 优先级最高 -->
<div style="background-color: red;"></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;
}
</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>
效果:
: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;
}
a:visited{
background-color: #546aff;
}
a:hover{
background-color: #e31dff;
}
a:active{
background-color: #22a200;
}
input[type="text"]:focus{
background-color: #93f879;
}
input[type="checkbox"]:checked{
width: 30px;
height: 30px;
}
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
<style>
div::after{
content: "啦啦啦啦"; /* 在选定元素的内容前插入内容 */
color: #ef7878;
}
div::before{
content: "嘻嘻嘻嘻"; /* 在选定元素的内容后插入内容 */
color: #93f879;
}
p::selection{
background-color: #7ffff0;
}
p::first-letter{
font-size: 50px;
font-weight: 700;
}
textarea::first-line{
color: #e10730;
}
</style>
<div>文字</div>
<p>可能产生即从次你说说对决是的上的点击菜单扫判搜索</p>
<textarea rows="5" cols="10">可能产生即从次你说说能产生即从次你说说对决是的上的点击菜单搜索</textarea>
效果:
