css复合选择器都有哪些
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css复合选择器都有哪些相关的知识，希望对你有一定的参考价值。
CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下：1.子选择器
复制代码
代码如下:
<style type="text/css">
#pic>img // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>
2.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p margin-top:50px;
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.包含选择器
复制代码
代码如下:
#header pfont-size:14px
#main p font-size:12
定义<div id = "header">包含框里的段落字体大小为14像素
定义<div id = "main">包含框里的段落字体大小为12像素.
4.多层选择器嵌套
复制代码
代码如下:
#wrap #header h2 span font-size:24px
#wrap #main h2 span font-size:14px
5.属性选择器
（1）匹配属性名选择器
div[class] font-size:24px;
使该选择器能够匹配div中设置了class属性的对象定义格式
（2)匹配属性值选择器
img[alt="图像"][title="图像"] border：solid 2px red：
给<img src="images/pic1.jpg" alt="图像" title=“图像”>定义样式
(3)模糊匹配属性值选择器
6.伪选择器和伪元素选择器
复制代码
代码如下:
<style type ="text/css">
a:linkcolor:#FF0000 /*正常链接状态下样式*/
a:visitedcolor:#0000FF /*被访问之后的样式*/
a:hovercolor:#00FF00 /*鼠标经过的样式*/
a:activecolor:#FF00FF /*超链接被激活的样式*/
</style> 参考技术A CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下，感兴趣的朋友可以学习下
1.子选择器
复制代码 代码如下:
<style type="text/css">
#pic>img // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>
2.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p margin-top:50px;
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.包含选择器
复制代码 代码如下:
#header pfont-size:14px
#main p font-size:12
定义<div id = "header">包含框里的段落字体大小为14像素
定义<div id = "main">包含框里的段落字体大小为12像素.
4.多层选择器嵌套
复制代码 代码如下:
#wrap #header h2 span font-size:24px
#wrap #main h2 span font-size:14px
5.属性选择器
（1）匹配属性名选择器
div[class] font-size:24px;
使该选择器能够匹配div中设置了class属性的对象定义格式
（2)匹配属性值选择器
img[alt="图像"][title="图像"] border：solid 2px red：
给<img src="images/pic1.jpg" alt="图像" title=“图像”>定义样式
(3)模糊匹配属性值选择器
6.伪选择器和伪元素选择器
复制代码 代码如下:
<style type ="text/css">
a:linkcolor:#FF0000 /*正常链接状态下样式*/
a:visitedcolor:#0000FF /*被访问之后的样式*/
a:hovercolor:#00FF00 /*鼠标经过的样式*/
a:activecolor:#FF00FF /*超链接被激活的样式*/
</style> 参考技术B
css复合选择器:
（1）交集选择器
“交集”复合选择器由两个选择器直接连接构成；其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器；这两个选择器之间不能有空格。
案列代码：
<!doctype html><html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>交集复合选择器</title>
<style type="text/css">
p
color:blue;
p.special
color:red;
.special:
color:green;
</style>
</head>
<body>
<p>普通段落文本（蓝色）</p>
<h3> 普通标题文本（黑色）</h3>
<p>指定了.special类别的段落文本（红色）</p>
<h3>指定了.special类别的段落文本(绿色)</h3>
</body>
</html>
（2）并集选择器
并集选择器简称“集体声明”；并集选择器是多个选择器通过逗号连接而成的。
案列演示：
<!doctype html><html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>并集选择器</title>
<style type="text/css">
h1,h2,h3,h4,h5,p
color:green;
font-size:1px;
h2.special,.special,#one
text-decoration:underline;
</style>
</head>
<body>
<h1>案例文字1</h1>
<h2>案例文字2</h2>
<h3>案例文字3</h3>
<h4>案例文字4</h4>
<h5>案例文字5</h5>
<p>案例文字p1</p>
<p>案例文字p2</p>
<p id="one">案例文字p3</p>
</body>
</html>
（3）后代选择器
css选择器中，还可以通过嵌套的方式对特殊位置的html 标记进行声明，例如当<p>与</p>之间包含<span></span>标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。
例如，假设有下面的代码：
<p>外层的文字，<span>中间的文字<b>内层的文字</b></span></p>外层是<p>标记，里面嵌套了<span>标记，<span>标记中又嵌套了<b>标记，则称<span>是<p>的子元素，<b>是<span> 的子元素。
<!doctype html><html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>后代选择器</title>
<style type="text/css">
p span
color:blue;
span
color:yellow;
</style>
</head>
<body>
<p>嵌套使<span>用css（蓝色）</span>标记的方法</p>
嵌套之外的<span>标记（黄色）</span>不生效
</body>
</html>
详解CSS样式选择器都有哪些?
参考技术A
CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS选择器分类：
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器：
定义：以html标签作为选择器
2、class类选择器：
定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：
同一个元素可以设置多个类，之间用空格隔开：
3、ID选择器
定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义：集体统一设置样式
5、全局选择器
定义：所有标签设置样式
HTML文档结构图
6、后代选择器
定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。
7、伪类选择器
链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时；
:active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）
伪类选择器的属性：link > visited > hover > active
说明：
1) a:hover 必须置于 a:link和a:visited之后，才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性，从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高（id选择器定义具有唯一性）
class选择器次之（class选择器可以多个）
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高
!important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。
CSS选择器命名规则
1：采用英文字母，数字以及"-" 和 "_" 命名
2：以小写字母开头，不能以数字和"-" 和 "_" 开头
3：使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名，大家根据自身项目及团队的规则命名
耐心学习基础知识，基础是盖房的根基，必须打结实。
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
以上是关于css复合选择器都有哪些的主要内容，如果未能解决你的问题，请参考以下文章