从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）

前注：图片和部分内容引用的网易云课堂的，所以，侵，私信，删。

这篇也算上周的

（10）打开一个网页时，以新窗口形式打开

将

新增属性：

即可。

（11）关于块间的莫名空隙

假设有html代码：

</div>

</div>

其有css属性：

#mm{

margin:20px;

}

问题：

若给a块和b块染色，会发现，a块和b块之间将会有一定空隙（透明的）。

解决办法：

①给mm的父块a和b，增加一条属性：

padding:1px;

即可（不能是0）。（背景色将自动填充空隙区域）

②如果想避免在其他方向出现的空隙，那么在只在需要的方向（例如只对padding-top和padding-buttom设置属性）

（12）背景图片（完全填充）

HTML代码：

<divid="Layer1">

<imgsrc="data:image/index_bg2.jpg" height="100%"width="100%"/>

</div>

CSS代码：

#Layer1

{ /*由于背景图片不能缩放，故如此设置*/

position:absolute;

width:100%;

height:100%;

z-index:-1;

opacity:0.7;

}

即可

（13）输入框在空的时候有文字，输入内容后消失

这里的placeholder="过滤"，就是底文字

（14）鼠标移动到上面的时候，显示提示

如代码：

效果：

（15）HTML标签图

注：这个图片是从网易云课堂截取的。

（16）设置文本垂直居中

简单办法是：在CSS属性里，设置

line-height: xx px;

其中的xx，值和这个div块的height的一样。

（17）选择器整理

选择器	方法	HTML	示例
id	#id名	<p id="a">	#a{xxxx}
class	.class名	<p class="a">	.a{xxx}

通配符	通配符名	<div>	div{xxxx} 如果是*，表示所有元素
属性	disabled	<input disabled> <xx type="button>	[disabled]{xxxx} [type=button]{xxx}
选择所有有class="a"的	[class~=class名]	<x class="a b"> <x class="a"> 两个被同时选中	[class~=a]{xxx}
选择所有某属性的值里有pp	[属性\|=pp]	<p lang="pp"> <p lang="bpp"> 都要被选中	[lang\|=pp]{xxx}

②

选中href里面，有#的（第2、3个），这个符号是英文状态下，shift + 6

③

选中href里面，格式是pdf的（即第二个）

④

选择href里面，值有lady.163.com的所有标签（即1和2）

④伪类选择器

a:link表示，所有链接的样式；

a:visited表示，访问过的链接的样式；

a:hover表示，鼠标移动上去之后的样式；

a:active表示，用户鼠标点击上去之后的样式

其中hover和active还可以对其他的生效。

如果四个都用，要按顺序来写。

⑤不同状态下的样式

enabled表示，可用时的样式；

disabled表示，不可用时的样式；

checked表示，选中时的样式。（比如单选框）

⑥和列表相关的

li:first-child{xxxx}表示第一个的样式

li:last-child{xxx}表示最后一个的样式

li:nth-child(even){xxx}表示奇偶相间的，偶数项的样式，odd表示奇数项。注意，如果有其他<p>或者<li>标签或其他，虽然标签名不同，但依然会影响起效果的顺序（比如奇数变偶数）。

even可以修改，比如使用2n+2（n从0开始），表示选择2、4、6项个子元素。

也可以改为：li:nth-last-child(2n+2){xxx}表示倒着数第2、4、6个，这里是5、3、1项

⑦只选中只有一个子元素的项

html代码如：

<html><body><ol><li>aa</li></ol><ul><li>bb</li><li>cc</li></ul><p>qq</p></body><style>:only-child{color:red;}</style>
</html>

只影响aa

⑧对于自定义列表，选择第一个<dd>

dd:first-of-type{color:red}

效果是Dave Shea那项变红色（但人民邮电出版社不变）

first-of-type表示第一个这个类型（dd）的元素。

可以更改为last-of-type（最后一个）

nth-of-type(even) 表示偶数个

nth-last-of-type(2n)倒数的偶数项的元素

⑨选择在A标签范围内，只有一个B标签的B标签

如第一行有2个<span>，而第二行只有一个<span>

若对第二行CSS染色，使用

span:only-of-type{xxxx}

⑩不常用的

:empty 选中页面中没有子元素的元素

:root 选中根标签

:not() 不包含某个选择器的元素，参数是简单选择器

:target 选中被锚点选中的目标元素

:lang() language为某些特殊值的元素

简单选择器组合起来之后，表示两个条件都符合的元素。

从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）相关推荐

从零开始学_JavaScript_系列（16）——CSSlt;3gt;（文本、对齐、圆角、盒模型、背景）...
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网 ...
从零开始学_JavaScript_系列（五）——dojo（基础，动画移动，重力模拟，动画合并，添加标签）
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版如果需要讨论,请评论.或者站内信,我会尽快回复. (1)加载 ①首先 ...
从零开始学_JavaScript_系列（五）——dojo（基础，动画移动，重力模拟，动画合并，添加标签）...
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版如果需要讨论,请评论.或者站内信,我会尽快回复. (1)加载 ①首先 ...
从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...
5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式 ...
从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）...
jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuer ...
从零开始学_JavaScript_系列（九）——dojo(2)（AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅）
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...
从零开始学_JavaScript_系列（24）——查看对象属性，合并数组
(35)查看对象是否有某个属性(转) 来源: http://www.cnblogs.com/snandy/archive/2011/03/04/1970162.html 内容: 两种方式,但稍有区别 ...
从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
从零开始学_JavaScript_系列（22）——dojo(9)（表单、JsonRest的post方法，widget的使用思路）...
(74)dojo的表单模块插件:dojo/dom-form 参数:domForm 解释: 当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮.多选按钮),我们必须将这些输 ...
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）...
结论请看最后的图片关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...

从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）

从零开始学_JavaScript_系列（13）——CSS2（新窗口打开，背景图片填充，底文字，小提示，CSS选择器整理）相关推荐

最新文章

热门文章