CSS3复杂选择器

最新推荐文章于 2024-02-21 08:42:56 发布

小张biubiu

最新推荐文章于 2024-02-21 08:42:56 发布

阅读量165

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_45178455/article/details/102981289

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、复杂选择器

兄弟选择器
特点：通过位置关系来匹配元素，只能向后找，不能向前找。

兄弟选择器-相邻兄弟选择器
紧紧挨在一起的元素称为相邻兄弟选择器。
语法：

选择器1+选择器2{
			样式声明;
	}

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #d1+p{
        background-color:red;
    }
</style>
</head>
<body>
    <div id="d1">这是一个div</div>
    <p>div 的兄弟1</p>
    <p>div 的兄弟2</p>
    <p class="p1">div 的兄弟3</p>
    <p class="p1">div 的兄弟4</p>
</body>
</html>

实现效果：
在这里插入图片描述
兄弟选择器-通用选择器
匹配后面所有。
语法：

选择器1~.选择器2{
			样式声明;
	}

举个栗子：

<style>
    #d1+p{
        background-color:red;
    }
    #d1~.p1{
        font-size:30pt;
    }
</style>

实现效果：
在这里插入图片描述
2.属性选择器
允许使用元素所附带的属性及其值来匹配页面的元素
语法：

[attr=值]{
		样式声明;
	}

详解：
[attr]
attr：表示一个具体属性名称
作用：匹配附带attr属性的元素
ex：[id]：匹配页面中所有附带id属性的元素

elem[attr]
elem：表示页面中某一具体元素
ex：div[id]：匹配页面中所有附带id属性的div元素

[attr1][attr2]… …
作用：匹配既具备attr1属性同时也具备attr2属性的元素
ex：p[id][class]：匹配页面中既id属性又有class属性的p元素

[attr=value]
value：表示某一具体数值
作用：匹配attr属性值为value的所有元素
ex：input[type=text]：匹配页面中的所有文本框

[class~=value]
作用：用在多类选择器，匹配class属性值是以空格隔开的值列表，并且value是该值列表中的一个独立的值的元素
ex：div[class~=heavy]：匹配div元素class属性值列表中包含heavy值的div

[attr^=value]
^=：以…作为开始
作用：匹配attr属性值以value作为开始的元素
ex：[class^=p-]：匹配页面中所有class属性中以p-开始的元素

[attr*=value]
*=：包含…字符
作用：匹配attr属性值中包含value字符的元素
ex：[class *=p]：匹配页面中所有class属性中包含p的元素

[attr$=value]
$=：以…作为结束
作用：匹配attr属性值以value作为结尾的元素
ex：[id $=“1”]：匹配页面中所有id以1作为结尾的元素

属性选择器中，所有的值，都可以使用""或’'引起来
[class=“1”]
[class=‘1’]
[class=1]

3.伪类选择器
目标为类
作用：突出显示HTML锚元素
语法：

elem:target

举栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    div:target{
        font-weight:bold;
        color:red;
        background-color:green;
    }
</style>
</head>
<body>
    <a href="#NO1">第一章</a>
    <div style="height:5000px;"></div>
    <div id="NO1">CSS</div>
    <div style="height:2000px;"></div>
</body>
</html>

显示效果：
在这里插入图片描述
元素状态伪类
作用
匹配元素已启用，被禁用，被选中的状态(主要应用在表单控件上)
语法
enabled
匹配每个已启用(为被禁用)的元素
disabled
匹配每个被禁用的元素
checked
匹配每个被选中的元素(如：radio、checkbox)

结构伪类
作用
通过元素的结构关系，来匹配元素
语法
:first-child
匹配属于其父元素中的首个子元素
:last-child
匹配属于其父元素中的最后一个子元素
:nth-child(n)
匹配属于其父元素中的第n个子元素
:empty
匹配没有子元素的元素。(注意：也不能包含文本)
:only-child
匹配属于其元素中的唯一子元素

否顶伪类
作用
将满足条件的选择器匹配的元素排除出去
语法
:not(选择器)

伪元素选择器
伪类：匹配元素的不同状态，匹配到的是元素
为元素：匹配的某个元素中的某部分内容

:first-letter 或 ::first-letter
匹配某元素的首字符

:first-line 或 ::first-line
匹配某元素的首行字符

::selection
匹配被用户选取的部分(只允许修改文本颜色和背景颜色)

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #d1:first-letter{
        font-size:20px;
        font-weight:bold;
        color:red;
    }
    #d1:first-line{
        font-weight:bold;
    }
    #d1::selection{
        color:orangered;
        background-color:black;
    }
</style>
</head>
<body>
    <div id="d1">The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
            The pay and the gain are in direct proportion<br>
    </div>
</body>
</html>

显示效果：
在这里插入图片描述

小张biubiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3复杂选择器

一、复杂选择器兄弟选择器特点：通过位置关系来匹配元素，只能向后找，不能向前找。兄弟选择器-相邻兄弟选择器紧紧挨在一起的元素称为相邻兄弟选择器。语法：选择器1+选择器2{ 样式声明; }举个栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫

专栏目录