CSS3 选择器总结及详解

最新推荐文章于 2022-10-02 18:33:10 发布

Alice_yo

最新推荐文章于 2022-10-02 18:33:10 发布

阅读量621

点赞数

本文链接：https://blog.youkuaiyun.com/Alice_yo/article/details/103689716

版权

CSS3 选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
一、兄弟选择符： ~
用·A和B来解释：A~B
需要注意三点：
1.只选择A元素之后的元素B，出现在A元素之前的元素ul，不会被选择到。在案例一中第二、三个ul会被选中第一个不会被选中
2.两种元素必须拥有相同的父元素，选择同一级的，后代中的不会被选择，这个就不举例子啦
3.与相邻选择符(A+B) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素，案例三中既可以使用兄弟选择符 ~ 也可以使用相邻选择符 +
案例一：
在这里插入图片描述

<div>一个 div 元素。</div>
<ul>
  <li>咖啡</li>
</ul>
<p>第一段。</p>
<ul>
  <li>牛奶</li>
</ul>

<h2>另一个列表</h2>
<ul>
  <li>茶</li>
</ul>

css实现伸缩二级菜单案例二：
在这里插入图片描述
鼠标移到第一个黄色区域考勤管理会出现粉红色区域

鼠标移到第二个黄色区域信息中心会出现粉红色区域

鼠标移到第二个黄色区域协同办公会出现粉红色区域

<!DOCTYPE HTML>
<html>

<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		text-align: center;
	}
	h3{
		background: yellow;
		width: 150px;
		height: 40px;
		line-height: 40px;
		color: #ccc;
		border-bottom: 2px solid #ccc;
	}
	h3~ul{
		list-style: none;
		background: pink;
		width: 150px;
		height: 90px;
		line-height: 30px;
		text-align: center;
		list-style: none;
		display: none;
	}
	ul>li:hover h3+ul{
		display: block;
	}
	.last{
		height: 150px;
	}
</style>
</head>

<body>
<ul>
	<li>
		<h3>考勤管理</h3>
		<ul>
			<li>日常考勤</li>
			<li>请假申请</li>
			<li>加班/出差</li>
		</ul>
	</li>
	<li>
		<h3>信息中心</h3>
		<ul>
			<li>通知公告</li>
			<li>公司新闻</li>
			<li>规章制度</li>
		</ul>
	</li>
	<li>
		<h3>协同办公</h3>
		<ul class="last">
			<li>公文流转</li>
			<li>文件中心</li>
			<li>内部邮件</li>
			<li>即时通信</li>
			<li>短信提醒</li>
		</ul>
	</li>
</ul>
</body>
</html>

二、属性选择器：
1.E[att^=“val”] {
}
选择具有att属性且属性值为以val开头的字符串的E元素。
eg:

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

2.E[att $ =“val”] {
}
选择具有att属性且属性值为以val结尾的字符串的E元素。
eg:

<style>
div[class$="c"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

3.E[att*=“val”] {
}
选择具有att属性且属性值为包含val的字符串的E元素。
eg:

<style>
div[class*="b"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

三.伪类选择器：被选中的元素的一种的状态
E:not(s) E:root E:target
E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)
E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n)
E:empty 空的:注释节点算空 hasChildNodes() E:checked E:enabled E：disabled E:read-only E:read-write
四.伪元素选择器：
::before ::after
:first-letter 搭配浮动首字下沉的特效 :first-line ::selection(写自己的网站可以用) ::placehoder