css选择器

字数 1800阅读 24

class和id的使用场景

class指定标签的类名,属性值可出现在多个标签中。
id指定标签的唯一标识,为某一元素提供特有的一个id,类似于身份证号

CSS选择器常见的有几种?

  1. 基础选择器
  • 通用选择器(*)
  • 标签选择器(e.g. p{}
  • id选择器(e.g. #footer{})
  • class选择器(e.g. .header{})
  1. 组合选择器
  • E,F(多元素选择器,之间用","隔开)
  • E F (后代选择器,用空格隔开,注意与子元素选择器区别)
  • E>F(子元素选择器,用">"隔开)
  • E+F(直接相邻选择器,用"+"隔开)
  • E~F(普通相邻选择器,匹配E元素之后的同级元素F)
  • .class1.class2(id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素)
  • element#id(id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素)
  1. 属性选择器
  • E[attr](匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div)
  • E[attr = value](匹配属性attr值为value的元素,div[id=test],匹配id=test的div)
  1. 伪类选择器
  • E:first-child(匹配元素E的第一个子元素)
  • E:link(匹配所有未被点击的链接)
  • E:visited(匹配所有已被点击的链接)
  • E:active(匹配鼠标已经其上按下、还没有释放的E元素)
  • E:hover(匹配鼠标悬停其上的E元素)
  • E:focus(匹配获得当前焦点的E元素)
  • E:nth-child(n)(匹配其父元素的第n个子元素)
  • E:nth-of-type(n)(仅匹配使用同种标签的元素)
  • E:first-of-type(匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1))
  1. 伪元素选择器
  • E::first-line 匹配E元素内容的第一行
  • E::first-letter 匹配E元素内容的第一个字母
  • E::before 在E元素之前插入生成的内容
  • E::after 在E元素之后插入生成的内容

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

  • 从高到低分别是
    在属性后面加@important > style内联 > id > class > 伪类 > 属性 > 标签 > 通配符 > 浏览器默认
  • 复杂场景计算
    • 行内样式 <div style="xxx"></div> ==> a
    • ID 选择器 ==> b
    • 类,属性选择器和伪类选择器 ==> c
    • 标签选择器、伪元素 ==> d
    • 注:如果两个选择器权重一样,则按浏览器解析顺序从上至下,下面覆盖上面

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

顺序为a:link, a:visited, a:hover, a:active
原因:

  • 鼠标经过的“未访问链接”可应用a:link、a:hover、a:active 这三种伪类选择器来定义样式,因为后面的样式会覆盖前面的样式,所以a:hover应放在a:link的后面,a:active放在最后。
  • 鼠标经过的“已访问链接”可应用a:visited、a:hover、a:active这三种类选择器来定义样式,因为后面的样式会覆盖前面的样式,所以a:hover应放在a:hovor的后面,a:active放在最后。

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

  • #header{} id选择器,id为header的元素

  • .header{} class选择器,class为header的元素

  • .header .logo{}后代选择器,class为header的父元素下面的class为logo的子元素

  • .header.mobile{}类选择器,选择同时具有class为header和mobile的元素

  • .header p, .header h3{}选择class为header父元素下面的标签为p和h3的子元素

  • #header .nav>li{}选择id为header父元素下面的class为nav的直接li子元素

  • #header a:hover{}选择id为header父元素的后代a标签伪类为hover(鼠标移动到元素上改变其样式)

  • #header .logo~p{}选择id为header父元素的后代class为logo之后所有的同级p标签

  • #header input[type="text"]{}选择id为header父元素的后代input标签属性type值为text的元素

列出你知道的伪类选择器

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) 匹配不符合当前选择器的任何元素

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

div:first-child:指div父元素的第1个子元素(第一个子元素必须为div,若不是则无法选中)
div:first-of-type:匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)

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

<style>
    .item1:first-child{
      color: red;
  }
  .item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>```
#####解析结果


![作业1.png](http://upload-images.jianshu.io/upload_images/3108254-64cebd83db334f8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#####原因:

第一条:`.item1:first-child:{color: red;}`class为item1标签其父元素的第一个子元素也就是p标签的div父元素第一个子元素p,所以p元素内容aa颜色变为红色
第二个:`.item1:first-of-type{background: blue;}`class为item1其父元素下同种标签的第一个子元素!这里p标签只有一个即其背景颜色变蓝色。有两个h3标签,其第一个标签内容为bb,所以bb背景色变为蓝色

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
  • 1,class 和 id 的使用场景? 1.class是类选择器,用.class定义,定位到页面中有相同特征的一类...
  • 1.class 和 id 的使用场景? class用于定位某一类元素,页面某一元素有共同特征的可以用class元素...
  • 1.class 和 id 的使用场景?#### class是类选择器,选择的是同一个类的元素;id选择器选择的是有...
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...