CSS 通过选择器控制 HTML 元素,CSS 选择器对网页对象可以实现一对一、一对多或者多对一的匹配。
一、选择器的分类
CSS3 选择器在 CSS2 选择器基础上新增了属性选择器、伪类选择器、过滤选择器,减少了对 HTML 类名或ID名的依赖,避免了对 HTML 结构的干扰,使编写代码更简单轻松。
根据所获取页面中元素的不同,可以把 CSS 选择器分为 5大类:基本选择器、组合选择器、伪类选择器、伪元素选择器和属性选择器。
其中,伪类选择器又分为6种:动态伪类选择器、目标伪类选择器、语言伪类、UI 元素状态伪类选择器、结构伪类选择器和否定伪类选择器。
二、基本选择器
基本选择器包括:标签选择器、类选择器、ID 选择器和通配选择器。
1、标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。标签选择器可以快速、方便地控制页面标签的默认显示效果。
语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
Tips:标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
2、类选择器
类选择器能够为网页对象定义不同的样式,实现不同元素拥有相同的样式,相同元素的不同对象拥有不同的样式。
语法:类选择器使用“.”(英文点号)进行标识,后面紧跟类名
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可。
Tips:类选择器最大的优势是可以为元素对象定义单独或相同的样式。
建议:
长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。
不要纯数字、中文等命名, 尽量使用英文字母来表示。
命名规范,最好见名知意。
多类名选择器:可以给标签指定多个类名,从而达到更多的选择目的。
语法:
Tips:
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。
3、ID 选择器
ID 选择器以井号(#)作为前缀,然后是一个自定义的 ID 名。
语法:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
Tips:id 名即为HTML元素的 id 属性值,大多数HTML元素都可以定义 id 属性,元素的 id 值是唯一的,只能对应于文档中某一个具体的元素。
ID 选择器和类选择器区别:id选择器和类选择器最大的不同在于 使用次数上。ID 只能使用一次,类可以使用多次。
4、通配选择器
通配选择器可以来匹配页面中所有的元素,通配选择器是固定的,用星号(*)来表示,是所有选择器中作用范围最广的。
语法:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
Tips:实际应用中,这个选择器很少用到。
三、组合选择器
四、属性选择器
五、伪类选择器
伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符。冒号前可以添加选择符,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器。
语法:
a:hover { font-size:18px;}
伪类选择器有两种用法:单纯式和混用式。
单纯式:在伪选择符前面加上限定的元素即可。
语法:
a:link { colore:red; }
混用式:在伪选择符前面加上限定的元素和选择器,把类选择符合伪类选择符组成一个混合式的选择器。
语法:
a.selected:hover { color:blue; }
1、动态伪类
动态伪类是一类行为类样式,这些伪类并不存在于 HTML 中,只有当用户与页面进行交互时才能体现出现。动态伪类选择器包括两种形式:
锚点伪类:应用在链接上的常见样式。
:link /* 未访问的链接 没有点过的超链接*/
:visited /* 已访问的链接 已经点过的超链接*/
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 点击不松开的超链接*/
Tips:顺序尽量不能颠倒, 按照 lvha 的顺序
行为伪类:也称为用户操作伪类。
:focus /* 用于元素称为焦点时的样式效果,经常用在表单元素上*/ :hover 和 :active 也别列入到用户行为伪类中
:hover /*用于用户把鼠标移动到元素上面的样式效果*/
:active /* 用于用户单击元素时的样式效果,即按下鼠标左键时发生的样式 */
2、结构伪类 (CSS3 新增)
结构伪类利用文档结构树实现元素过滤,通过文档结构的相互关系来匹配特定的元素,使文档更加简洁。
结构伪类:
1 :first-child; 选择某个元素的第一个子元素
3、否定伪类
4、状态伪类
5、
六、伪元素选择器
标签:伪类,样式,标签,元素,选择器,CSS,属性
来源: https://www.cnblogs.com/niujifei/p/11105742.html