美文网首页
css选择器

css选择器

作者: 小周师傅 | 来源:发表于2016-07-14 15:17 被阅读0次

1.CSS选择器常见的有几种?

  • 基础选择器
* {
    font-family: '微软雅黑';
}

#id-selector{
    color: #333;
}

.class-selector{
    background: #f1f1f1;
}

p {
    height: 50px;
    line-height: 50px;
}
  • 组合选择器
  • 属性选择器
    属性选择器可以根据某个属性是否存在或属性的值寻找元素,以此来实现功能
    例如:input[type='text'],设置input标签的样式,不用另外增加class名

  • 伪类选择器
    有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态,此时使用伪类选择器完成

  • 伪元素选择器

伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元素上添加类别的,就是伪类。而这也是为什么,标准精确地使用 “create” 一词来解释伪元素,而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素,另一个则是描述已经存在的符合“幽灵”类别的元素。

伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

2.选择器的优先级是怎样的?

具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则特殊性相同,那么后定义的规则优先。

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

3.class 和 id 的使用场景?

使用class标签标示页面类型,使用ID标示特定页面,可以灵活控制站点的设计和布局

4.使用CSS选择器时为什么要划定适当的命名空间?

主要是为了使自己定义的样式只对当前区块生效,避免与他人产生冲突

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

1.#header{} ——选取id=header的标签为其添加样式
2..header{}——选取class=header的标签为其添加样式
3..header .logo{}——选取class=header的标签后代中 class="logo"的标签为其添加样式
4..header.mobile{}——选择class=header和mobile的元素
5..header p, .header h3{}——选择class=header标签中后代为p和h3的元素
6.#header .nav>li{}——选取id=header的元素后代中class为nav元素的直接后代li元素
7.#header a:hover{}——选取id=header的元素后代中a元素为其添加鼠标悬停时的样式.

6.列出你知道的伪类选择器

E:first-child ——匹配元素E的第一个子元素
E:link ——匹配所有未被点击的链接
E:visited ——匹配所有已被点击的链接
E:active ——匹配鼠标已经其上按下、还没有释放的E元素
E:hover ——匹配鼠标悬停其上的E元素
E:focus ——匹配获得当前焦点的E元素
E:checked ——匹配表单中被选中的radio或checkbox元素
E:first-of-type ——匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type ——匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

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

  • :first-child匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素,示例中显示,即使是嵌套关系下的第一个子元素,也是会被匹配。
  • :first-of-type匹配的是某父元素下相同类型子元素中的第一个,不限制是第一个子元素,只要是该类型元素的第一个就可以。

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

<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匹配父元素的第一个子元素,即p标签,aa样式变为红色
.item1:first-of-type匹配父元素的第一个类型元素,p标签和第一个h3标签都被修改了样式,加上蓝色的背景颜色,第二个h3标签没有改变

9.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align: center——让块级元素内部的行内元素(如文本和图片)水平居中。

10.如果遇到一个属性想知道兼容性,在哪查看?

caniuse上查看

相关文章

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