css选择器2

一、CSS选择器常见的有几种?

答案链接

二、选择器的优先级是怎样的?

单个选择器从高到低分别是:
  1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义
组合选择器:
  • 比较组合选择器的权值
  • 相同权值选择器,层级越长优先级越高
  • 相同权值选择器,越接近目标标签则优先级越高
  • 相同优先级相等,需要看在CSS中的顺序,后面的大于前面的

三、class 和 id 的使用场景?

**1. id **指定标签的唯一标识。

  • 1.1 格式:<input type=password id="userpwd" />
  • 1.2 应用场景:
  • 唯一id号,快速获取标签对象。如:document.getElementById(id)
  • 用于充当label标签for属性的值:示例:<label for='userid'>用户名:</label>,表示单击此label标签时,id为userid的标签获得焦点。
  • 一般用于布局(比如 header,content,footer.....),一些独一无二的元素也可以使用。

2. class 指定标签的类名。

  • 2.1 格式:<input type=button class="btn-submit" />
  • 2.2 应用场景:
    • CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。
    • 在HTML中可以多次使用,并且可以多次重复使用同一类名。

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

  • 方便代码的管理与维护
  • 提高代码的可读性
  • 避免与他人代码相冲突

相关参考:
amazeUi-css编码规范1
amazeUi-css编码规范2
CSS命名空间前缀的思考

五、以下选择器分别是什么意思?

#header{} /*匹配id="header"的元素*/
.header{} /*匹配class="header"的元素*/
.header .logo{} /*匹配class="header"元素下的class="logo"的元素*/
.header.mobile{} /*匹配class="header mobile"的元素*/
.header p, .header h3{} /*匹配class="header"元素下的p元素和匹配class="header"元素下的h3元素*/
#header .nav>li{} /*匹配id="header"元素下的class="nav"元素的直接子元素li*/
#header a:hover{} /*匹配id="header"元素下的a元素的:hover伪类*/

六、列出你知道的伪类选择器

答案链接

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

  • :first-child的作用是匹配父元素下的第一个子元素
  • :first-of-type的作用是匹配父元素下指定类型的第一个子元素
    区别:要区别在于:first-of-type选择的子元素是从父元素下的指定类型的第一个子元素,而:first-child选择的子元素是从父元素下第一个子元素

参考:曹婷婷-E:first-child和E:first-of-type

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

Paste_Image.png

蓝色背景
样式里面设置了first-of-type,也就是第一个类型的元素将应用为蓝色背景,而第一个类型就是p和h3,h3有2个,取第一个。
红色字
first-child是指后代中第一个子元素,第一个子元素是p,所以只是p应用了红色字。

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

作用:使行内元素(文字、图片)水平居中
作用元素:块级元素
能让什么元素水平居中:块级元素内部的行内元素

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

利用 can i use 即可查询

<p>版权归本人及饥人谷所有,转载请注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,875评论 0 5
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 885评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,215评论 0 0
  • 一碗面汤揉断肠 ——怀念我的岳母 ...
    中枢居士阅读 314评论 0 0