零基础学前端开发之CSS3深入选择器
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础学前端开发之CSS3深入选择器相关的知识，希望对你有一定的参考价值。
知识点：
1.并集选择器（多个）
2.交集选择器（组合选择器）
3.子代选择器
4.后代选择器
5.属性选择器
6.结构伪类选择器
7.伪元素选择器
8.案例作业
1.并集选择器
语法：
选择器1，选择器2，选择器n{共同的属性1：值1;...n;}
含义：
将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。
优点：
可以节省我们的代码，提高工作效率。
h1,h2,p{font-size: 18px;color: red;}
当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义的样式，就一模一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1.并集选择器
*/
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<hr>
<h2>作者：李白</h2>
<p>窗前明月光</p>
<p>看着心发慌</p>
</body>
</html>
2.交集选择器
既要符合选择器1的特点，也要符合选择器2的特点；
优点：
可以精确定位到某个网页元素。
精确定位：
如何写这个标签；
选择器1选择器2{属性：值;}
p.yuebing{color:blueviolet;
font-weight: bolder;}
这种定义，表示：类样式是yuebing的p标签。它既符合p的样式规则，又符合yuebing的样式规则。
font-weight:课设置加粗或细；span:小区域的标签，比p段落范围小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,
h2 {
text-align: center;
}
p {
font-size: 28px;
}
.content {
color: green;
}
/* 颜色也变一下 */
/* 精确定位 */
p.content {
font-size: 36px;
color: red;
}
.a {
color: blue;
}
.b {
font-size: 72px;
}
</style>
</head>
<body>
<h1>新时代.悯码农</h1>
<hr>
<h2>张Sir</h2>
<p>锄禾日当午</p>
<p>代码真辛苦</p>
<p class="content">跟着老张学</p>
<p class="a b">一点不辛苦</p>
<div class="content">简介，写字间里面的新时达.........</div>
</body>
</html>
3.子代选择器
父子关系；兄弟关系；
父元素下的子元素，如何进行修饰，进行查找定位.
格式：
父元素>子元素{样式声明；}
子代选择器：只包含直接儿子层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 设置父div father的子元素p的颜色和字体等 */
.father>p {
font-size: 18px;
color: red;
font-family: '楷体';
}
</style>
</head>
<body>
<div class="father">
<div class="son">儿子DIV
<p>孙子p</p>
</div>
<p p>儿子p</p>
</div>
</body>
</html>
4.后代选择器
祖代元素 后代元素的关系;
语法：
祖代元素 后代元素{样式声明;}
注意：
1.祖代元素和后代元素之间是有空格的；
2.后代元素包括子级元素，孙子级元素，重孙子，玄孙子...
<p>儿子p</p>
<p>儿子p</p>
<ul>
<li>
<p>重孙女</p>
</li>
</ul>
样式代码
body p {
font-size: 24px;
color: red;
border: 1px solid #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
祖代：body
p
p
ul
孙子li
p
body 下面的后代p,都设置了样式。
疑问：后代选择器 子代选择器，谁选择的内容更多？？？
*/
body p {
font-size: 24px;
color: red;
border: 1px solid #f00;
}
</style>
</head>
<body>
<p>儿子p</p>
<p>儿子p</p>
<ul>
<li>
<p>重孙女</p>
</li>
</ul>
</body>
</html>
5.兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。
选择器+标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
background-color: antiquewhite;
}
/* 类别选择器+标签选择器
兄弟：他们要相邻；
+：表示相邻下一个兄弟;
~: 表示后面所有的兄弟；
*/
/* .zhugong+p {
background-color: aquamarine;
} */
.zhugong~.xiongdi {
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="xiongdi">关羽</p>
<p class="zhugong">刘备</p>
<p class="xiongdi">张飞</p>
<p class="xiongdi">吕布</p>
</div>
</body>
</html>
6.属性选择器
属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。
语法：
E:元素；Element; att:表示attribute 属性;
E [ att ] 匹配具有 att 属性的 E 元素 例如：input [ value ]
E [ att = ‘val’ ] 匹配具有 att 属性且属性值等于 val 的 E元素
E [ att ~= ‘val’ ] 匹配具有 att 属性且属性值包含 val词 的 E元素
E [ att ^= ‘val’ ] 匹配具有 att 属性且属性值以 val 开头的 E元素
E [ att $= ‘val’ ] 匹配具有 att 属性且属性值以 val 结尾的 E元素
E [ att *= ‘val’ ] 匹配具有 att 属性且属性值含有 val 的 E元素
注意：^以xx开头 href ^=‘www’
$以xx结尾
*包含xx
为了更好的演示：
<div class="demo clearfix">
<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
<a href="" class="links item" title="open the website" lang="cn">7</a>
<a href="" class="links item" title="close the website" lang="en-zh">8</a>
<a href="" class="links item" title="http://www.jd.com">9</a>
<a href="" class="links item last" id="last">10</a>
</div>
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}
7.结构伪类选择器
1、同级别（不区分类型）
父元素 E:first-child 父元素中的第一个子元素 E
父元素 E:last-child 父元素中的最后一个子元素 E
父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E
注意：
ul :first-child{ color:pink; } // 选择 ul 下的第一个子元素（ 第一个子元素可以使 div，p，span任何子元素）
ul li:first-child{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素
nth-child( n ) 注意点：（n 可以是数字，关键字和公式）
数字：选择第 n 个子元素，里面数字从 1 开始
关键字： even 偶数，odd 奇数
ul li:nth-child( even ) // 选择 ul 中所有 偶数行的 li 子元素
公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）
ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母
偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5
2、同类型（区分类型）
E:first-of-type：指定类型 E 的第一个
E:last-of-type：指定类型 E 的最后一个
E:nth-of-type( n )：指定类型 E 的第 n 个
区别：（两种相反的查找模式）
-
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ul#father>li:first-child {
color: red;
}
ul#father>li:last-child {
color: green;
} */
/* n:0 没有；1：第一个;
n:从0开始
*/
/* #father>li:nth-child(2n) {
background-color: #f00;
}
#father>li:nth-child(2n-1) {
background-color: #f0f;
} */
/* #father>li:nth-child(4n) {
background-color: #f00;
} */
/* #father>li:nth-child(2n-1) {
background-color: #f0f;
} */
/* even:偶数；2n
odd:奇数;2n+1
*/
/* #father>li:nth-child(even) {
background-color: grey;
width: 400px;
}
#father>li:nth-child(odd) {
background-color: purple;
width: 400px;
} */
/* #father>li:first-of-type {
color: red;
}
#father>li:last-of-type {
color: yellow;
} */
#father>li:nth-child(1) {
color: wheat;
}
/*
区别：
#father>p:nth-of-type(1):变色; 先匹配类型，再找序号;
这个也称为小类型判断；按照儿子再分个类型，女儿再排序；
#father>li:nth-child(1) 不变色;先寻找序号，再匹配类型;
找的是li,但是实际是p,二者类型不一致，则颜色不变。
所有孩子里面的第一个li;
*/
</style>
</head>
<body>
<ul id="father">
<p>罗冠中</p>
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>孙尚香</li>
<li>孙茹</li>
<li>曹操</li>
<li>姜维</li>
</ul>
<ul id="mather">
<li></li>
<li></li>
</ul>
</body>
</html>
8.其他伪类选择器
选择器 描述
E:enabled 选择匹配E的所有可用UI元素。
E:disabled 选择匹配E的所有不可用UI元素。
E:checked 选择匹配E的所有可用UI元素。
:empty 选中既没文本也无子元素（空格都不能有）的指定元素
:not(x) 找到不符合当前选择器的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
border-radius: 5px;圆角矩形
*/
/* button:enabled {
background-color: salmon;
}
button:disabled {
border-radius: 5px;
}
input:checked {
width: 20px;
height: 20px;
} */
p:empty {
width: 200px;
height: 30px;
background-color: red;
}
/* p:not(.nei) 这个表示，找p元素，不包含类别选择器是p的；
*/
p:not(.nei) {
width: 50px;
height: 50px;
background-color: slateblue;
}
</style>
</head>
<body>
<button type="button">可用按钮</button>
<button type="button" disabled>禁用按钮</button>
<input type="checkbox" name="ck_01" value="锦囊" checked>锦囊
<input type="checkbox" name="ck_02" value="杀">杀
<p>我是p</p>
<div>
<p class="nei">内部p</p>
</div>
<hr>
<div>
<span>内部span</span>
</div>
</body>
</html>
9.伪元素选择器
::first-line
选择元素的第一行
::first-letter
::before和::after
这两个主要用来给元素的前面或后面插入内容。
（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。
(2)与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。
::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
10.选择器的权重
注：一般只有选择器直接选中才会用到权重计算
!importent ------------infinity
权重计算规则
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为0100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
比较规则
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
- 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
- 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
11.网址导航表格案例
11.1 案例
11.2之前html样的，如何转换成css的样式，
<table>
<caption>2345导航网</caption>
<tr class="ji">
<td class="bt">新闻</td><td>新浪</td><td>网易</td><td>腾讯</td>
</tr>
<tr class="ou">
<td class="bt">军事</td><td>铁血</td><td>中华</td><td>凤凰</td>
</tr>
</table>
CSS3样式代码：
table{text-align: center;border-collapse: collapse;
margin:0 auto;width:80%;}
td,caption{border: 1px solid #999999;line-height: 50px;}
caption{background-color: red;font-weight: bolder;border-bottom:0px;
font-size: 28px;border-bottom: 0px;}
tr.ji{background-color: antiquewhite;}
tr.ou{background-color: azure;}
td.bt{font-weight: bolder;font-size: 24px;}
margin:0 auto;上下为0 左右自动适应，这样居中了。
input{border: none;width:20%}
以上是关于零基础学前端开发之CSS3深入选择器的主要内容，如果未能解决你的问题，请参考以下文章