选择器定义和使用

2022-11-09  本文已影响0人  九天懒猫

1-选择器,CSS选择器用于选择你想要的元素的样式的模式;

2-选择器位置,在head标签包裹,title结束标签后;

3-基础选择器:

3-1标签-选择器:

浏览器显示如下图:

代码内容如下图:

3-2类-选择器

浏览器显示如下图:

代码内容如下图:

3-3 id-选择器

identity 选择器,就像是身份证号码或者dna,不可重复;

3-4通配符-选择器

*{css属性名:属性值}

class 类选择器,可重复,像水,可以放在很多标签里使用;

4-使用方式

在一般情况下:我们利用class来为元素添加样式;

css 利用id来为元素添加行为;

(我才自学到css,对于js还没有开始学,如果有写的有问题的地方,麻烦留言指正就好)

常见class关键词:

  1. 布局类:header, footer, container, main, content, aside, page, section
  2. 包裹类:wrap, inner
  3. 区块类:region, block, box
  4. 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
  5. 列表类:list, item, field
  6. 主次类:primary, secondary, sub, minor
  7. 大小类:s, m, l, xl, large, small
  8. 状态类:active, current, checked, hover, fail, success, warn, error, on, off
  9. 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
  10. 交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
  11. 星级类:rate, star
  12. 分割类:group, seperate, divider
  13. 等分类:full, half, third, quarter
  14. 表格类:table, tr, td, cell, row
  15. 图片类:img, thumbnail, original, album, gallery
  16. 语言类:cn, en
  17. 论坛类:forum, bbs, topic, post
  18. 方向类:up, down, left, right
  19. 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

引用来自“class如何命名更规范”的文章内容

(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)

上一篇下一篇

猜你喜欢

热点阅读