CSS整理(4)
来源:互联网 发布:java语言程序设计基础 编辑:程序博客网 时间:2024/06/06 05:29
CSS 元素选择器
文档的元素就是最基本的选择器。选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
<pre name="code" class="css"><span style="font-size:14px;">
html {color:black;} p {color:gray;} h2 {color:silver;}</span>
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通配符选择器
* {color:red;}
p.important {color:red;}
.important.warning {background:silver;} (同时拥有)
a[href][title] {color:red;} 属性选择器
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
p[class="important warning"] {color: red;}
p[class~="important"] {color: red;} (属性值包含)
*[lang|="en"] {color: red;}选择 lang 属性等于 en 或以 en- 开头的所有元素,enabc 则不会匹配
h1 em {color:red;} (只h1下的em)后代选择器,两个元素之间的层次间隔可以是无限的。
h1 > strong {color:red;}
只选择某个元素的子元素,请使用子元素选择器相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素
h1 + p {margin-top:50px;color:red;} (只p变,h1不会变化)
<style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}</style>a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
a:active 必须位于 a:hover 之后,这样才能生效
input:focus{ background-color:yellow;}
li:first-child {text-transform:uppercase;}
a.red : visited {color: #FF0000}
p:first-child { color: red; } <p>some text</p> (选中,变色)<p>some text</p> (未选中,不变色)
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
h1:before { content:url(logo.gif); }
h1:after { content:url(logo.gif); }
CSS 图像透明度
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
div.transbox{ width: 338px; height: 204px; margin:30px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6;}
0 0
- CSS整理(4)
- CSS兼容(整理)
- CSS 整理(1)
- CSS 整理(2)
- CSS 整理(3)
- 【整理】css小记(不断更新)
- CSS整理
- CSS整理
- CSS整理
- CSS整理
- CSS整理
- css整理
- css整理
- CSS整理
- css整理
- css整理
- css整理
- CSS整理
- 对象建模方法与技术学习笔记(一)
- Python进阶安装第三方模块
- 使用openssl生成PEM格式私钥和公钥及ECDSA签名
- 【Cocos2d入门教程九】浅析Cocos2d下的加速计事件
- 【Lua】table
- CSS整理(4)
- 编程之美:第四章 数字之趣 4.2瓷砖覆盖地板
- 矩阵链相乘
- win7虚拟光驱+iso文件升级win10
- 聚类算法(1)——层次、K-means聚类
- 数据结构导论(一)
- 为什么要使用抽象类
- epoll
- Xcode6及以上安装VVDocumenter