一.基础选择器
1.ID选择器
/* div{}标签选择器 */
#box1{
width: 300px;
height: 200px;
background-color: red;
}
#box2{
width: 100px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<!-- 公有属性：style id -->
<!-- 需要写ID属性 style标签中#标识对应标签的ID属性 -->
<div id="box1">box1</div>
<div id="box2">box2</div>
<!--
id选择器具有唯一性
只能设置一个 其他人不能再使用同样的id值(就比如身份证只能有一个 其他人的身份证号不能和其他人一样)
-->
2.类选择器
.div1{
width: 200px;
height: 100px;
background-color: rgb(198, 113, 247);
}
.div2{
width: 200px;
height: 100px;
background-color: rgb(112, 241, 241);
}
</style>
</head>
<body>
<!-- class属性标识类 -->
<!-- 需要写class属性 style标签中，标识对应标签的class属性值 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
小技巧：
长名称或词组可以使用中横线来为选择器命名。text-color-red
不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意
3.多类选择器
<style>
.div {
width: 200px;
height: 200px;
}
.box {
background-color: aqua;
}
.text {
color: yellow;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<!--
多类选择器/类选择器与id选择器的区别
和id选择器区别；
id一个标签只能拥有一个id值 一个标签可以拥有多个class
id不能使用其他标签已有的id值 class可以使用其他标签已有的class值
-->
<div class="div1 box text">测试DIV</div>
<br>
<div class="box">测试2</div>
</body>
注意：
样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开
多类名选择器在后期布局较为复杂的情况下使用较多。
4.通配选择器
/* 通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，
通配符；能匹配页面上的所有元素
*/
注意：权重很低
通配选择器较少使用。
5.链接选择器
<style>
/* 链接伪类有四个
*/
/* 1.未访问的链接状态 */
a:link {
color: aqua;
}
/* 2.访问过后的链接状态 */
a:visited {
color: blue;
}
/* 3.鼠标移动到链接上的状态 */
a:hover {
color: red;
}
/* 4.鼠标按下未松开的状态 */
a:active {
color: darkolivegreen;
}
/* link==visited==hover==active 顺序必须不能颠倒 */
</style>
</head>
<body>
<!-- 访问过后的链接，不是指我们一定要放到a标签的harf属性 通过a标签去访问 而是浏览器有没有 -->
<a href="./15.基础选择器-通配符.html">链接访问</a>
</body>
6.结构伪类选择器
-
:first-child 获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
-
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
:first-child{} p:first-child { /* 选择所有元素的第一个子元素,如果第一个子元素为p则匹配成功*/ color: red; } p:last-child { /*选择所有元素的最后一个子元素,如果最后一个子元素为p则匹配成功*/ color: blue; } /* nth-child(n): 选择所有元素下第n个子元素 */ p:nth-child(2) { /*选择所有元素的第二个子元素,如果第二个子元素为p则匹配成功*/ color: blue; } span:nth-child(odd) { /* 选择所有元素下为奇数的子元素 如果为span则匹配成功*/ background-color: blueviolet; } span:nth-child(even) {/* 选择所有元素下为奇数的子元素 如果为span则匹配成功*/ background-color: blueviolet; } p:nth-child(3n) { /*选择所有元素下为三的倍数的那个子元素 如果为span则匹配成功*/ color: purple; } p:nth-last-child(2) { /*选择所有元素的倒数二个子元素,如果倒数二个子元素为p则匹配成功*/ color: pink; } <div>body下面的第一个div</div> <div>body下面的第二个div</div> <div>body下面的第二个div</div> <span>第1个span</span> <span>第2个span</span> <div> <span>div中的span1</span> <span>div中的span2</span> </div> -
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
/* 选择父元素中的第一个p子元素 */ p:first-of-type { background-color: red; } /* 选择父元素中的最后一个p子元素 */ p:last-of-type { background-color: blue; } /* 选择父元素中的第二个span子元素 */ span:nth-of-type(2) { color: yellowgreen; font-weight: bold; } /* 选择父元素中倒数第二个span子元素 */ span:nth-last-of-type(2) { color: cornflowerblue; font-weight: bold; } /* 选择父元素中为2的倍数的span子元素 */ span:nth-of-type(2n) { font-weight: bold; color: brown; } /* 选择父元素中倒数 2的倍数的span子元素 */ span:nth-last-of-type(2n) { font-weight: bold; color: brown; } <span>body下面的第一个span子元素</span> <p>body下面的第一个p子元素</p> <p>body下面的第二个p子元素</p> <div> <span>div中的第一个span子元素</span> <span>div中的第二个span子元素</span> <p>div下面的第一个p子元素</p> </div> 区别在于： span:first-child span必须是在父元素的第一个子元素才能选中 即选中父元素中第一个子元素 且第一个子元素为span --- 结构 span:first-of-type表示的是 选中 父元素中 第一个span元素 即使span不是父元素的第一个元素也能被选中 ，即选中父元素中第一个子元素为 冒号 前边的元素 --- 类型 -
:only-child匹配没有任何兄弟元素的元素
<style>
:only-child { /* 匹配所有没有任何兄弟的元素 */
color: indigo;
}
.div1:only-child { /* 匹配没有任何兄弟的元素 且这个元素的class值有div1 */
color: hotpink;
}
</style>
<body>
<div></div>
<div>
<div class="div1">div下面唯一的没有任何兄弟元素的div子元素</div>
</div>
<p></p>
<p></p>
<p>1</p>
<span>没有兄弟span元素</span>
</body>
-
:only-of-type匹配所有元素 这个元素没有其他相同类型的兄弟元素
<style>
:only-of-type { /* 匹配所有元素 */
font-size: 30px;
}
/* 匹配所有元素，且p元素没有任何一个同类型的兄弟元素 p元素有p标签兄弟元素，匹配不成功 */
p:only-of-type {
font-size: 30px;
}
/* 匹配span元素，且span元素没有任何一个同类型的兄弟元素 匹配成功 */
span:only-of-type {
font-size: 30px;
}
/* 匹配li元素，且span元素没有任何一个同类型的兄弟元素 匹配成功 */
li:only-of-type {
font-size: 28px;
}
</style>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<span>body下没有兄弟的span元素</span>
<li>body下没有兄弟的li元素</li>
</body>
-
:empty 选择的元素里面没有任何的内容或子节点
:empty { /* 匹配所有没有内容和子节点的元素 */
width: 100px;
height: 50px;
background-color: red;
}
p:empty { /* 匹配所有没有内容和子节点的元素 且这个元素为p元素 */
width: 100px;
height: 50px;
background-color: red;
}
<body>
<div></div>
<p></p>
<p></p>
<p>1</p>
</body>
-
:root 匹配文档的根节点 html
:root { /*匹配文档的根元素*/ background-color: #dde6ef; }E:nth-child和E:nth-of-type的区别：
-
E:nth-child ：对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否与E匹配
-
E:nth-of-type：对元素里面指定子元素进行排序，先去匹配，然后再找第n个孩子
-
为了方便记忆，把CSS的结构伪类选择器归为四类：
-
通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth-last-child(n)（逆序过滤）
-
通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和 :nth-last-of-type(n)（逆序过滤）
-
特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type
-
特定状态的元素：:root（根节点）
-
:only-child（独子元素：某标签只有一个子元素 则子元素被选中）
span为某个元素唯一的子元素 则唯一子元素span选中 span:only-child { background-color: red; } -
:only-of-type（独子类型元素：）
p某个元素中唯一的span元素 则唯的span子选中 p:only-of-type {background-color: red;} -
:empty（孤节点）
当前span元素没有任何子元素包括文本、空格、换行符等，若其有一个子元素 但被注释了，也不能匹配成功注释 也是一个标签 叫 注释标签 span:only-of-type {background-color: red;}
扫一扫
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
