基础选择器
标签选择器：
作用：
该选择器作用于一种标签 （相同标签名），用于描述一种标签的共有样式
用法：
选择器直接写标签名
element {
样式名: 样式值;
…
}
id选择器：
作用：
该选择器作用于具有指定id值的标签 （网页中id可以有多个，但每个id值是唯一的），用于描述某一个标签的特有样式
用法：
选择器是 “#” + 标签的id值
#id {
样式名: 样式值;
…
}
class选择器
作用：
该选择器作用于class相同的标签 （标签可以不同，class相同即可），用于描述一类标签的共有样式
用法：
选择器是 “.” + 标签的class值
.class {
样式名: 样式值;
…
}
通配符选择器
作用：
该选择器作用于所有标签 （由于页面加载速度问题，不建议轻易使用）,用于描述整个页面 （包括<body>） 的共性
用法：
选择器只有 “ * ”
* {
样式名: 样式值;
…
}
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS之基础选择器</title>
<style type="text/css">
/* 标签选择器 */
div {
text-align: center;
line-height: 500px;
}
span {
font-size: 120px;
}
/* id选择器 */
#orangeLe {
color: orange;
}
/* class选择器 */
.blueLe {
color: blue;
}
.redLe {
color: red;
}
.greenLe {
color: green;
}
/* 通配符选择器 */
* {
font-family: 幼圆;
}
</style>
</head>
<body>
<div>
<span class="blueLe">G</span>
<span class="redLe">o</span>
<span id="orangeLe">o</span>
<span class="blueLe">g</span>
<span class="greenLe">l</span>
<span class="redLe">e</span>
</div>
<hr/>
<span title="Hello CSS">Hello CSS!</span>
</body>
</html>
复合选择器
后代选择器
作用：
用于选择选择器上倒数第二个标签内的所有倒数第一个标签 （可以多级选择），利用标签的相对位置来进行标签选择，进而控制其样式
用法：
多个基础选择器间加一个空格分开
selector1 selector2 … {
样式名: 样式值;
…
}
子代选择器
作用：
严格按照选择器给出的标签层级关系来进行选择
用法：
前后选择之间要用 “>” 连接，不能有空格
selector1>selector2 {
样式名: 样式值;
…
}
交集选择器
作用：
用于选择某一类标签之后再进一步选择具有某些特征的标签
用法：
两个选择器中间没有空格等字符
element.class {
样式名: 样式值;
…
}
element#id {
样式名: 样式值;
…
}
element[attribute] {
样式名: 样式值;
…
}
…
并集选择器
作用：
用于对不同 （标签不同、id不同、class不同、…） 标签进行统一选择
用法：
在不同选择器之间要加入 “,”，代码规范推荐在 “,” 后面再加一个空格，这样代码整洁、可读性高
selector1, selector2, … {
样式名: 样式值;
…
}
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS之复合选择器</title>
<style type="text/css">
/* 后代选择器 */
div span {
font-weight: bold;
color: #1b3958;
}
div p span {
font-style: italic;
}
/* 子代选择器 */
div>span {
background: pink;
}
/* 交集选择器 */
span.other {
background: red;
}
/* 并集选择器 */
.limit, a, p#content {
position: relative;
top: 100px;
}
</style>
</head>
<body>
<div>
<div>
<p>
<span class="other">首页</span>
<span class="other">新闻</span>
<span class="other">娱乐</span>
</p>
</div>
<span class="limit">上一页</span>
<span class="limit">下一页</span>
</div>
<div id="nav">
<a href="#">去这里</a>
</div>
<div>
<p id="content">
河曲智叟笑而止之曰：“甚矣，汝之不惠。以残年余力，曾不能毁山之一毛，其如土石何？”北山愚公长息曰：“汝心之固，固不可彻，曾不若孀妻弱子。虽我之死，有子存焉；子又生孙，孙又生子；子又有子，子又有孙；子子孙孙无穷匮也，而山不加增，何苦而不平？”河曲智叟亡以应。
</p>
</div>
</body>
</html>
属性选择器
属性选择器1：（较为简单，不进行演示）
作用：
用于选择具有指定属性的标签，进而控制其样式
[attr] {
样式名：样式值
…
}
属性选择器2：
作用：
用于选择所有 指定标签(E) 中具有 指定属性(attr) 的标签，类似于交集选择器，进而控制其样式
用法：
指定标签与属性中间没有空格等字符
E[attr] {
样式名：样式值
…
}
属性选择器3：
作用：
用于选择所有 指定标签(E) 中所有拥有 指定属性(attr) 且 属性值为value 的标签，进而控制其样式
用法：
指定标签与属性中间没有空格等字符，值要用引号包起来
E[attr=“value”] {
样式名：样式值
…
}
属性选择器4：
作用：
用于选择所有 指定标签(E) 中所有拥有 指定属性(attr) 且 属性值以value为前缀 的标签，进而控制其样式
用法：
指定标签与属性中间没有空格等字符，要在指定属性后使用 ^ 符号
E[attr^=“value”] {
样式名：样式值
…
}
属性选择器5：
作用：
用于选择所有 指定标签(E) 中所有拥有 指定属性(attr) 且 属性值以value为后缀 的标签，进而控制其样式
用法：
指定标签与属性中间没有空格等字符，要在指定属性后使用 $ 符号
E[attr$=“value”] {
样式名：样式值
…
}
属性选择器6：
作用：
用于选择所有 指定标签(E) 中所有拥有 指定属性(attr) 且 属性值含有value 的标签，进而控制其样式
用法：
指定标签与属性中间没有空格等字符，要在指定属性后使用 * 符号
E[attr*=“value”] {
样式名：样式值
…
}
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之属性选择器</title>
<style type="text/css">
input {
display: block;
}
input[required] {
outline: none;
border: 2px solid mediumpurple;
}
input[class="value"] {
outline: none;
border: 2px dashed lightpink;
}
input[class^="demo"] {
width: 200px;
height: 50px;
font-size: 40px;
}
input[class$="demo"] {
padding: 2px 5px;
border: 1px solid red;
border-radius: 20px;
outline: none;
}
input[class*="contain"] {
background-color: skyblue;
}
</style>
</head>
<body>
<form id="myform" action="#">
<fieldset>
<legend>MyForm</legend>
<input class="form-child" type="text" required="required">
<input class="form-child" type="email" required="required">
<input class="form-child" type="time" required="required">
<input class="form-child" type="number" required="required">
<input class="form-child" type="tel" required="required">
<input class="form-child" type="date" required="required">
<input class="form-child" type="password" required="required">
<input class="form-child" type="search" required="required">
<input class="value" type="text">
<input class="demo-1" type="text">
<input class="demo-2" type="text">
<input class="1-demo" type="text">
<input class="2-demo" type="text">
<input class="1-contain-1" type="text">
<input class="1-contain-2" type="text">
<input form="myform" type="submit" value="提交" style="margin: 20px 0 0 50px;"/>
</fieldset>
</form>
</body>
</html>
伪类选择器
：link (未访问链接)
作用：
用于对未访问的超链接标签进行选择 （清浏览器的数据后可重置）
用法：
在a标签后直接加入 :link
a:link {
样式名: 样式值;
…
}
：visited (已访问链接)
作用：
用于对已访问的超链接标签进行选择 （清浏览器的数据后可重置）
用法：
在a标签后直接加入 :visited
a:visited {
样式名: 样式值;
…
}
：hover (鼠标在元素上)
作用：
用于对鼠标在元素上的 标签 进行 选择
用法：
在 selector 后直接加入 :hover
selector:hover {
样式名: 样式值;
…
}
：active (鼠标点击)
作用：
用于对鼠标点击的 标签 进行 选择
用法：
在 selector 后直接加入 :active
selector:active {
样式名: 样式值;
…
}
：focus (获得焦点)
作用：
用于对获得焦点的 标签 进行 选择
用法：
在 selector 后直接加入 :focus
selector:focus {
样式名: 样式值;
…
}
总结：
伪类选择器如果同时出现两个及其以上时一定要按照link、visited、hover、active的顺序进行书写，否则会出现问题，造成伪类失效
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<base target="_blank"/>
<title>CSS3之伪类选择器</title>
<style type="text/css">
a {
display: inline-block;
float: left;
width: 150px;
height: 40px;
border-radius: 5px;
margin-left: 80px;
text-align: center;
line-height: 40px;
text-decoration: none;
}
div {
position: absolute;
top: 30%;
left: 45%;
}
input {
width: 40px;
height: 30px;
padding: 5px 10px;
border: 1px solid #666666;
border-radius: 5px;
outline: none;
transition: 150ms;
}
/*
伪类选择器
注意：伪类选择器如果同时出现两个及其以上时一定要按照link、visited、hover、active的顺序进行书写，否则会出现问题，造成伪类失效
*/
/* 未点击的超链接样式 */
a:link {
background-color: pink;
color: dimgray;
}
/* 已点击的超链接样式 */
a:visited {
background-color: dimgray;
color: white;
}
/* 鼠标划到指定标签区域内时所拥有的样式 */
a:hover {
color: black;
transition: 150ms;
transform: scale(0.9);
font-size: 25px;
}
/* 鼠标点击指定标签区域内时所拥有的样式 */
a:active {
background-color: #DB7093;
color: black;
}
/* 当元素获得焦点时所拥有的样式 */
input:focus {
width: 70px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<a class="showA" href="http://www.baidu.com">BAIDU</a>
<a class="showA" href="http://www.oppo.com">OPPO</a>
<a class="showA" href="http://www.vivo.com">VIVO</a>
<a class="showA" href="http://www.xiaomi.com">MI</a>
<a class="showA" href="http://www.apple.com.cn">APPLE</a>
<a class="showA" href="http://www.huawei.com">HUAWEI</a>
<div>
<label for="name">名称：</label>
<input type="text" id="name"/>
</div>
</body>
</html>
结构伪类选择器
结构伪类选择器1：
作用：
用于选择匹配的父元素中第一个子元素（E），进而控制其样式
用法：
无法作用于与E不同类型但位置相同的子元素，只取第一个，第一个 子元素（E） 要根据HTML实际结构 进行填写
E:first-child {
样式名：样式值
…
}
结构伪类选择器2：
作用：
用于选择匹配的父元素中最后一个子元素（E），进而控制其样式
用法：
无法作用于与E不同类型但位置相同的子元素，只取最后一个，最后一个子元素（E）要根据HTML实际结构进行填写
E:last-child {
样式名：样式值
…
}
结构伪类选择器3：
作用：
用于选择匹配的父元素中第n（n可以为指定关键字或者公式）个子元素（E），进而控制其样式
用法：
无法作用于与E 不同类型但位置相同的子元素，只取第n个，第n个子元素（E）要根据HTML实际结构进行填写
n指定关键字：
- even：偶数
- odd： 奇数
n常用公式：（n默认从0开始）
- 2n ：偶数
- 2n + 1 ：奇数
- Xn ：(X为任一正整数)
- n + X ：从第X个开始
- -n + X ：取前X个
E:nth-child(n) {
样式名：样式值
…
}
结构伪类选择器4：
作用：
用于选择匹配的父元素中第一个子元素（E），进而控制其样式
用法：
只取父元素中所有指定类型标签中的第一个
E:first-of-type {
样式名：样式值
…
}
结构伪类选择器5：
作用：
用于选择匹配的父元素中最后一个子元素（E），进而控制其样式
用法：
只取父元素中所有指定类型标签中的最后一个
E:first-of-type {
样式名：样式值
…
}
结构伪类选择器6：
作用：
用于选择匹配的父元素中第n个子元素（E），进而控制其样式
用法：
只取父元素中所有指定类型标签中的第n个
n指定关键字：
- even：偶数
- odd： 奇数
n常用公式：（n默认从0开始）
- 2n ：偶数
- 2n + 1 ：奇数
- Xn ：(X为任一正整数)
- n + X ：从第X个开始
- -n + X ：取前X个
E:nth-of-type(n) {
样式名：样式值
…
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之结构伪类选择器</title>
<style type="text/css">
span {
display: block;
}
.d1 div:first-child {
border: 1px solid deepskyblue;
}
.d1 span:last-child {
border: 1px solid mediumpurple;
}
.d1 div:nth-child(1) {
background-color: pink;
}
.d1 span:nth-child(even) {
background-color: gray;
}
.d1 span:nth-child(2n + 1) {
background-color: red;
}
.d1 span:nth-child(n + 3) {
background-color: #4fbfff;
}
.d2 span:first-of-type {
border: 2px solid red;
}
.d2 q:first-of-type {
border: 2px solid forestgreen;
}
.d2 span:last-of-type {
border: 2px solid rebeccapurple;
}
.d2 div:last-of-type {
background-color: yellow;
}
.d3 span:nth-of-type(even) {
border: 2px solid red;
}
.d3 span:nth-of-type(2n + 1) {
border: 2px solid greenyellow;
}
.d3 span:nth-of-type(5n) {
background-color: #1075ff;
}
.d3 span:nth-of-type(-n + 3) {
background-color: #FF4E50;
}
</style>
</head>
<body>
<div class="d1">
<div>div1</div>
<span>li1</span>
<span>li2</span>
<span>li3</span>
<span>li4</span>
<span>li5</span>
<span>li6</span>
<span>li7</span>
<span>li8</span>
</div>
<hr/>
<div class="d2">
<div>div1</div>
<span>span1</span>
<q>q1</q>
<span>span2</span>
<span>span3</span>
<q>q2</q>
<span>span4</span>
<div>div2</div>
<span>span5</span>
<i>i1</i>
</div>
<hr/>
<div class="d3">
<div>div1</div>
<span>span1</span>
<q>q1</q>
<span>span2</span>
<span>span3</span>
<q>q2</q>
<span>span4</span>
<div>div2</div>
<span>span5</span>
<i>i1</i>
</div>
</body>
</html>
伪元素选择器
注意：
before和after必须有content属性before在内容前面，after 在内容后面before和after创建的是一个元素，但是属于 行内元素- 创建出来的元素在
om中查找不到，所以称为伪元素 - 伪元素和标签选择器一样，权重为 1
- 有时你会发现伪类元素使用了两个冒号 (:😃 而不是一个冒号 (😃，这是 CSS3 规范中的一部分要求，目的是为了区分
伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于
CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。所以，如果你的网站只需
要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用
CSS2 的单冒号写法比较安全
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之伪元素选择器</title>
<style type="text/css">
div {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin-bottom: 10px;
border: 2px solid black;
font-family: "icomoon",serif;
font-size: 30px;
}
/* :before伪元素选择器 */
.div1::before {
content: 'Hello World!';
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
/* :after伪元素选择器 */
.div1::after {
content: 'Hello World!';
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
1546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
