- 标签选择器(元素选择器)
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
`标签调用的时候用 class=“类名” 即可。```
多类选择器:我们可以给标签指定多个类名,从而达到更多的选择目的``
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- id选择器和类选择器的区别
类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
- 通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 伪类选择器
- 链接伪类选择器( 注意写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao )
a { /* a是标签选择器 所有的链接 */font-weight: 700;font-size: 16px;color: gray; }a:hover { /* :hover 是链接伪类选择器 鼠标经过 */color: red;/* 鼠标经过的时候,由原来的 灰色 变成了红色 */}
b.结构(位置)选择器
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
- :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n 可以是数字、关键词或公式
c.目标伪类选择器``
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
