CSS3学习笔记（三）
2019-08-25 本文已影响0人
dev_winner
CSS3选择器
-
属性选择器：通过id属性可将不同div元素进行区分。 - 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了
通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：
| 属性选择器 | 功能描述 |
|---|---|
| E[att^="val"] | 选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串。 |
| E[att$="val"] | 选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串，刚好与E[att^="val"]相反。 |
| E[att*="val"] | 选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了"val"。换句话说，字符串与属性值中的任意位置相匹配。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/*通配符选择器*/
a[class^="column"] {
background: red;
}
a[href$="doc"] {
background: green;
}
a[title*="box"] {
background: yellow;
}
</style>
</head>
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br />
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br />
<a href="##" title="this is a box">我的背景想变成黄色</a>
<a href="##" title="box1">我的背景想变成黄色</a>
<a href="##" title="there is two boxs">我的背景想变成黄色</a>
</body>
</html>
通配符选择器自定义样式
结构性伪类选择器
-
:root选择器：根选择器，其含义为匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 - 通过
:root选择器设置背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—root</title>
<style type="text/css">
/* :root {
background-color: pink;
}*/
/*:root等同于html标签样式*/
html {
background: pink;
}
</style>
</head>
<body>
<div>Root选择器修改HTML元素的背景颜色</div>
</body>
</html>
设置全局背景颜色
-
:not选择器：否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—not</title>
<style type="text/css">
div {
padding: 10px 20px;
/* min-height属性设置元素的最小高度，
保证没有内容时能撑高对象盒子*/
min-height: 40px;
}
/*自定义否定选择器样式*/
.test div:not([id="footer"]) {
background: orange;
}
form {
width: 200px;
margin: 20px auto;
}
form div {
margin-bottom: 20px;
}
/*给表单中除submit按钮之外的input元素添加红色边框*/
form input:not([type="submit"]) {
border: 1px solid red;
}
</style>
</head>
<body>
<form action="#">
<div>
<label for="name">Account Input:</label>
<input type="text" name="name" id="name" placeholder="请输入用户名" />
</div>
<div>
<label for="pwd">Password Input:</label>
<input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<div class="test">
<div id="header">页头</div>
<div id="page">页体</div>
<div id="footer">页脚</div>
</div>
</body>
</html>
设置否定选择器
-
:empty选择器：表示空，用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—empty</title>
<style type="text/css">
div {
min-height: 30px;
}
div:empty {
border: 1px solid green;
}
p {
background: orange;
min-height: 30px;
}
p:empty {
/*空标签不显示样式*/
display: none;
}
</style>
</head>
<body>
<div>我这里有内容</div>
<div> </div><!-- 这里有一个空格 -->
<div></div><!-- 这里任何内容都没有 -->
<p>我是一个段落</p>
<p> </p> <!-- 这里有一个空格 -->
<p></p><!-- 这里任何内容都没有 -->
</body>
</html>
设置
-
:target选择器：目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。＃ 锚的名称是在一个文件中链接到某个元素的URL，元素被链接到目标元素。这个有点像markdown中[toc]生成目录后有链接到当前文章中某个小标题一样！
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，例如下面代码中是：#brand1等；
2、:target就是用来匹配id为brand1的元素（id="brand`"的元素），即下面代码中的那个div元素！
3、多个url（多个target）处理：只要#号后的名称与id=""中的名称对应即可实现目标跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<style type="text/css">
/*这里的:target就是指id="brand"的div对象，
当有多个target时，随着鼠标的点击会自动跳转并显示对应的元素*/
#brand:target p {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
a {
/*去掉链接下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand1</a></h2>
<p>content for Brand</p>
</div>
<h2><a href="#jake">Brand2</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2><a href="#aron">Brand3</a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
</body>
</html>
设置目标选择器
-
:first-child选择器：表示选择父元素的第一个子元素的元素E。注意：是子元素，而不是后代元素。 -
>：表示子代选择器。空格：表示后代选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—first-child</title>
<style type="text/css">
/*通过:first-child选择器定位列表中的第一个列表项，并将序列号颜色变为红色。*/
.test1>li:first-child {
color: red;
}
/*
'>'：表示子代选择器
将ul标签中所有li标签的项目号颜色改为黄色*/
.test2>li {
color: yellow;
}
</style>
</head>
<body>
<!-- 无序列表 -->
<ul class="test1">
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul >
<ul class="test2">
<li><a href="##">Linka</a></li>
<li><a href="##">Linkb</a></li>
<li><a href="##">Linkc</a></li>
<li><a href="##">Linkd</a></li>
<li><a href="##">Linke</a></li>
</ul>
</body>
</html>
设置父元素ul的第一个子元素的元素样式
-
:last-child选择器：表示的是选择父元素的最后一个子元素的元素E。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器——last-child</title>
<style type="text/css">
ul {
border: 1px solid #ffc107;
/*去除项目列表样式*/
list-style: none outside none;
width: 220px;
margin: 20px auto;
padding: 0;
}
ul>li {
list-style: none outside none;
margin: 0;
padding: 10px;
border-bottom: 3px solid #f44336;
}
/*删除列表中最后一个列表项的底部边框*/
ul>li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item5</li>
<li>Item6</li>
</ul>
</body>
</html>
删除列表中最后一个列表项的底部边框
-
:nth-child(n)选择器：用来定位某个父元素的一个或多个特定的子元素。其中n是其参数，而且可以是整数值(1,2,3,4)、表达式(2n+1、-n+5)或关键词(odd、even)，但参数n的起始值始终是1，而不是0。当参数n=0时，选择器将选择不到任何匹配的元素！当n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—nth-child(n)</title>
<style type="text/css">
ol>li:nth-child(2n+1) {
background: orange;
}
</style>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>
</body>
</html>
设置父元素的多个子元素样式
-
:nth-last-child(n)选择器：从某父元素的最后一个子元素开始计算，来选择特定的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—nth-last-child(n)</title>
<style type="text/css">
/*选择列表中倒数第五个列表项，将其背景设置为橙色。*/
ol>li:nth-last-child(5) {
background: orange;
}
</style>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>
</body>
</html>
设置父元素倒数第5个子元素的样式
-
:first-of-type选择器：用来定位一个父元素下的某个相同类型的第一个子元素。其与:first-child的不同之处在于后者匹配的是某个父元素的第一个子元素，是结构上的第一个子元素！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习:first-of-type</title>
<style type="text/css">
.wrapper {
width: 500px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
color: #fff;
}
.wrapper>div {
background: green;
}
.wrapper>p {
background: blue;
}
/*改变第一个段落p标签的背景颜色为橙色*/
.wrapper>p:first-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是一个块元素，我是.wrapper的第一个子元素</div>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<div>我是一个块元素</div>
</div>
</body>
</html>
设置父元素div下的p标签元素的第一个子元素的样式
-
:nth-of-type(n)选择器：只计算父元素中指定的某种类型的子元素。在:nth-of-type(n)选择器中的n与:nth-child(n)选择器中的n参数一样，可以是整数、表达式、关键词。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习:nth-of-type()</title>
<style type="text/css">
/*通过:nth-of-type(2n)选择器，将容器"div.wrapper"中偶数段数p标签的背景颜色设置为橙色。*/
.wrapper>p:nth-of-type(2n) {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>
</body>
</html>
设置父元素.wrapper下偶次序p标签的样式
-
:last-of-type选择器：选择父元素下的某个相同类型的最后一个子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.wrapper>p:last-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<div>我是第三个Div元素</div>
</div>
</body>
</html>
设置父元素.wrapper下p标签的最后一个子元素的样式
-
:nth-last-of-type(n)选择器：从最后一个子元素开始选择父元素中指定某个相同类型的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-of-type(n)</title>
<style type="text/css">
.wrapper>p:nth-last-of-type(3) {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
<p>我是第四个段落</p>
<p>我是第五个段落</p>
<div>我是一个Div元素</div>
<p>我是第六个段落</p>
<p>我是第七个段落</p>
</div>
</body>
</html>
设置父元素下倒数第三个p标签的样式
-
:only-child选择器：表示选择匹配元素的父元素中仅有一个子元素，且是一个唯一的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
li {
background: green;
padding: 10px;
margin-bottom: 5px;
}
li:only-child {
background: orange;
}
</style>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul>
<li>Item1</li>
</ul>
<ol>
<li>Item1</li>
</ol>
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
</body>
</html>
选择仅有一个子元素的父元素下的子元素
-
:only-of-type选择器：选择父元素下唯一一个相同类型的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
.wrapper {
border: 1px solid #ccc;
padding: 10px;
width: 500px;
margin: 10px auto;
}
.wrapper p:only-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="wrapper">
<p>我是一个段落</p>
</div>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
</body>
</html>
设置父元素.wrapper下仅有一个p标签的元素样式
