文章目录
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](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