美文网首页
css选择器

css选择器

作者: _Josh | 来源:发表于2016-06-30 22:40 被阅读28次

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

  1. 基础选择器
  • 通用元素选择器
  • ID选择器
  • 类选择器
  • 标签选择器
  1. 组合选择器
  2. 属性选择器
  3. 伪类选择器
  4. 伪元素选择器

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

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式<h1>我是标题哦</h1> !important
2.作为style属性写在元素标签上的内联样式;<h1 style="color:red;">我是标题哦</h1>
3.id选择器;#id{ color:red; }
4.类选择器;.class{ color;green; }
5.伪类选择器;.box>h1:first-of-type{color:#99f }
6.属性选择器;a[href] {color:red;}
7.标签选择器;p{ color:red; }
8.通配符选择器;* {font: 15px #ccc '微软雅黑';}
9.浏览器自定义;

简单来说一句话谁更具体用谁,也就是权值高的选择器作用的越具体优先级越高,如果权值一样,按浏览器从上到下的顺序,后面会覆盖掉前面的。


3 . class 和 id 的使用场景?

选择器 使用场景
class 把一些特定的样式放到一个class类中。是一个类可以反复使用同时对应多个控件
id 根据提供的唯一id号,快速获取标签对象。如:document.getElementById(id)具有唯一性只能使用一次
概念上 id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

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

1、提高代码的可读性;
2、便于维护管理;
3、保持代码的可拓展性;


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

选择器 解释
#header{} 对id选择器header设置属性
.header{} 对类选择器header设置属性
.header .logo{} 对类选择器header下的类选择器logo设置属性
.header.mobile{} 对同时包含这两个类名的元素设置属性
.header p, .header h3{} 对类header下的p段落和h3设置属性
#header .nav>li{} 为id为header后的类nav下直接子元素li设置属性
#header a:hover{} 为d为header后的a链接鼠标经过设置属性

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

:link /:visited /:hover/:active/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)/::selection/::first-line/::first-letter/::before/::after


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

|.box>h1:first-child|选择 类box所有子元素中的第一个子元素h1|
|---|---|---|
|.box>h1:first-of-type|选择 类box所有h1子元素中的第一个h1|

另外还有:nth-of-type(n):nth-child(n)容易搞错

**:nth-of-type(n)和:nth-child(n) **

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

运行与原因


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

设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
另外:margin:0 auto 设置块元素(或与之类似的元素)的居中。

参考:margin:0 auto 与 text-align:center 的区别


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

can i use网站


       本文版权归作者饥人谷_Josh和饥人谷所有,转载请注明来源

相关文章

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