选择器定义和使用
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关键词:
- 布局类:header, footer, container, main, content, aside, page, section
- 包裹类:wrap, inner
- 区块类:region, block, box
- 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表类:list, item, field
- 主次类:primary, secondary, sub, minor
- 大小类:s, m, l, xl, large, small
- 状态类:active, current, checked, hover, fail, success, warn, error, on, off
- 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星级类:rate, star
- 分割类:group, seperate, divider
- 等分类:full, half, third, quarter
- 表格类:table, tr, td, cell, row
- 图片类:img, thumbnail, original, album, gallery
- 语言类:cn, en
- 论坛类:forum, bbs, topic, post
- 方向类:up, down, left, right
- 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
引用来自“class如何命名更规范”的文章内容
(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)