文章目录
CSS选择器
什么是CSS选择器
按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器分类
通用选择器(universal selector)
元素选择器(type selectors)
类选择器(class selectors)
id选择器(id selectors)
属性选择器(attribute selectors)
组合(combinators)
伪类(pseudo-classes)
伪元素(pseudo-elements)
通用选择器
所有的元素都会被选中
一般用来给所有元素作一些通用性的设置:
比如内边距、外边距
比如重置一些内容
简单选择器(重要)
元素选择器:使用元素的名称
类选择器:使用.类名
id选择器:使用#id
id注意事项：
一个HTML文档里面的id值是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以用驼峰标识
最好不要用标签名作为id1值
属性选择器(了解即可)
拥有某一个属性[att]
属性等于某个值[att=val]
[attr*=val]:属性值包含某一个值val;
[attr^=val]:属性值以val开头;
[attr$=val]:属性值以val结尾;
[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]:属性值包含val，如果有其他值必须以空格和val分割
后代选择器(重要)
后代选择器一:所有的后代(直接/间接的后代)
选择器之间以空格分隔
后代选择器二:直接子代选择器(必须是直接子代)
选择器之间以>分割;
兄弟选择器(理解)
兄弟选择器一:相邻兄弟选择器
使用符号+连接
兄弟选择器二:普遍兄弟选择器
使用符号~连接
选择器组(重要)
交集选择器:需要同时符合两个选择器条件(两个选择器紧密连接)
为了精准的选择某一个元素
并集选择器:符合一个选择器条件即可(两个选择器以,号分割)
为了给多个元素设置相同的样式
伪类
伪类(Pseudo-classes)是选择器的一种，它用于选择处于特定状态的元素
常见的伪类有
1动态伪类(dynamic pseudo-classes)
:link、:visited、:hover、:active、:focus
2.目标伪类(target pseudo-classes)
:target
3.语言伪类(language pseudo-classes)
:lang()
4.元素状态伪类(UI element states pseudo-classes)
:enabled、:disabled、:checked
5.结构伪类(structural pseudo-classes)
:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
6.否定伪类(negation pseudo-classes)
:not()
所有的伪类:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
动态伪类
使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接(鼠标在链接上长按住未松开)
使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
建议编写顺序:link 、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上
:focus指当前拥有输入焦点的元素(能接收键盘输入)
文本输入框一聚焦后，背景就会变红色
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
伪元素(pseudo-elements)
常见的伪元素
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号
::first-line可以针对首行文本设置属性
::first-letter可以针对首字母设置属性
::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
常通过content属性来为一个元素添加修饰性的内容
<html>
<head>
<style>
.box::before {
content: "123";
color: red;
}
.box::after {
content: "321";
color: blue;
}
</style>
</head>
<body>
<div class="box">div元素</div>
</body>
</html>
<html>
<head>
<style>
.box5::after {
content: "";
display:inline-block;
width: 8px;
height: 8px;
background-color: #f00
}
</style>
</head>
<body>
</body>
</html>
