美文网首页
CSS 选择器

CSS 选择器

作者: Soarse | 来源:发表于2017-03-17 15:38 被阅读0次

问题1. class 和 id 的使用场景?

class 常用于多个标签统一进行样式适配,在 CSS 文件中以 .xxx{} 进行样式调试;
id 在一个 HTML 页面中只为一个标签单独使用,仅对这个标签有效,在 CSS 文件中以#xxx{} 进行样式调试。


问题2. CSS选择器常见的有几种?

基础选择器/组合选择器/属性选择器/伪类选择器/伪元素选择器


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

优先级从高到低分别是

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为 style 属性写在元素标签上的内联样式
3.id 选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

应对复杂场景
选择器分类 标识
行内样式 <div style="xxx"></div> a
ID 选择器 b
类/属性选择器/伪类选择器 c
标签选择器/伪元素选择器 d
  1. 面对两条复杂的 CSS 组合选择器之间进行权重选择,我们将这两条组合选择器中的各个选择器都挑出来,按照上表选择器分类并进行相对应的标识。
  2. 然后由标识 a 到 b 比较两条复杂组合选择器各自拥有上述各标识选择器分类的多少,如果一条复杂选择器拥有 a 标识数目大于另一条,则权重高于另一条,不再考虑其它标识;如果两者拥有 a 标识数目相同,则再考虑 b 标识,若一者拥有 b 标识数目大于另一方,则权重高于另一方,不再考虑 c 和 d 标识。
  3. 以此类推,最终得出哪条复杂选择器拥有的权重更高。
例:
#test p.class1 {...}
#test .class1.class2 {...}
//两者对应同一元素,元素听谁的?
解:
复杂选择器 标识数
#test p.class1 {...} a=0, b=1, c=1, d=1
#test .class1.class2 {...} a=0, b=1, c=2, d=0

由该表可知,标识 a 和 b 两条复杂选择器拥有数目相同,而标识 c 第二行拥有数高于第一行,因此第二行的权重高于第一行。


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

<style type="text/css">
    a {
        color: red;
    }
    a:visited { //小心顺序
        color: black;
    }
    a:hover {
        color: blue;
    }
    a:active {
        color: yellow;
    }
</style>

顺序是 a:link -> a:visited -> a:hover -> a:active,如果不按照这个顺序,则可能出现属性被相互覆盖而无法获得想要得到的效果。


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

#header{
} //选取 Class 为 header 的元素

.header{
} //选取 ID 为 header 的元素

.header .logo{
} //选取 ID 为 header 的所有 ID 为 logo 的后代;

.header.mobile{
} //选取 Class 中同时包含 header 和 mobile 的元素;

.header p, .header h3{
} //选取 Class 中包含 header 的 p 标签和 h3 标签

#header .nav>li{
} //选取 Class 包含 header 的 ID 为 nav 的后代元素的所有标签为 li 的直接子元素

#header a:hover{
} //选取 Class 包含 header 的所有标签为 a :hover 后代元素

#header .logo~p{
} //选取 Class 包含 header 的 ID 为 logo 的子元素之后的同级标签为 p 的元素

#header input[type="text"]{
} //选取 Class 包含 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
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素

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

div:first-child:匹配其父元素的第一个子元素,其选取了所有 div 标签的父元素的第一个子元素。
div:first-of-type:匹配其父元素第一个使用同种标签的子元素,其选取了所有 div 标签的父元素的第一个也是 div 标签的子元素。


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

<style>
    .item1:first-child{
      color: red;
    } //该选择器选择了所有 Class 为 item1 的父元素的第一个子元素
    .item1:first-of-type{
      background: blue;
    } //该选择器选择了所有 Class 为 item1 的元素(标识 A)的父元素的第一个标签与 A 元素相同的子元素
</style>

 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

CSS 中的第一个选择器选择了所有 Class 为 item1 的父元素的第一个子元素,三个 Class 为 item1 的元素的父元素都是<div class="ct">,其第一个子元素为<p class="item1">aa</p>,故 aa 显示为红色。

CSS 中的第二个选择器选择了所有 Class 为 item1 的元素(标识 A)的父元素的第一个标签与 A 元素相同的子元素,<p class="item1">aa</p>父元素的第一个标签为 p 的子元素即是其自身,<h3 class="item1">bb</h3><h3 class="item1">ccc</h3>的父元素的第一个标签为 h3 的子元素为<h3 class="item1">bb</h3>,故而 aa 和 ccc 的背景颜色为蓝色。

相关文章

  • 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/bbbenttx.html