css3选择器篇
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p
{
color: red;
}
h1
{
color: blue;
}
</style>
</head>
<body>
<p>陈业贵</p>
<p>陈业贵</p>
<p>陈业贵</p>
<p>陈业贵</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>我是标题</h1>
</body>
</html>核心;给html标签设置相应的css属性。（精确的）
id选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
</head>
<body>
<p id="identity1">1111</p>
<p id="identity2">1111</p>
<p id="identity3">1111</p>
<p id="identity4">1111</p>
</body>
</html>核心;唯一 （同一页面内）， 标签命名规则： /4.1id的名称只能由字母/数字/下划线 a-z 0-9 _ 4.2id名称不能以数字开头 4.3id名称不能是HTML标签的名称 不能是a h1 img input …/ 在css中id标签的显示是：#。
类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pp{
color: red;
}
.ppp{
color: green;
}
.pppp{
color: blue;
}
.ppppp{
color: yellow;
}
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style>
</head>
<body>
<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>
<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>
</body>
</html>核心：类与id选择器相反，是同一页面可以重复，同时一个标签可以设置多个类名。并且·多个类名都可以有作用的哦。
id选择器和class选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.colorR
{
color: red;
}
.size30
{
font-size: 30px;
}
.line
{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="colorR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="colorR line">第三段文字</p>
</body>
</html>核心：一个标签中可以设置多个类，可以的哦。
后代选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p
{
color: red;
}
#identity p
{
color:yellow;
}
.para p
{
color: blue;
}
#identity #iii
{
color: purple;
}
#identity .ccc
{
color: skyblue;
}
div ul li p
{
color: red;
}
</style>
</head>
<body>
<p>陈业贵</p>
<div id="identity" class="para">
<p>666</p>
<p>666</p>
<ul>
<li>
<p id="iii" class="ccc">我是段落</p>
<p>99999</p>
</li>
<li>
<p>9999</p>
</li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>核心：这里面有优先级的意思勒，id》类》标签 后代选择器的核心是找到选择器名称的最后哪一个设置样式，前面的是在哪里？？？
子元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p
{
color: red;
}
#identity>p
{
color: blue;
}
div>ul>li>p
{
color: purple;
}
</style>
</head>
<body>
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>核心;找到选择器最后的名称设置样式，这里和后代选择器相似。 记住，他只会查找对应的标签对应的子元素，不是孙子元素哈哈，记住哈. 具体还要看优先级哈。
后代选择器和子元素选择器: 核心:其实两者最大的的不同是后代是查找包括子元素，孙子元素之类的。。。 而子元素只会查找子元素，不会查找孙子的哈。
交集选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p.para1{
color: red;
}
.para1#identity
{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>核心是：必须是选择器和选择器之间没有任何的连接符号。符合所有要求的才行啊。
并集选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.ht,.para
{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>核心：1.并集选择器必须使用逗号来连接 2.选择器可以使用标签名称/id名称/class名称 给所有选择器选中的标签设置属性
兄弟选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*h1+p
{
color: red;
}*/
h1~p
{
color: blue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>核心：给指定选择器后面紧跟的那个选择器选中的标签设置属性（h1+p）。 (h1~p)是给指定选择器的后面的所有选择器设置属性。
序选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*p:first-child
{
color: red;
}
/*核心在于:一层一层的比较.第一是同级别之间的比较。第二是看看同级别的首位的如果是p就设置颜色.不然不设置.*/
/*p:first-of-type
{
color: red;
}
/*核心在于:设置颜色的是第一:同级别,第二是设置给第一个出现的p标签设置颜色*/
/*p:last-child
{
color: red;
}
/*核心在于:同级别的最后一个标签如果是p就设置颜色*/
/*p:last-of-type
{
color: red;
}
/*核心在于:选中的是同级别的同类型的,记住,子元素里面的元素每一个都是开始哈.*/
/*p:nth-child(3)
{
color: red;
}
/*核心在于:同级别的如果数第三个为p就设置颜色.*/
/*p:nth-of-type(3)
{
color: red;
}
/*核心在于:同级别的并且同类型的地方数第三个如果是p就设置颜色*/
/*p:nth-last-child(2)
{
color: red;
}
/*核心在于:选中的是同级别的倒数第二个。记住,子元素的话每一个都是开始哈.*/
/*p:nth-last-of-type(2)
{
color: red;
}
/*核心在于:只看p标签同级别的同类型的倒数第二个p标签.
*/
/*p:only-child
{
color: red;
}
/*核心在于:同级别的父元素里面只有一个标签p*/
/*p:only-of-type
{
color: red;
}
/*核心在于:独一无二的元素,没有其他相同的了.*/
/*.para:only-of-type
{
color: red;
}
/*代表兄弟元素中没有一样的(.para)*/
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p class="para">我是段落1</p>
<div>
<p class="para">我是段落2</p>
<p class="para">我是段落2</p>
<h1>我是标题</h1>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*p:nth-child(odd)/*奇数设置颜色*/
/*{
color: red;
}*/
/*p:nth-child(even)/*偶数设置颜色*/
/*{
color: red;
}*/
/*p:nth-of-type(odd)/*奇数设置颜色*/
/*{
color: red;
}*/
/*p:nth-of-type(even)/*偶数设置颜色*/
/*{
color: red;
}*/
/*p:nth-child(2n+0)/*结果:0 2 4 6*/
/*{
color: red;
}*/
/*p:nth-child(2n+1)/*结果为:1 3 5*/
/*{
color: red;
}*/
/*p:nth-child(3n+0)/*结果为:0 3 6*/
/*{
color: red;
}*/
/*核心:而n是一个计数器, 从0开始递增;*/
</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>属性选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*p[id]
{
color: red;
}*/
p[class=cc]
{
color: red;
}
</style>
</head>
<body>
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*img[alt^=abc]/*只要以abc开头的就能找到*/
/*{
color: red;
}*/
/*img[alt|=abc]/*abc被-或者其他内容隔开的就行*/
/*{
color: red;
}*/
/*img[alt$=abc]/*以abc结尾的就行*/
/*{
color: red;
}*/
/*img[alt*=abc]{/*包含abc的就行*/
/* color: red;
/*}*/
img[alt~=abc]/*只要abc被空格隔开的就行*/
{
color:red;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
</body>
</html>通配符选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{color: red;}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读