- 选择器常见的有哪几种? 1.标签选择器 p{ }/选择标签名为p的元素/ 2.类选择器 .box{ }/选择class名为box的元素/ 3.ID选择器 #header{ }/选择id名为header的元素/ 1.4通配符选择器 *{ }/选择页面中所有的元素/ 1.5选择器前缀 div.bd{}/选中class名为bd且标签为div的元素/ 1.6属性选择器 [disabled]{}/选择带有属性disabled的所有元素/
- 选择器的优先级是怎样的? !important>内联样式>ID 选择器>伪类>属性选择器>类选择器>元素(类型)选择器>通用选择器(*)>浏览器自定义
- class 和 id 的使用场景? id根据提供的唯一id号,快速获取标签对象。class把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。
- 使用CSS选择器时为什么要划定适当的命名空间? 为了防止样式污染。
- 以下选择器分别是什么意思? #header{ }/选择id名为header的元素/ .header{ }/选择class名为header的元素/ .header .logo{ }/选择名为header元素内所有名为logo的元素/ .header.mobile{ }/选择class名为header且为mobile的元素/ .header p, .header h3{ }/选择class名为header内所有的p标签和h3标签/ #header .nav>li{ }/选择祖父元素id名为header内父元素class名为nav的标签下/ #header a:hover{ }/选择祖父元素id名为header内a标签被hover的元素/
- 列出你知道的伪类选择器 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。
- 运行如下代码,解析下输出样式的原因。
first-child vs first-of-child
item1ct-item2ct-item1ct-itmm1ct-item2-item1item1
ct-item2
ct-item1ct-itmm1ct-item2-item1 - :first-child和:first-of-type的作用和区别? :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个。
- 如果遇到一个属性想知道兼容性,在哪查看? 在caniuse.com中查看。