css选择器

96
阿洁2185
2017.04.16 12:15* 字数 1950

1.class 和 id 的使用场景?

  • class用于定位某一类元素,页面某一元素有共同特征的可以用class元素,页面元素有个别共同特征的也可以用class元素。
  • id用于定位页面唯一的元素,同一页面不能出现相同的“id“元素。

2.css常见的选择器有几种?

  • 基础选择器

  • *通用元素选择器,匹配与页面所有元素(不建议使用)

  • #id选择器匹配指定的id元素。

  • .class选择器,类选择器,匹配同一类的元素。

  • element标签选择器,指定HTML的标签。

  • 组合选择器(下面E与F代表一种选择器)

  • E,F 多元素选择器,同时匹配E元素和F元素。

  • E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只子元素,子元素向下递归)元素F。

  • E>F 子元素选择器,用>分隔,匹配E元素的所有子元素。

  • E+F 直接相邻选择器,匹配E元素之后的同级元素F。

  • E~F 普通相邻选择器(弟弟选择器)匹配E元素后的同级元素F(无论是否相邻)

  • .class.class id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素。

  • element#id id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素。

  • 属性选择器

  • E[attr] 匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div

  • E[attr = value] 匹配属性attr值为value的元素,div[id=test],匹配id=test的div

  • E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素

  • E[attr ^= value] 匹配属性attr的值以value开头的元素

  • E[attr $= value] 匹配属性attr的值以value结尾的元素

  • E[attr *= value] 匹配属性attr的值包含value的元素

  • 伪类选择器

  • E:first-child 匹配作为长子(第一个子女)的元素E

  • E:link 匹配所有未被点击的链接

  • E:visited 匹配所有已被点击的链接

  • E:active 匹配鼠标已经其上按下、还没有释放的E元素

  • E:hover 匹配鼠标悬停其上的E元素

  • E:focus 匹配获得当前焦点的E元素

  • E:lang(c) 匹配lang属性等于c的E元素

  • E:enabled 匹配表单中可用的元素

  • E:disabled 匹配表单中禁用的元素

  • E:checked 匹配表单中被选中的radio或checkbox元素

  • E::selection 匹配用户当前选中的元素

  • E:root 匹配文档的根元素,对于HTML文档,就是HTML元素

  • E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1

  • E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1

  • E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素

  • E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素

  • E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)

  • E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)

  • E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

  • E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

  • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

  • E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素

  • E:not(selector) 匹配不符合当前选择器的任何元素

  • 伪元素选择器

  • E::first-line 匹配E元素内容的第一行

  • E::first-letter 匹配E元素内容的第一个字母

  • E::before 在E元素之前插入生成的内容

  • E::after 在E元素之后插入生成的内容

3.选择器的优先级是怎样的?对于复杂场景如何计算优先级?

  • css选择器优先级


  • 对于复杂场景的优先级计算



    先计算a的值,那个a值大则优先,相同则计算b的值,以此类推。

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么

  • 正确属性是a:link,a:visited,a:hover,a:active
  • l浏览器遵循就近原则,在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。

5.以下选择器分别是什么意思?

  • #header{
    }id为header的元素
  • .header{
    }class为header的元素
  • .header .logo{
    }class为header的logo的子元素
  • .header.mobile{
    }class为header和class名为mobile的元素
  • .header p,.header h3{
    }class为header中的p标签和class为header中的h3标签
  • #header .nav>li{
    }id为header的元素中的class为nav的直接子元素中的li标签
  • #header a:hover{
    }id为header中的a标签hover样式,鼠标停留在a标签上变色。
  • #header .logo~p{
    }id为header元素中的.logo元素后的同级元素p(无论是否相邻)
  • #header input[type="text"]{
    }id为header元素的input标签,type命名为text的属性

列出知道的伪类选择器

  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已经被点击的元素
  • E:active 匹配鼠标已经放在其上按下还没释放的E元素
  • E:hover 匹配鼠标放在其上的E元素
  • E:focus 匹配获得当前焦点的E元素
  • E:first-child 匹配作为长子(第一个子女)的元素E
  • E:enabled 匹配表单中可用的元素
  • E:lang(c) 匹配lang属性等于c的E元素
  • E:disabled 匹配表单中禁用的元素
  • E:checked 匹配表单中被选中的radio或checkbox元素
  • E:selection 匹配用户当前选中的元素
  • E:root匹配文档的根元素,对于HTML文档,就是HTML元素
  • E:nth-lchild(n) 匹配其父元素的第n个子元素,第一个编号为(1)
  • E:nth-last-child(n)匹配其父元素的倒数第n个子元素,第一个编号为(1)

div:first-child和div:first-of-type的作用和区别

  • first-child匹配div下第一个元素
  • first-of-type匹配div下同类型第一个元素

运行如下代码,解析下输出样式的原因。

  • first-child匹配div下第一个元素,p标签元素被选中,字体颜色变红。
  • first-of-type匹配div下同类型第一个元素,p为该类型第一个元素,选中p标签;h3和h3为同类型元素,所以第一个h3标签被选中,p和h3背景颜色变蓝。
日记本