HTML5小记十六bin样式,跨域,选择器

1.设置button的样式

此时的button默认样式是有周边的水印样式;在css中添加代码:
border: none;
或者 border: 1px #ff0000 solid; 此时的颜色#ff0000根据背景色自行设置;
将button的背景图片设置为自适应,解决背景图片显示不全的问题:
background-size: cover;
2.关于跨域的报错:

XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.

将请求类型设置为jsonp格式

dataType:'JSONP',
    jsonpCallback: "doJsonP",
    jsonp: "callback",

3.关于一些css的选择器

X[href="foo"]:::
a[href="http://strongme.cn"] {
  color:  green;  
}
上面这片代码将会把`href`属性值为`http://strongme.cn`的锚点标签设置为绿色,而其他标签则不受影响。

4.A:hover 鼠标滑过

hover:hover{

background: #e3e3e3;

}
5.A:not(selector)取反伪类,将

.test1:not(#container) {
color: blue;
}
上述代码将除去类为test1的所有的 设置为blue颜色;
6.A::pseudoElement
p::first-line {
font-weight: bold;
font-size:1.2em;
}
使用::来选中某标签的部分内容,如地一段,或者是第一个字没有。但是记得必须使用在块式标签上才起作用。
伪标签是由两个冒号 :: 组成的。

定位第一个字
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
上面这段代码会找到页面上所有段落,并且指定为每一段的第一个字。
它通常在一些新闻报刊内容的重点突出会使用到。
定位某段的第一行
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
::first-line相似,会选中段落的第一行 。
为了兼容性,之前旧版浏览器也会兼容单冒号的写法,例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。

7.A:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
同样,也可以类似的使用nth-last-of-type来倒序的获取标签。

8.A:first-child
ul li:first-child {
border-top: none;
}
这个结构性的伪类可以选择到第一个子标签,经常使用它来取出第一个和最后一个的边框。
假设有个列表,没个标签都有上下边框,那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
与之相反的属性 A:last-child 用法一致
9.A:only-of-type
li:only-of-type {
font-weight: bold;
}
结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的ul标签?
使用ul li会选中所有li标签。这时候就要使用only-of-type了。

你可能感兴趣的:(HTML5小记十六bin样式,跨域,选择器)