类选择器:
类选择器的用法很简单,个人最常用的写法如下:
.warning{
color: red;
}
今天看了书,发现还有这种写法:
p.warning{
color: red;
//其class属性包含词warning的所有段落
}
选择器会匹配class属性包含warning的所有p元素,其他任何类型的元素都不会匹配,不管是否有此class属性,
div.warning{
color: red;
}
.warning{
color: blue
}
<div class="warning">
hello
</div>
<p class="warning">world</p>
其显示如下:
由此可见div元素虽然有.warning的样式,但并未生效
多类选择器:
一般写法如:
<div class="warning urgent">
hello
</div>
可以分别设置.warning和.urgent的样式
.warning{
color: red;
}
.urgent{
background: blue;
}
但如果把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)
如:
.warning.urgent{
background: blue;
}
<div class="warning urgent">
hello
</div>
<p class="warning message">world</p>
显示如下:
p元素因类选择器不匹配,样式不生效
属性选择器
1.简单属性选择器
如果希望选择有某个属性的元素,而不论该属性的值是什么,可以使用简单的属性选择器
h1[class]{
color:red;
}
//可以选择有class值的所有h1元素,使其文本为红色
还可以根据多个属性进行选择,只需将属性选择器连接在一起即可。
a[href][title] {
font-weight: bold;
}
//可以将同时又href和title属性的HTML超链接的文本设置为粗体
2.根据具体属性值选择
选择有特定属性值的元素
a[href='https://www.baidu.com']{
color: blue;
}
<a href="https://www.baidu.com"> hello </a> //文本为红色
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor">world</a> //不受影响
值的注意的是,这种格式要求必须与属性值完全匹配,如果遇到的值本身包含一个用空格分隔的值列表,匹配就会出问题。
h1[class='warning urgent'] {
color:yellow;
}
<h1 class="warning urgent">hello</h1>
这是个安全串匹配,该规则会选择class属性值为warning urgent的所有h1元素,同时要求属性值urgent在后,warning在前,中间有空格
3.根据部分属性值选择
前面介绍的是完全串匹配,有时候不需要匹配完全,这就需要根据部分值选择元素
[foo^="bar"] 选择foo属性值以"bar"开头的所有元素
[foo$="bar"] 选择foo属性值以"bar"结尾的所有元素
[foo*="bar"] 选择foo属性值中包含子串"bar"的所有元素
选择子元素(>)
在某些情况下,可能不想选择一个任意的后代元素,而是希望缩小范围,只选择一个元素的子元素.可以用大于号(>)
div > a {
color: red;
}
<div>
<h1>
hello
<a href="">world</a>
</h1>
<a href="">
juzipchy
</a>
</div>
这个规则会把div下面出现的第一个a元素变成红色,第二个a元素无变化
因为第一个a是div的直接子元素,第二个a为div的后代元素.子选择器限制为值匹配文档树结构中直接相连的元素
选择相邻兄弟元素(+)
要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟结合符,这表示为一个加号(+)
div + h1 {
color: red;
}
<div>
hello world
</div>
<h1>
jin
</h1>
<h1>
juzipchy
</h1>
第二个h1并不是div的相邻元素,样式无改变,
要记住:用一个结合符只能选择两个相邻兄弟中的第二个元素
伪类选择器
1.链接伪类:
:link
:visited
2.动态伪类:
:hover
:active
3.选择第一个元素
:first-child选择器用于选取属于其父元素的首个子元素的指定选择器。
p:first-child{
background-color:yellow;
}
最常见的错误是认为p:first-child会选择p元素的第一个子元素,实际上是选择作为某元素的第一个子元素为p元素的元素.
h1 a:first-child{
color:blue;
}
<h1>
<a href="">jin</a>
</h1>
<h1>
juzipchy
</h1>
伪元素选择器
1.:first-letter:设置一个块级元素首字母的样式,而且仅对该字首字母设置样式
2.:first-line:影响元素中第一个文本行
注意:所有的伪元素都必须放在出现该伪元素的选择器的最后面,因此如果写成p:first-line em就是不合法的,因为伪元素出现在选择器主体前面
3.:before 插入生成的内容,并设置其样式
4.:after 插入生成的内容,并设置其样式