1.给拥有两种类属性的标签内加css样式
<!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>
.urgent.waring {
color: rgb(201, 9, 9);
}
</style>
</head>
<body>
<p class="urgent waring">abcdefghijk</p>
<p class="urgent">1234567</p>
</body>
</html>
运行结果:
只有同时含有 urgent 和 waring 的类才能使文字颜色变化
2.属性选择器:
给同时具有 href 和 title 两个属性的 a 元素 编写样式 :
a[href][title] {
font-weight:bold;
}
同理 如果想把href的值为xxx和title的值为xxx的 a 元素选择出来 则为:
a[href="http://www.w3.org/"][title="W3C Home"] {
font-size: 700;
}
两者使用方法类似
根据部分属性选择:
形式 | 说明 |
---|---|
[foo 丨= “bar”] | 选择的元素有foo属性,且其值以bar和一个英文破折号(U+002D)开头,例如:foo=" bar-xxx",foo=“barxxx” 或者就是bar本身 |
[foo ~=“bar”] | 选择的元素有foo属性,且其值是包含bar这个词的一组值,常用于匹配以空格分隔的一组词(差不多相当于有 多个类) |
[foo *=“bar”] | 选择的元素有foo属性,且其值包含子串bar |
[foo ^=“bar”] | 选择的元素有foo属性,且其值以bar开头 |
[foo $=“bar”] | 选择的元素有foo属性,且其值以bar结尾 |
例子:
<span class="barren rocky">123</span>
<span class="cloudy barren">456</span>
<span class="life-bearing cloudy">789</span>
span[class~="barren"] {
font-style:italic;
}
此例将类中含有 barren 值的标签选择出来并且设置为斜体
3.不区分大小写的 标识符:
在属性选择器的最后加上一个不起眼的 i,就可不区分大小写:
例如:
plaent[ type*= “rock” i] ,就可以不区分rock的大小写来搜索属性值为rock的标签
注意:有些浏览器不兼容此用法
4.选择紧邻同胞元素:
假设你想装饰紧跟在一个标题后面的段落,或者为紧跟在一个段落后面的列表设定特殊的外边距。若想选择同一个父元素紧跟在另一个元素后面的元素,要使用紧邻同胞连接符,即
一个加号: +
与子元素连接符类似,加号两侧可以有空格,也可没有。
若想把紧跟在 h1 元素后面段落§的上外边距清掉,则这样写:
h1 + p { margin-top: 0;}
注意:若结构为:
<h1>1234</h1>
<div>111</div>
<p>2394</p>
则此紧邻同胞连接符无效,因为紧跟着 h1 的标签为 div 而不是 p
注意: 兄弟标签的 父元素必须是同一个(必须是亲兄弟)
5.选择后续同胞:
这个连接符用 :
波浪号:~
表示,选择一个元素后面同属于一个父元素的另一个元素(不需要是紧邻的同胞元素即可)
例:
<h2>标题2</h2>
<p>skyblue</p>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
</ol>
<p>pointer</p>
<ol>
<li>44</li>
<li>55</li>
<li>66</li>
</ol>
使用了后续同胞连接符后:
h2 ~ol { font-style: italic; }
结果: 将h2后面与它同属一个父级的ol元素的文本倾斜,因为有两个ol在h2后面,并且都同属一个父级,所以两个有序列表的文本都倾斜了。
6.拼接伪类:
CSS允许把伪类拼接(串联)在一起。
例如:
a:link:hover {
color: red;
}
a:visited:hover {
color: gray;
}
此例译为:
把有鼠标悬停其上的未访问的链接显示为红色;
把有鼠标悬停其上的已访问的链接显示为灰色。
此外,还可以分别为其他语言(例如德语)下的未访问的链接和已访问链接指定悬停样式:
a:link:hover:lang(de) {
color: red;
}
a:visited:hover:lang(de) {
color: maroon;
}
:lang() 的括号内表明是哪种语言。
注意:别拼接相互排斥的伪类,例如链接不可能既访问又未访问,所以:
a: link:visited 没有任何意义。
7.结构伪类:
CSS中
:root 伪类选择文档的根元素,在HTML中根元素始终是 html,所以其选择html,在HTML文档中可以直接选择HTML元素,而不使用:root伪类,但是这两个选择符的特指度不同(以后介绍)
例子:
:root {
border: 10px dotted gray;
}
会出现以下这种情况:
选择空元素:
使用:
:empty 伪类可以选择任何没有子代的元素,甚至连文本节点都没有(包括文本和空白)。CMS经常生成没有任何内容的空元素,此时就可以使用这个伪类。例如:
p:empty {
display: none;
}
它能禁止显示空段落
注意:你可能想使用:
*:empty {
display: none;
}
使得全部的空的元素都被清除不显示,但是 它会匹配HTML文档中的所有空元素例如 img 和 input ,textarea等里面没有放内容的元素,它们也都会被清除
注意: :empty 是唯一一个在匹配时考虑文本节点的CSS选择符。 Selectors Level 3中的起跳选择符(比如同胞选择符都只考虑元素),完全忽略文本节点。
8.选择唯一的子代:
使用:
xxx:only-child 伪类,他选择的元素是另一个元素的唯一子元素。
有趣的是:
xxx:first-child:last-child 选择的 也是 only-child
例子:
<!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>
a[href] img:only-child {
border: 2px solid black;
}
</style>
</head>
<body>
<a href="#"><img src="html+css/images/logo.png" alt=""></a>
<a href="#"><img src="html+css/images/cartoon6.ico" alt="">The two</a>
<a href="#"><img src="html+css/images/cartoon6.ico" alt=""><em>The three</em></a>
</body>
</html>
效果图:
如果一个超链接只有一个图像,没有其他子元素:图一和图二因为超链接a唯一子代图像(图二的 文字 The two)不算是元素,
注意:本例为 a 超链接中只有img一个元素情况;
若想把html文件中所有 标签 只有 img 一个 元素选出来(标签只有 img一个亲儿子),则用:
img:only-child {
aaa:xxx;
}
另外当HTML是另外一种情况:
<a href="#"><span><img src="html+css/images/cartoon6.ico" alt=""></span> The two</a>
虽然img不是 a的亲儿子,但是 img 是 span 元素的亲儿子,而span是属于 超链接 a的,所以也可有黑边框。
简述为: 图像的父元素自身也可以是链接的后代。
如果想要限制规则,选择的都是a元素的唯一子代图像,则需要加上子元素连接符,改成:
a[href]>img:only-child {
border: 2px solid black;
}
9.选择同胞元素中唯一的图像
用法 :only-of-type
它与 :only-child 之间的区别:
only-of-type 匹配同胞中唯一的那种元素,
而only-child 只匹配完全没有同胞的元素
简单理解为: :only-of-type 可以使用到一个标签内有很多个元素,选择其中唯一的的那个元素 例如:
<!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:only-of-type {
color: red;
}
</style>
</head>
<body>
<div>
<a href="">111</a>
<a href="">222</a>
<p>333</p>
</div>
</body>
</html>
效果图为:
10.结合 :nth-child() 和 :mth-last-child()
你可以使用CSS确定一个列表中有多少个列表项目,然后据此装饰:
li:only-child {width: 100%;}
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {width: 50%;}
li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3)~li {width: 33.33%;}
li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4)~li{width: 25%;}
在上述事例中,如果列表中只要一个列表项目,宽度为100%;
如果一个列表项目是第一个项目,还是倒数第二个项目,即列表中有两个项目,则宽度为50%;
如果一个列表项目是第一个项目,还是倒数第三个项目,那么后面两个同胞项目的快读为33%;
类似的,如果一个列表项目是第一个项目,还是倒数第四个项目,级列表有四个项目,则后面三个同胞的宽度为25%