1.如div{...}会给所有的<div></div>增加样式。

2.名前井号“#”：对应html中的标签的id属性，写法为#name。如#p1{...}会给<p id="p1">ID is p1</p>增加样式。

3.名前小数点“.”：对应html中标签的class属性，写法为.name。如.p2{...}会给<p class="p2">CLASS is p2</p>增加样式。

4.中间空格“ ”：关系到html标签的层次，写法为css css[ css[... css]]，可以设多层。如DIV #p1 .span1{...}

则会给<div><p id="p1"><span class="span1"></span></p></div>中最内部的span1增加样式。

这样写的CSS必须严格遵守CSS与HTML标签层次，以下情况不会被这条CSS所应用：

<span class="span1"></span>

<p id="p1"><span class="span1"></span></p>

<div><span class="span1"></span></div>

5.中间逗号“,” ：表示并列关系，即该CSS有多个名称（可以精简重复的CSS样式）

如body,form,div{...}会为所有的<body></body>、<form></form>、<div></div>增加样式

6.名后冒号“:”：一般是指状态

如a:hover表示当鼠标悬停在a标签上时使用的样式

7.style中点代表类class,#代表id,也可以注释

h1代表html中的元素

tr.hr代表元素的子元素

css样式小框架的更多相关文章

  1. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  2. css 样式小窍门

    css 样式小窍门 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  4. 小谢第8问：ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  5. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  6. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  7. CSS 样式显示为小手

    因为工作需要把鼠标放上去显示小手形状, css样式如下: style="cursor:hand"    部分浏览器支持 style="cursor:pointer&quo ...

  8. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  9. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

随机推荐

  1. python3爬取咪咕音乐榜信息（附源代码）

    参照上一篇爬虫小猪短租的思路https://www.cnblogs.com/aby321/p/9946831.html,继续熟悉基础爬虫方法,本次爬取的是咪咕音乐的排名 咪咕音乐榜首页http://m ...

  2. G - Dreamoon and NightMarket Gym - 101234G 优先队列+思路

    题目:题目链接 题意:给出n种食物,食物有自己的价格并且可以自由搭配,每天吃之前没吃过的花费最少的搭配,问第k天的花费. 思路:第k小我们考虑用优先队列处理,虽然n比较大,但由于1 ≤ K ≤ min ...

  3. miniui IE对省略号即text-overflow:ellipsis显示不一样的问题

    做miniui项目中发现,IE对文本以英文或数字结尾的是英文的省略号,以汉字结尾的就是中文的省略号.只要将字体变为统一宋体即可解决.即 .mini-grid-cell-inner    {       ...

  4. 关于IOS下日期格式分隔符 - 、 /的问题

    之前我们项目有一个低价日历,服务端下发的时间格式为: "2014-07-21 09:45:12"  然后一直出不了数据,后来发现. IOS下无论chrome.safari还是Uc如 ...

  5. 【vim环境配置】在centos6.4上配置vim的一些零碎记录

    上一篇日志已经step by step地实录了如何在本机mac上配置vim开发环境已经各种插件. 有了一定经验之后,开始在实验室远程server上centos6.4的环境下配置vim环境. 这台机器是 ...

  6. Nuget的使用笔记-（使用nuget发布dll到www.nuget.org）

    Nuget是神马东东? 来自nuget.org官方的介绍 ----------------------------------------------------------------------- ...

  7. 收集的java面试题

    1.谈谈final, finally, finalize的区别. final—修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 ...

  8. ssm项目中ueditor富文本编辑器的使用

    一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...

  9. 【多线程学习（2）】继承Thread类和实现Runnable接口、Callable接口的区别

    1)Runnable和Callable同是接口 * Callable的任务执行后可返回值,而Runnable的任务是不能返回值(是void);call方法可以抛出异常,run方法不可以 * 运行Cal ...

  10. HDU 3957 Street Fighter （最小支配集 DLX 重复覆盖+精确覆盖 ）

    DLX经典题型,被虐惨了…… 建一个2*N行3*N列的矩阵,行代表选择,列代表约束.前2*N列代表每个人的哪种状态,后N列保证每个人至多选一次. 显然对手可以被战胜多次(重复覆盖),每个角色至多选择一 ...