CSS——复合类型选择器

最新推荐文章于 2024-03-28 23:13:15 发布

时光·漫步zth

最新推荐文章于 2024-03-28 23:13:15 发布

阅读量2.2k

点赞数 2

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/qq_41573234/article/details/80371928

版权

前端同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

1. 后代选择器（包含选择器）

后代选择器书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了。

【注】可以在前面加上类或者ID选择器, 只要标签上有该class 或者id属性 ,选择器的嵌套尽量不超过三级。

【例】

<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span{
   color:red
}
span
{
  color:blue;
}
</style>
</head>
<body>
<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效
</body>
</html>

执行结果：

2. 子代选择器

与后代选择器相比，子代选择器只能选择作为某元素子元素的元素。子代选择器用大于号作为结合符。如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，要使用子元素选择器。

格式：p>span{color:blue;}

后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”
子选择器：也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。

【例】

<html>
<head>
<title>后代选择器</title>
<style type="text/css">
hl>strong{
	color:red;
}
</style>
</head>
<body>
<hl><strong>我变红色</strong></hl>
  <hl><em><strong>我不变色</strong></em></hl>
</body>
</html>

执行结果：

3. 相邻兄弟元素选择器

相邻兄弟元素选择器可选择紧接在另一元素后的元素，且二者有相同父元素，相邻兄弟元素选择器使用“+”作为结合符。

如果需要选择紧紧接在另一元素后的元素而且者有相同父元素，可以使用相邻兄弟元来选择器。

【例】如果要将紧接在h1元素后出现的段落变为黄色，可以这样写:

h1+p{

color:yellow;

}

4. 通用兄弟元素选择器

通用兄弟元素选择器用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，通用兄弟选择器用 "~" 作为结合符。

【例】要使h1元素后的p元素都变为蓝色，可以这样写:

h1~p{

color:blue;

}

5. 伪类选择器

伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。以冒号隔开。

link 选择器： link 选择器匹配超链接（未点击）。

visited 选择器： visited 选择器匹配用户已经访问过的超链接。

hover 选择器： hover 选择器匹配用户鼠标悬停（经过）在其上的任意元素。

active 选择器： active 选择器匹配当前被用户激活的元素（一般情况下为鼠标点击该元素）。

focus 选择器： focus选择器匹配获得焦点的元素，常用于 input 元素。

input : required 选择必填表单域

input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域

input : focus : valid 选择当前聚焦的且含有合法输入值的表单域

【例】

input : required {  
border : 1px solid red;  
}  
  
//输入值不符合格式时，表单右边出现×  
input : :focus : invalid {  
background:url('../img/cross.png') no-repeat right;  //×图片  
}  
  
//输入值符合格式时，表单右边出现√  
input : :focus : valid {  
background:url('../img/tick.png') no-repeat right;  //√图片  
}

【例】

a:link{ color:#009;} 
a:visited{ color:#000066;} 
a:hover{ color:#0099FF;} 
a:active{ color:#0000cc;}

6. 伪元素选择器

伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对 CSS 中已经定义好的伪元素使用的选择器，它的使用方法如下：

选择器：伪元素{ 属性: 值}

伪元素选择器也可以与类配合使用，使用方法如下：

选择器类名: 伪元素 {属性：值}

在css中提供的伪元表选择器有4个，分别如下：

first-letter: 该选择器对应的CSS样式对指定对象内的第一个字符起作用。
first-line: 该选择器对区的CSS样式对指定对象内的第一行内容起作用。
before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
after: 该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容。

：first-letter

选择“块级元素”文本段落中的首个字符，只能对“块级元素”生效。

该选择器可以设置的值有：

font属性
color属性
background属性
margin属性
padding属性
border属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
float属性
clear属性

使用示例如下：

p: first-letter {
    border: 2px solid black;
    color: blue;
    border-radius: 5px;
    padding: 5px;
}

：first-line

选择“块级元素”文本段落中的首行文本，只能对“块级元素”生效。

该选择器可以设置的值有：

font属性
color属性
background属性
word-spacing属性
letter-spacing属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
clear属性

使用示例如下：

p: first-line {
    border: 2px solid black;
    letter-spacing: 5px;
    color: blue;
}

：before

在指定的选择器之前插入一段内容。插入的内容默认为“行内元素”，可以通过“display”强制转换显示类型。

代码示例：

/*插入文本*/
p:before {
    content: "插入文本";
    color: red;
}

/*插入图片*/
div:before {
    content: url(../img.jpg);
    width: 100px;
    height: 100px;
}

：after

在指定的选择器之后插入一段内容，使用方式和“:before”一样。插入的内容默认也是为“行内元素”，同样可以通过“display”强制转换显示类型。代码示例同“:before”。

提示：使用“:before”和“:after”伪元素选择器不仅能为指定的元素添加文字、图片和各种利用“width”、“height”、“border”制作出来的形状，甚至还能添加音频、视频这些多媒体文件，而且具有高度自定义性。

7. 群组选择器

要为不同的HTML对象定义相同的样式时，可以采用群组声明。 以逗号隔开，选中一组内容。

【例】 h2 元素和段落的文本都设为灰色，则可以使用以下声明：

h2, p { color: gray; }

8. 标签指定选择器

例：

p.aa :选中 class="aa" 的p标签

p#aa :选中 id="aa" 的p标签

9. 通用选择器（通配符选择器）

通用选择器匹配文档中的所有元素。它是最基本的选择器，不过很少使用，因为匹配过于广泛。写法如下：

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*通用选择器*/
        * {
            color: red;
        }
    </style>
</head>

10. 属性选择器

在使用属性选择器时，需要声明属性与属性值。

【例】[ att=val] // att 代表属性，val 代表属性值

<style type="text/css">
        [id=mrl] {
            color: red;
        }
    </style>

该选择器所针对的既不是某个标签，也不是类名，或者ID，它是将一个标签的属性作为选择器来使用，最常用的地方就是涉及到属性多而杂的表单元素。该类选择器的条件如下：

[attr]：选择定义attr属性的元素，忽略属性值；

[attr="val"]：选择定义attr属性，且属性值为val的元素；

[atte^="val"]：选择定义attr属性，且属性值以字符串val开头的元素；

[attr$="val"]：选择定义attr属性，且属性值以字符串val结尾的元素；

[attr*="val"]：选择定义attr属性，且属性值包含字符串val的元素；

[attr~="val"]：选择定义attr属性，且属性值具有多个值，其中一个为字符串val的元素。

[attr|="val"]：选择定义attr属性，且属性值为连字符分割的多个值，其中第一个为字符串val的元素；

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
    /*[attr]*/
    [title] {
        color: red;
    }
    /*[attr="val"]*/
    [title="text"] {
        color: blue;
    }
    /*[attr^="val"]*/
    [class^="msg"] {
        color: darkgray;
    }
    /*[attr$="val"]*/
    [id$="msg"] {
        color: #313BA8;
    }
    /*[attr*="val"]*/
    [class*="AA"] {
        width: 100px;
        height: 100px;
        background-color: rgba(28,147,77,0.75);
        margin-bottom: 20px;
    }
    /*[attr~="val"]*/
    [class~="class1"] {
        color: purple;
    }
    /*[attr|="val"]*/
    [id|="aa"] {
        color: brown;
        border: 1px solid black;
        padding: 5px;
    }

    </style>
</head>

<body>
    <p title="">文本内容01</p>
    <p title="text">文本内容02</p>

    <p class="msg_hi">Hi!</p>
    <p class="msg_Hello">Hello!</p>

    <p id="Hi_msg">Hi!</p>
    <p id="Hello_msg">Hello!</p>

    <div class="topAAarea"></div>
    <div class="middleAAarea"></div>

    <p class="class1 class2">文本内容03</p>
    <span id="aa-bb">文本内容04</span>
</body>

</html>

时光·漫步zth

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS——复合类型选择器

1. 后代选择器（包含选择器）后代选择器书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了。【注】可以在前面加上类或者ID选择器, 只要标签上有该class 或者id属性 ,选择器的嵌套尽量不超过三级。【例】&lt;html&gt;&lt;head&gt;&lt;title&gt;后代选择器&lt;/titl...
复制链接

扫一扫