【CSS基础】琐碎记录<二>

Love The Way You Lie 2022-08-07 04:51 129阅读 0赞

Tips: 大部分都摘自w3c

一,关于选择器

**后代**选择器,什么是后代选择器,h1标签所有子孙元素为em的都会起效果:

h1 em {color:red;}

**子元素**选择器,什么是子元素选择器 ,h1标签下面的子元素为em的元素.请注意只是儿子元素,孙子元素以及更下层的

h1 > em {color:red;}      >号两边可以有空格符

**相邻兄弟**选择器, h1标签 **之后**的 **同级**元素,有同一个父亲元素.\[必须是同级元素.而且在h1标签的后面的p元素,起效果的也是h1标签后面的元素\]

h1 + p {margin-top:50px;}

**属性**选择器, \[注意\] 只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; width:190px; background-color:rgb(213,213,213)"> 选择器</th> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attribute.asp" title="CSS [attribute] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 用于选取带有指定属性的元素。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attribute_value.asp" title="CSS [attribute=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 用于选取带有指定属性和值的元素。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp" title="CSS [attribute~=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute~=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 用于选取属性值中包含指定词汇的元素。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp" title="CSS [attribute|=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute|=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attr_begin.asp" title="CSS [attribute^=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute^=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 匹配属性值以指定值开头的每个元素。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attr_end.asp" title="CSS [attribute$=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute$=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 匹配属性值以指定值结尾的每个元素。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_attr_contain.asp" title="CSS [attribute*=value] 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">[attribute*=value]</a></td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 匹配属性值中包含指定值的每个元素。</td> 
 </tr> 
 </tbody> 
</table>

二,一些不熟悉的属性

**text-decoration**:

设置透明度: 请看下面的 CSS：

img
    {
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 **opacity** 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 **filter:alpha(opacity=x)**。x 能够取的值从 0 到 100。值越小，越透明。