CSS选择器

CSS选择器使用方法和优缺点

元素选择器
标签选择器
优点：使用简单，不需要为标签添加属性
缺点：匹配的范围过大，精度不够
适用范围：常用标签选择器重置各个标签的默认样式
类选择器
优点：可以为不同标签定义相同的样式
缺点：需要为标签定义class属性，影响文档结构
应用方法：以点号（.）为前缀，后面是类名，在标签中定义class属性，然后设置属性值为类选择器的名称
ID选择器
优点：精准匹配
缺点：需要为标签定义id属性，相对于类选择器，缺乏灵活性
应用方法：以#为前缀，后面是ID名，在标签中定义id属性，然后设置属性值为id选择器的名称
通配选择器
使用表示，用来匹配文档中的所有标签，例如：{margin:0; padding:0}
关系选择器
包含选择器
优点：缩小匹配范围
缺点：匹配范围相对较大，影响的层级不受限制
子选择器
优点：相对于包含选择器，匹配的范围更小，从层级结构来看，匹配目标更明确
缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构
使用尖角号>连接两个简单的选择器，前面选择器表示包含的父对象，后面表示被包含的子对象
相邻选择器
优点：在结构中快速准确找到同级，相邻元素
缺点：使用前熟悉文档结构
使用方法：使用+连接两个简单的选择器
兄弟选择器
优点：在结构中快速准确的找到同级靠后的元素
缺点：需要熟悉文档结构，匹配精度没有相邻选择器具体
使用方法：~符号连接两个简单的选择器，前面指同级的前置元素，后面指定其后同级所有匹配的元素
分组选择器
优点：可以合并相同样式，减少代码冗余
缺点：不方便个性管理和编辑
使用方法：，连接两个简单的选择器，前面选择器匹配的元素与后面的混合在一起作为分组选择器的结果集
属性选择器
使用标签的属性来匹配元素，使用中括号进行标记
伪选择器：能够根据元素或者对象的特征，状态行为进行匹配；以冒号作为前缀标识符
伪类选择器
单纯式；混用式
结构伪类：根据文档结构的相互关系来匹配特定的元素
否定伪类：not()表示否定选择器，即过滤掉not()函数匹配的特定元素
状态伪类
：enabled：用于匹配指定范围内所有可用的UI元素
：disabled：匹配指定范围内所有不可用的UI元素
：checked：用于匹配指定范围内所有可用的UI元素
目标伪类
形式如E：target，它表示选择匹配E的所有元素，且匹配元素被相关url指向，且该选择器是动态选择器，只有当存在url指向该匹配元素的时候，样式效果才有效
伪对象选择器