美文网首页
HTML5小记十六bin样式,跨域,选择器

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

作者: 涛涛灬灬 | 来源:发表于2017-03-21 20:43 被阅读0次

1.设置button的样式
<button type="button"></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样式,跨域,选择器

    1.设置button的样式 此时的button默认样式是有周边的水印样式;在css中添加代码:border: n...

  • Howler 音频资源跨域提示html5

    Howler 音频资源跨域提示html5 使用howler 播放音频时,会遇到资源跨域报错,因为Howler默认使...

  • postMessage 相关漏洞分析与分享

    前言 postMessage API 是在 HTML5 中引入的通信方法,可以在标签中实现跨域通信。 跨域嘛,大家...

  • iframe在ios宽度扩大解决方案

    样式 html 非跨域 不跨域以上方法可以完美解决,但是在跨域的情况下,就会报:game:105 Uncaught...

  • JS跨域

    JS跨域--H5 postMessage window.postMessage是html5中新增了一个新的跨域方法...

  • Access-Control-Allow-Origin 跨域设置

    在HTML5中有一种新的跨域方式,即设置“Access-Control-Allow-Origin”可以指定允许跨域...

  • CSS 选择器

    选择器决定了样式规则适用于哪些元素。 html5有以下常见的选择器: 一、基本选择器: 1. 元素选择器 格式:标...

  • H5跨域,同源的原理

    这篇文章写的非常好 HTML5解决跨域问题

  • 跨域

    HTML5 Access-Control-Allow-Origin解决跨域问题http://www.phpvar....

  • HTML5选择器

    @(HTML5)[HTML5选择器] [TOC] 二、HTML5选择器 CSS选择器回顾 ID选择器 类名选择器:...

网友评论

      本文标题:HTML5小记十六bin样式,跨域,选择器

      本文链接:https://www.haomeiwen.com/subject/blbwnttx.html