① 为什么看到有的前端工程师将css每个选择器里的内容写成一行
我也是这样的，纯属个人习惯。而且这样的话会少很多回车换行符和空格，省得专门给它瘦身了，另外这样写可以快速找到某个选择器（不需要翻很多页就能找到），提高了效率。
其实把所有内容都写在一行也是可以的，就是要修改的话就会比较麻烦一些（我是指直接用记事本之类的文本编辑器来修改，如果是网页设计器如DW会自动对代码格式化的），好处就是相当于微微地加密了一下了。
② css后代选择器和子选择器的区别
后代选择器不仅会选择它的孩子，还会选择它的孙子以及孙子的孙子等。
子代选择器只会选择它的孩子，不会选择其孙子。
HTML5基础，建议你去看看HTML5学堂，决胜前端，HTML5布局之路书籍。
③ 【Web前端基础】css3选择器有哪些类型
Css3选择器有很多的类型，它包括很多个类型的型号。
④ Web前端开发技术题 ，列举你知道的CSS选择器及其用法，并按优先顺序排序。
选择器 例子 描述
.class .intro 选择 class="intro" 的所有元素。
#id #firstname 选择 id="firstname" 的所有元素。
* * 选择所有元素。
element p 选择所有 <p> 元素。
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。
element element div p 选择 <div> 元素内部的所有 <p> 元素。
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute] [target] 选择带有 target 属性所有元素。
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。
:focus input:focus 选择获得焦点的 input 元素。
:first-letter p:first-letter 选择每个 <p> 元素的首字母。
:first-line p:first-line 选择每个 <p> 元素的首行。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
⑤ 前端开发 HTML 标签的class属性遇到减号不识别CSS选择器
不用“-”
换编辑器
习惯ST的这个问题
⑥ 前端方面class选择器的问题
不用“-”
换编辑器
习惯ST的这个问题
⑦ 浏览器是怎样解析css选择器的
这里有篇讲大道理的文章：
http://www.cnblogs.com/lhb25/p/how-browsers-work.html
这个一般做前端的都知道点大概原理，但都说不出多少实现细节来，毕竟能开发浏览器内核实现html、css解析和js引擎的都是些大神(国内貌似就没有，国内各种浏览器就是个壳，核心是人家开源的内核)。
英文好的话国外站上去翻翻可能有论文或技术细节，或者牛B的自己去下开源内核把源码读完。
⑧ CSS中的ID选择器和类选择器有什么区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
下面代码是正确的：
而下面代码是错误的：
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用
ID
词列表）。
下面的代码是正确的
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
⑨ 前端类选择器和id选择器混合使用
#customers td,#customers th{}
解释：
ID选择器customers 的子标签td，ID选择器customers 的子标签th
比如以下的布局：
<table id="customers">
<tr>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
</tr>
</table>
那么上面的标题、内容会被样式渲染。
⑩ 前端after选择器在被选元素的内容后面插入内容吗
jQuery中的afterf方法在被选元素后插入指定的内容。如：
$("div").after("<p>Hello world!</p>");
将在div标签后面插入一段文本。