CSS面试须知--选择器

选择器

标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器 （可以多类名）

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

标签 中  <p class='类名'></p>

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签中  <p id="id名"></p>

通配符选择器

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

• 尽量少用通用选择器 *
• 尽量少用 ID 选择器
• 不使用无具体语义定义的标签选择器 div span

复合选择器

后代选择器 （子子孙孙）

父级 子级{属性:属性值;属性:属性值;}

子元素选择器(只选亲儿子)

父级>子级{属性:属性值;属性:属性值;}

交集选择器

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

并集选择器

用于集体声明 ，逗号隔开的

链接伪类选择器（重点）

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */
  顺序尽量不要颠倒 按照 lvha 的顺序
  以上CSS选择器 详见 CSS选择器及CSS书写位置

CSS3选择器

属性选择器

1.[title]

button[disabled] {
  cursor: default
}

2.[class=“demo”]

span[class^=black] {
  color: lightgreen;
}

结构伪类选择器

1. nth-child（n） 选择父元素里面的第几个子元素，不管是第几个类型
2. nth-of-type(n) 选择指定类型的元素

伪元素选择器

::before和::after

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

选择器优先级（权重）

继承 或 通配符选择器 0
元素选择器1 伪元素选择器1
class选择器10 伪类选择器10 属性选择器10
id选择器100
内联样式的权重1000
!improtant 权重最大