在线问答5

这个屌丝很懒，什么也没留下！

热门标签

CSS选择器_css选当前类的父类的兄弟类

作者：在线问答5 | 2024-07-07 15:33:07

踩

css选当前类的父类的兄弟类

CSS选择器

1 基本选择器
2 复合选择器
3 CSS3新增的伪类选择器

1 基本选择器

基本选择器用来在CSS中定位页面中的标签。

1、标签名选择器

标签名{
    样式属性: 值;
}
1
2
3

2、类选择器。若使用类选择器，则标签中必须有class属性。格式为：

.类名{
    样式属性: 值;
}
1
2
3

3、id选择器。若使用id选择器，则标签中必须有id属性。格式为：

#id名{
    样式属性: 值;
}
1
2
3

4、通配符选择器。通配符选择器用来匹配所有的元素，格式为：

*{
    样式属性: 值;
}
1
2
3

2 复合选择器

2.1 属性选择器

样式	含义	示例
`标签名[属性名]`	选择含有给定属性的标签	`p[class]`：选择p标签中含有class属性的元素
`标签名[属性名=值]`	选择等于给定属性值的标签	`p[class=p2]`：选择p标签中含有class属性，class属性值为p2的元素
`标签名[属性名^=值]`	选择给定属性值是以某个字符开头的	`p[id^=abc]`：选择p标签中含有id属性，且id属性以abc开头的元素
`标签名[属性名$=值]`	选择给定属性值是以某个字符结尾的	`p[id$=d2]`：选择p标签中含有id属性，且属性值以d2结尾的元素
`标签名[属性名*=值]`	选择包含给定属性值的标签	`p[class*=p]`：选择p标签中含有class属性，且class属性值包含p的元素

2.2 关系选择器

2.2.1 子元素选择器“>”

子元素择器主要用来选择某个元素的第一级子元素，子元素选择器用>进行连接

    <div>
        <p>橘猫吃不胖</p>
        <span>橘猫吃不胖</span>
    </div>
1
2
3
4

选择div标签下面的p标签中的文字颜色变成红色，CSS样式为：

div > p{
    color: red;
}
1
2
3

在这里插入图片描述

2.2.2 相邻兄弟选择器“+、~”

相邻兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。相邻兄弟关系选择器用+、~进行连接。

（1）临近兄弟选择器
该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，第二个元素必须紧跟第一个元素。相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用。

<body>
    <div>
        <p>橘猫吃不胖</p>
        <span>橘猫吃不胖</span>
    </div>
    <p>橘猫吃不胖</p>
    <span>橘猫吃不胖</span>
</body>
1
2
3
4
5
6
7
8

匹配p标签后的第一个span标签：

p + span{
    color: peru;
}
1
2
3

在这里插入图片描述
（2）普通兄弟选择器
普通兄弟选择器使用 “~”来连接前后两个选择器。选择器中的两个元素有同一个父元素，但第二个元素不必紧跟第一个元素。普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用。

<body>
    <div>
        <p>橘猫吃不胖</p>
        <p>橘猫吃不胖</p>
    </div>
    <p>橘猫吃不胖</p>
    <p>橘猫吃不胖</p>
</body>
1
2
3
4
5
6
7
8

匹配div标签后的所有p标签：

div ~ p{
    color: powderblue;
}
1
2
3

在这里插入图片描述

2.3 并集（复合）选择器

复合选择器用逗号“,”分隔，表示同时选中多个元素。

    <div class="jm">橘猫吃不胖</div>
    <span>橘猫吃不胖</span>
    <p id="p1">橘猫吃不胖</p>
1
2
3

让div、span、p元素同时显示粉色，字体放大：

.jm, #p1, span {
    color: deeppink;
    font-size: 20px;
}
1
2
3
4

在这里插入图片描述

2.4 后代选择器

后代选择器用来选择某元素下面的子孙后代，中间用空格隔开。格式：

父级 子集{
    属性: 值;
}
1
2
3

示例代码如下：

    <div id="jm">
        <div>
            <p id="p1">橘猫吃不胖</p>
        </div>
        <p id="p2">橘猫吃不胖</p>
    </div>
    <p>橘猫吃不胖</p>
1
2
3
4
5
6
7

选择div标签内所有p标签：

#jm p {
    color: pink;
}
1
2
3

在这里插入图片描述

2.5 伪类选择器

2.5.1 动态伪类

样式	含义
a:hover	当鼠标悬停（移动）在目标对象上时的样式
a:visited	被访问过的超链接的样式
a:link	超链接未被访问的样式
a:active	激活超链接时的样式

它们生效的顺序遵循“爱恨原则”，即 LoVe/HAte 。

2.5.2 结构化伪类选择器

样式	含义
:root	匹配文档的根元素，在HTML中，页面的根元素是`<html>`，也就是说该选择器设置的样式，对页面的所有元素均有效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
:not(element)	匹配不是element的元素
:only-child	匹配只有一个子元素的元素
:first-child	匹配父元素中的第一个子元素
:last-child	匹配父元素中的最后一个子元素
:nth-child(n)	匹配父元素中正数第n个元素
:nth-last-child(n)	匹配父元素中倒数第n个元素

:not(element) 示例：

    <div>
        <p>橘猫</p>
        <p>吃不胖</p>
        <div>橘猫吃</div>
        <div>不胖</div>
    </div>
1
2
3
4
5
6

选择div下不是p标签的元素：

/* 注意div与:not()选择器之间有一个空格，否则可能不起作用 */
div :not(p){
    color: red;
}
1
2
3
4

在这里插入图片描述
:only-child 示例：

    <div>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <div>
            <p>举头望明月</p>
        </div>
    </div>
    <div>
        <p>低头思故乡</p>
    </div>
1
2
3
4
5
6
7
8
9
10

选择div中只有一个子元素的元素：

/* div与:only-child选择器之间有一个空格，否则可能不起作用 */
div :only-child {
    /* 将只有一个标签的div标签选择出来，并修改文字颜色为蓝色 */
    color: slateblue;
}
1
2
3
4
5

在这里插入图片描述
:first-child :last-child 示例：

    <div>
        <span>静夜思</span>
        <p>李白</p>
        <div>床前明月光</div>
    </div>
1
2
3
4
5

选择div中第一个元素和最后一个元素：

/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* 选择div标签中第一个元素，将其背景颜色改为橙色 */
div :first-child {
    background-color: orange;
}
/* 选择div标签中最后一个元素，将其文字颜色变为粉色 */
div :last-child {
    color: plum;
}
1
2
3
4
5
6
7
8
9

在这里插入图片描述
:nth-child(n) :nth-last-child(n) 示例：

    <div>
        <p>A</p>
        <p>B</p>
        <p>C</p>
        <p>D</p>
        <p>E</p>
    </div>
1
2
3
4
5
6
7

选择div下第2个和倒数第3个元素：

/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* div中正数第二个元素背景颜色变为粉色 */
div :nth-child(2) {
    background-color: pink;
}
/* div中倒数第三个元素文字颜色变为红色 */
div :nth-last-child(3){
    color: red;
}
1
2
3
4
5
6
7
8
9

在这里插入图片描述

2.6 伪元素选择器

2.6.1 before和after

伪元素选择器是针对CSS中已经定义好的元素使用的选择器。

样式	含义
::before	在匹配的元素之前添加指定的内容，要和content结合使用
::after	在匹配的元素之后添加指定的内容，要和content结合使用

格式为：

元素::before{
    content: "插入的内容"/url();
}
1
2
3

示例代码：

    <p>床前明月光</p>
    <p>疑是地上霜</p>
1
2

在所有p标签之前添加“静夜思”：

p::before {
    /* 在所有p标签前面添加“静夜思” */
    content: "静夜思";
}
1
2
3
4

在这里插入图片描述

2.6.2 段落的伪元素

样式	含义
p:first-line	选中段落第一行的
p:first-letter	选中段落首字母的

示例代码：

    <p class="p1">橘猫吃不胖<br>橘猫吃不胖</p>
    <p class="p2">橘猫吃不胖</p>
1
2

CSS样式如下：

.p1:first-line {
    /* 段落第一行字体大小为40像素 */
    font-size: 40px;
}
.p2:first-letter {
    /* 段落第一个字颜色为深粉色 */
    color: hotpink;
}
1
2
3
4
5
6
7
8

在这里插入图片描述

3 CSS3新增的伪类选择器

伪类	说明
elem:nth-child(n)	选中父元素下的第n个子元素
elem:nth-last-child(n)	选择父元素倒数第n个子元素
elem:last-child	选中最后一个子元素
elem:only-child	选择元素，该元素是父元素唯一的子元素
:not(elem)	选择非elem元素的每一个元素
elem:empty	选中不包含子元素和内容的elem类型的元素
elem:target	选中当前活动的elem元素
:enabled	选择可用的表单元素
:disabled	选择禁用的表单元素
:checked	选择被选中的表单元素
elem:nth-of-type(n)	匹配第n个elem元素
elem:first-of-type	匹配第1个elem元素
elem:last-of-type	匹配第2个elem元素
elem:only-of-type	匹配只有一个子元素，且子元素为elem的元素

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】