大家好,又见面了,我是你们的朋友全栈君。
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。
1,基本选择器
(1)标签选择器(类型选择器)
统一定义常用标签的基本样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
p{ /*标签选择器*/
font-size:15px;
color:#00796b;
}
</style>
</head>
<body>
<p>山下兰芽短浸溪,松间沙路净无泥。</p>
</body>
</html>
(2)类选择器
类选择器能为相同对象定义不同的样式,为不同的对象定义相同的样式,以“.”前缀开头,然后接一个自定义的类名,例如:.myfont。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
p { /*标签选择器*/
font-size: 25px;
color: #00396b;
}
.myfont { /*类选择器*/
font-size: 18px;
font-weight: bold;
color: #00796b;
}
</style>
</head>
<body>
<p>william</p>
<p class="myfont">山下兰芽短浸溪,松间沙路净无泥。</p>
<p class="myfont">几处早莺争暖树,谁家新燕啄春泥。</p>
<div class="myfont">随意春芳歌,王孙自可留。</div>
</body>
</html>
(3)ID选择器
ID选择器以“#”开头,然后接一个自定义的ID名。HTML所有的标签都支持ID选择器,只要在标签中定义id属性就行了。ID选择器一般是用来定义HTML框架结构的布局效果,因为元素ID都是唯一的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
#poetry{
font-size: 25px;
margin: auto;
text-align: center;
color: #00796b;
}
</style>
</head>
<body>
<div id="poetry">水面清圆,一一风荷举。</div>
</body>
</html>
(4)通配选择器(通配符)
如果所有的元素都需要定义相同的样式效果就用通配选择器,通配选择器以“*”表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
font-size: 25px;
margin: auto;
text-align: center;
color: #00796b;
}
</style>
</head>
<body>
<div>山下兰芽短浸溪,松间沙路净无泥。</div>
<span>随意春芳歌,王孙自可留。</span>
<p>水面清圆,一一风荷举。</p>
</body>
</html>
2,组合选择器
(1)包含选择器
包含选择器通过空格标识符来表示,前面一个选择器表示父节点,而后面的选择器表示子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
#man p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
#woman p{
color: pink;
font-weight: 100;
font-size: 25px;
}
</style>
</head>
<body>
<div id="man">
<p>李白</p>
<p>白居易</p>
</div>
<div id="woman">
<p>刘莉</p>
<p>李梅梅</p>
</div>
</body>
</html>
(2)子选择器
子选择器以“>”表示,子选择器是指定父元素包含下的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
#man>p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<p>李白</p>
<p>白居易</p>
</div>
</body>
</html>
(3)相邻选择器
相邻选择器通过“+”分隔符进行定义,TA指定的元素关系是兄弟关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
h1+p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<h1>李白</h1>
<p>白居易</p>
</div>
<div id="woman">
<h1>李清照</h1>
<p>唐琬</p>
</div>
</body>
</html>
(4)兄弟选择器
兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点,以“~”表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
h1~p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<span>hello</span>
<h1>李白</h1>
<p>白居易</p>
<p>白居</p>
<p>白易</p>
<p>白嵩</p>
<p>白豪</p>
</div>
</body>
</html>
(5)分组选择器
分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
*{
margin: auto;
text-align: center;
}
span,h1,h2,p,b{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="man">
<span>hello</span>
<h1>李白</h1>
<h2>白居易</h2>
<p>白居</p>
<b>白易</b>
</div>
</body>
</html>
3,属性选择器
CSS3在CSS2的基础上新增了3个属性选择器,分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。三个新增的选择器和已定义的E[attr]、E[attr=”value”]、E[attr~=”attr”]、E[attr|=”value”]共同构成强大的HTML属性过滤器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
* {
margin: auto;
text-align: center;
}
/*E[attr]*/
[id] {
color: #00796b;
}
[title] {
font-size: 35px;
color: #00796b;
font-weight: 100;
}
[title][href] {
color: darkolivegreen;
text-decoration: none;
}
/*E[attr="value"]*/
[href="#well"] {
font-size: 27px;
color: red;
text-decoration: none;
}
[href="#pick"] {
font-size: 22px;
color: green;
text-decoration: none;
}
/*E[attr~="value"]*/
[class~="important"] {
font-size: 35px;
color: blue;
}
/*E[att^=value]只要属性值里有这个value就行*/
[class^="one"] {
font-size: 12px;
color: #999999;
}
/*E[att$=value]只要属性值的后缀是value就选中*/
[class$="in"] {
font-size: 32px;
color: darkorange;
}
/*E[att*=value] 只要属性值里包含value就选中*/
[class*="go"] {
font-size: 15px;
color: darkmagenta;
}
/*E[attr|="value"] 只要属性值是value或者以value-开头就选中*/
[class|="demo"] {
font-size: 35px;
color: #00799b;
}
</style>
</head>
<body>
<!--E[attr]-->
<span id="down">李白乘舟将欲行</span>
<span title="hello">几处早莺争暖树</span>
<p title="world">谁家新燕啄春泥</p>
<a title="like" href="www.good.wang">益州疲敝</a>
<!--E[attr="value"]-->
<a href="#well">月出于东山之上</a>
<a href="#pick">徘徊于斗牛之间</a>
<!--E[attr~="value"]-->
<p class="important warning">苟富贵</p>
<p class="important">勿相忘</p>
<!--E[att^=value]-->
<p class="one">国破山河在,城春草木深。</p>
<p class="two">感时花溅泪,恨别鸟惊心。</p>
<p class="onesteep">烽火连三月,家书抵万金。</p>
<p class="twoland">白头搔更短,浑欲不胜簪。</p>
<!--E[att$=value]-->
<p class="oldok">好雨知时节,当春乃发生。</p>
<p class="oldyeh">随风潜入夜,润物细无声。</p>
<p class="oldmain">野径云俱黑,江船火独明。</p>
<p class="newmain">晓看红湿处,花重锦官城。</p>
<!--E[att*=value]-->
<p class="dremgo">明月松间照,清泉石上流。</p>
<p class="maingo">空山新雨后,天气晚来秋。</p>
<p class="gohome">竹喧归浣女,莲动下渔舟。</p>
<p class="oldgodemo">随意春芳歌,王孙自可留。</p>
<!--E[attr|="value"]-->
<p class="demo">山不在高</p>
<p class="demo-R">有仙则名</p>
<p class="Ademo">水不在深</p>
<p class="MdemoM">有龙则灵</p>
</body>
</html>
4,伪类选择器
伪类选择器包括伪类和伪对象选择器,伪类选择器以“:”作为前缀标识符。冒号前后没有空格,否则将会被视为类选择器。
单纯式用法:div:hover{background-color:red;}
混合式用法:div.selected:hover{background-color:green;}
(1)动态伪类选择器
锚点伪类选择器:E:link(未被访问过) 和 E:visited(已被访问过)。
行为伪类选择器:E:active(点击时)、E:hover(鼠标滑过时)、E:focus(元素获得焦点时)。
/*链接没被访问时为黑色*/
.demo a:link{
color: black;
}
/*链接被访问后为灰色*/
.demo a:visited{
color: gray;
}
/*鼠标放在连接上时显示为蓝色*/
.demo a:hover{
color: blue;
}
/*鼠标点击时激活链接那一下显示为绿色*/
.demo a:link{
color: green;
}
(2)结构伪类选择器
结构伪类选择器是CSS3新设计的选择器,TA利用HTML的树状结构实现元素选择,可以减少class属性和id属性的定义。
①:first-child:选择一个元素的第一个子元素。(不支持ie6)。
比如我们这里的这个demo,你想让列表中的第一个”li”具有与其他”li”有不同的样式,我们就可以使用:first-child来实现。
.demo li:first-child{border:1px dashed #666666;background-color:lightgray}
②:last-child:选择一个元素的最后一个子元素。
让列表中的最后一个”li”具有与其他”li”有不同的样式。
.demo li:last-child{border:1px dashed #666666;background-color:lightgray}
③:nth-child():选择某个元素的一个或多个特定的子元素。[:nth-child(-3)是错误的写法 ,不支持ie6~ie8 ]。
:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择,n从0开始算*/
:nth-child(n+length);/*选择大于或等于length的元素*/
:nth-child(-n+length)/*选择小于或等于length的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数,n表示一个从0开始的自然数。
.demo li:nth-child(n){border:1px solid #999999;background-color:lightblue;}
/*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
.demo li:nth-child(2n){border:1px solid #999999;background-color:lightblue;}
/*选中0,2,4,6,8...*/
.demo li:nth-child(2n-1){border:1px solid #999999;background-color:lightblue;}
/*选中0,1,3,5,7...*/
.demo li:nth-child(n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5,6,7,8,9...*/
.demo li:nth-child(-n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5,4,3,2,1*/
.demo li:nth-child(3n+1){border:1px solid #999999;background-color:lightblue;}
/*选中1,4,7,10...*/
④:nth-last-child():选中某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始计算。(不支持ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div{
margin: auto;
text-align: center;
}
li:nth-last-child(2n){
background-color: #0055cc;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>宋公明</li>
<li>李靖宇</li>
<li>周伯通</li>
<li>法拉第</li>
<li>胖大海</li>
<li>胖大海</li>
</ul>
</div>
</body>
</html>
※如果元素个数为奇数,TA选中的就是偶数,反之选中的是奇数。
⑤:nth-of-type():选择指定的元素。(不支持ie6~ie8)。
:nth-of-type()的用法和:nth-child的用法是一样的,不同的是:nth-of-type()指定了元素的类型。
⑥:nth-last-of-type():选择指定的元素,从元素的最后一个开始计算。(不支持ie6~ie8)。
:nth-last-of-type()的用法和:nth-last-child()的用法是一样的,不同的是:nth-last-of-type()指定了元素的类型。
⑦:first-of-type:选择一个上级元素下的第一个同类子元素。(不支持ie6~ie8)。
和:first-child类似,不同的是指定了元素的类型,用的不多。
⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。
和:last-child类似,不同的是指定了元素的类型,用的不多。
⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。
⑩:only-of-type:选择一个上级元素的唯一一个同类型的子元素。(不支持ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
.dream p{background-color: #cccccc}
.dream p:only-child{background-color: #0055cc;color:#fff;}
.dream p:only-of-type{background-color: green;color: #fff}
</style>
</head>
<body>
<div class="dream">
<p>凌晨梦见脚趾头被人用针扎</p>
<p>醒了之后才知道是猫在用爪子挠我</p>
<p>夏天就这样结束了</p>
</div>
<div class="dream">
<p>迷人的不是那张脸,而是那张脸上的最好看的笑容</p>
</div>
<div class="dream">
<span>凌晨梦见脚趾头被人用针扎</span>
<p>醒了之后才知道是猫在用爪子挠我</p>
<div>夏天就这样结束了</div>
</div>
</body>
</html>
Ⅺ:empty:选择的元素里面没有任何内容。(不支持ie6~ie8)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
.get:empty{
width: 888px;
height: 666px;
border: 5px dashed #0055cc;
}
</style>
</head>
<body>
<div class="get">hello</div>
<div class="get"></div>
</body>
</html>
(3)否定伪类选择器(不支持ie6~ie8)。
:not()表示否定伪类选择器,TA可以排除掉特定元素,TA和jQuery中的:not选择器用法一模一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div{
margin: auto;
text-align: center;
}
li{color:red;}
li:not(.warning){
list-style: none;
font-size: 28px;
color:green;
}
</style>
</head>
<body>
<div>
<ul>
<li>can i help you?sir.</li>
<li class="warning">what f**k is this?</li>
<li>sorry!i don`t know</li>
<li>it`s look like snake.</li>
</ul>
</div>
</body>
</html>
※上面的HTML中就用否定伪类选择器过滤掉了那句脏话,所以它是红色的。
(4)状态伪类选择器(不支持ie6~ie8)。
状态伪类选择器主要是针对表单设计的,状态伪类选择器就是控制UI元素状态的,可不可用,选没选中,获取或失去焦点,锁定、待机等。
①:enabled伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:enabled选择器只匹配文本框,不匹配按钮。
<form>
<input type="text"/>
<input type="button" disabled="disabled">
</form>
②:disabled伪类表示匹配指定范围内所有不可用UI元素。例如,下面的表单,input:disabled选择器只匹配按钮,不匹文本框。
<form>
<input type="text"/>
<input type="button" disabled="disabled">
</form>
③:checked伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:checked选择器只匹配按钮,不匹配复选框。
<form>
<input type="checkbox"/>
<input type="radio" checked="checked">
</form>
(5)目标伪类选择器(不支持ie8及其以下的浏览器不支持目标伪类选择器)。
目标伪类选择器是形如E:target,TA匹配E的所有元素,并且匹配元素被相关的URL指向,目标伪类选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才被执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world.</title>
<style>
div:target{
font-size: 32px;
background-color: #00765b;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<div id="demo1">春眠不觉晓,</div>
<div id="demo2">处处闻啼鸟。</div>
</div>
</body>
</html>
※当在浏览器中打开这个文件,在URL后面附加”#demo1“,以锚点方式链接到<div id=”demo1″>时,该元素的样式就会发生相应的变化。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157217.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...