美文网首页
CSS选择器

CSS选择器

作者: gigi1226 | 来源:发表于2017-10-30 22:34 被阅读0次

1、 class 和 id 的使用场景?

  • class 类选择器,匹配class包含特定类的元素,可以管控多个含有相同类的元素
  • id id选择器,匹配特定的id元素,id是唯一的

2、CSS选择器常见的有几种?

基础选择器 含义
* 通配符,通用元素选择器,匹配页面任何元素(这决定它很少被使用)
#id id选择器,匹配特定id的元素
.class 类选择器,匹配包含特定类的元素
element 标签选择器
组合选择器 含义
E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器,用>分隔,匹配E元素的所有直接子元素
E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
.class1.class2 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-line 匹配E元素内容的第一行
E:first-letter 匹配E元素内容的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容
伪类选择器 含义
E:first-child 匹配父元素下面的第一个子元素
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) 匹配不符合当前选择器的任何元素

n的取值

1,2,3,4,5
2n+1, 2n, 4n-1
odd, even

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

从高到低

  • 属性后面使用!important会覆盖页面内任何位置定义的元素样式;
  • 作为style属性写在元素标签上的内联样式;
  • id选择器;
  • 类选择器;
  • 伪类选择器;
  • 属性选择器;
  • 标签选择器;
  • 通配符选择器;
  • 浏览器自定义。
    复杂场景下的比较
    通过比较标签数,先比较最优先级标签数,数量多的优先级高,若最高优先级的标签数相同,比较次一级的标签数

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

a:link, a:hover, a:active,a:visited的优先级相同

  • 未点击链接前link一直处于激活状态,鼠标已经其上按下、还没有释放或鼠标悬停时a同时处在link和active(或hover)状态,优先级相同,而选择器优先级相同时,后定义的会覆盖先定义的,所以应该排link,hover,active
  • visited若在hover后面,已点击过的链接会覆盖hover样式所以visited在hover之前
a:link{}
a:visit{}
a:hover{}
a:active{}

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

 #header{
}/*选择id为header的元素*/
.header{
}/*选择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的元素*/

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)

  • div:first-child 匹配父元素下面的第一个子元素,其类型为div。
  • div:first-of-type 匹配某个父元素第一个div类型子元素
  • div :first-child,匹配div下的后代元素标签中第一个子元素。空格是后代的意思。
  • div :first-of-type,匹配div下的后代元素标签中,相同类型标签的第一个子元素。空格是后代的意思。

七、解析代码

<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>

  • .item1:first-child{color: red;} 选择了其父元素第一个class为item的子元素,并将其颜色定为红色,因此aa显示为红色;
  • .item1:first-of-type{background: blue;} 选择了其父元素下不同标签中第一个class为item的子元素,并将其背景颜色定为蓝色,因此p标签和h3标签的第一个元素的背景色为蓝色。

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

      本文标题:CSS选择器

      本文链接:https://www.haomeiwen.com/subject/kwpmpxtx.html