CSS选择符补充.docx
《CSS选择符补充.docx》由会员分享，可在线阅读，更多相关《CSS选择符补充.docx（18页珍藏版）》请在冰豆网上搜索。
CSS选择符补充
选择符补充
1.上下文选择符：
例：
pem{color:
green;}//中间用空格作为分隔符
又例：
articleem{color:
green;}//article与em之间是否还隔着其他元素，都不能影响结果，只要em在整个层次结构中有一个叫article的祖先元素即可。
又例：
articleh1em（color:
green;）//选中的em必须有一个祖先是h1，后进而还要有一个祖先是article。
2.特殊的上下文选择符
显示效果：
图1
（1）子选择符>
标签1>标签2//标签2必须是标签1的子元素
例：
section>h2{font-style:
italic;}
h2是section额子元素，故而被选中。
（2）紧邻同胞选择符+
标签1+标签2//标签2必须紧跟在其同胞标签1的后面
例：
h2+p{font-variant:
small-caps;}
第一个p由于是h2的紧邻同胞而被选中
（3）一般同胞选择符~
标签1~标签2//标签2必须跟（不一定紧跟）在同胞标签1后面
例：
h2~a{color:
red;}
只选中了同胞元素
（4）通用选择符*
*——通用选择符匹配任何元素
例：
*{color:
green;}
又例：
p*{color:
red;}//这样只会把p包含的所有元素的文本变成红色。
这个选择符还有一个非常有意思的用法，即用它构成非子选择符，比如：
section*a{font-size:
1.3em;}
//任何事section孙子元素，而非子元素的a标签都会被选中。
至于a的父元素是什么，都没有关系。
3.继承和上下文选择符能让不同的标签共享样式，从而降低需要编写和维护的CSS量，所以不要过度的设置类。
4.ID与类
最顶级的区域可以使用ID来标记，它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签；
类是可以应用给任意多个页面中的任意多个HTML元素的公共标示符，以便我们为这些元素应用相同的CSS样式。
而且，使用类也让不同标签名的元素应用相同的样式称为可能。
5.属性选择符
6.
在HTML元素处于某个状态时（比如鼠标指针位于连接上），为该元素应用CSS样式
伪类
UI伪类：
在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式
结构化伪类：
伪类
（一）UI伪类
（1）链接伪类：
a:
link;（等待点击）
a:
visited;（曾点击过）
a:
hover;（悬停）
a:
active:
（正在点击，未释放）
注意：
由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期效果。
一般情况下，：
link和：
hover就足够了。
但如果你有一个长长的目录链接，那么用稍浅一点颜色（例：
gray，#eee）显示出那些已经访问过（即点击过）的链接，对用户会很有帮助。
然而，修改导航条visited状态的颜色就没有意义了。
注意：
有些伪类可以应用与任何元素，
例p:
hover{background-color:
gray;}
（2）:
focus伪类
e:
focus//其中的e代表任何元素
:
focus——表单中的文本字段在用户点击它时会获得焦点，然后用户才能在其中输入字符。
下面的规则
input:
focus{border:
1pxsolidblue;}
会在光标位于input字段中时，为该字段添加一个蓝色边框。
这样可以让用户明确地知道输入的字符会出现在哪里。
（3）:
target伪类
e:
target//其中的e代表任何元素
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用：
target伪类选中它。
（二）结构化伪类
（1）:
first-child和:
last-child
:
first-child——代表一组同胞元素中的第一个元素；
:
last-child——代表一组同胞元素中的最后一个元素；
（2）:
nth-child
例：
e:
nth-child（n）//（n表示一个数值）表示一组列表项中的每个第n项。
（三）伪元素
（1）：
：
first-letter伪元素——首字符
例：
p:
:
first-letter{font-size:
300%;}//实现段首字符放大效果
（2）：
：
first-letter伪元素——首行
例：
p:
:
first-line{font-variant:
small-caps;}//将第一行变成小型大写字母
（3）：
：
before和：
：
after伪元素——用于在特定元素前面或后面添加特殊内容
例：
以下标记
25
和如下样式
p,age:
:
before{content:
”Age:
”;}
p.age:
:
after{content:
”years.”;}
能得到以下结果：
Age：
25years.
如果标签中的内容是通过数据库查询生成结果，那么用这种技巧再合适不过了。
因为所有结果都是数字，使用这两个伪元素可以在把数字呈献给用户时，加上说明性文字。
同时，搜索引擎不会去的伪元素的信息（因为它在标记中不存在），因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。
定位元素——盒模型
1.每个元素盒子的属性：
边框（border）：
可以设置边框的宽窄、样式和颜色。
内边距（padding）：
可以设置盒子内容区和边框的间距。
外边距（margin）：
可以设置盒子与相邻元素的间距。
2.叠加外边距（margin）
垂直方向上的外边距会产生叠加，即较宽的外边距决定两个元素最终离多远。
而水平外边距不叠加，对于水平相邻的元素，它们的水平间距是相邻外边距之和。
3.外边距的单位
根据经验，为文本元素设置外边距时通常需要混合使用不用的单位。
比如说，一个段落的左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响。
而对于上、下外边距，以em为单位则可以让段间距随字号变化而相应增大或缩小，比如：
/*这里使用了间些属性把上、下外边距设置为.75em，把左、右外边距设置为30像素*/
p{font-size:
1em;margin:
.75em30px;}
这样，段落的垂直间距始终会保持为字体高度的四分之三（上下外边距都是.75em，叠加后还是.75em）。
如果用户增大了字号，那么不仅段落中的文本会变大，段间距也会成比例变大。
这样，页面的整体布局就会比较协调一致。
与此同时，使用像素单位的左、右外边距不会改变。
我想，你应该也不会想让字号变化影响到布局宽度吧。
4.盒模型结论一：
没有（就是没有设置width的）宽度的元素始终会扩展到填满父类元素的宽度为止。
添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
显示效果：
5.盒模型结论二：
未设定了宽度的合资添加边框、内边距和外边距，会导致盒子扩展的更宽。
实际上，盒子的width属性设定的只是盒子内容的宽度，而非盒子要占据的水平宽度。
6.根据4.和5.可知：
设定了元素的width属性之后，在给元素添加边框、内边距和外边距，元素的行为与默认的auto状态下会有截然不同的表现。
7.浮动：
把元素从常规文档中拿出来。
意识可以实现传统出版物上那种文字绕排图片的效果，二是可以让原来上下堆叠的会计元素，变成左右并列，从而实现布局中的分栏。
8.如果浮动脱离了常规文档流之后，原来跟随其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。
如果浮动元素后边有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），怎么办？
用clear属性来“清除”第二段，然后它就乖乖地呆在浮动元素下面了。
示例一：
注意：
浮动非图片元素时，必须给它设定宽度，否则后果难以预料。
图片无所谓，因为它本身有默认的宽度。
定位
1.position属性
position属性的4个值：
static、relative、absolute、fixed（默认是static）
（1）静态定位——static
在静态定位的情况下，每个元素处在常规文档流中。
（2）相对定位——relative
相对定位：
相对的是它原来在文档流中的位置（或者默认位置）。
可以用top、right、bottom、left属性来改变它的位置。
此时，这个元素原来占据的空间没有动，其他元素也没有动。
如图所示：
可以给第四段设置一个30像素或更大的margin-top值，让它向下移动，从而避免被重新定位的第三段挡住。
（3）绝对定位——absolute
绝对定位跟静态定位和相对定位相比，绝对不一样。
因为绝对定位会把元素彻底从文档流中拿出来。
如图所示：
可以看到元素之前占据的空间被“回收了”。
在绝对定位下，元素完全脱离了常规文流，它现在是相对于顶级元素body在定位。
即绝对定位元素默认的定位上下文是body元素，所以在页面滚动的时候，为了维护与body元素的相对位置关系，它也会相应地移动。
（4）固定定位——fixed
从完全移出文档流的角度来说，固定定位与绝对定位类似。
但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动二移动。
固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。
2.定义上下文
上一级：
relative；下一级：
absolute；
显示属性
1.display属性
Ødisplay：
inline；
Ødisplay：
block；
Ødisplay：
none；//该元素及所有包含在其中的元素，都不会再页面中显示，它原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。
2.visibility属性
visibility属性最常用的的两个相对的值是visible（默认值）和hidden。
把元素的visibility属性设定为hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。
背景
3.CSS背景属性：
Øbackground-color
Øbackground-image
Øbackground-repeat
Øbackground-position
Øbackground-size
Øbackground-attachment
Øbackground（简写属性）
Øbackground-clip、background-origin、background-break（目前尚未得到广泛支持）
2.color定义前景色，及影响文本，也影响边框
3.background-image：
url（图片路径/图片文件名）
图片地址两边不用引号，但加了也没问题。
要改变默认的水平和垂直重复效果，可以修改background-repeat属性；要改变背景图片的起点，可以修改background-position属性
（1）背景重复——background-repeat
background-repeat值：
repeat（默认）、repeat-X、repeat-Y、no-repeat
补充：
CSS3还规定了另外两个background-repeat值（但尚未得到浏览器支持），以控制背景图片重复确切的次数，即所有图片都是完整的，不会出现半张图片的现象。
background-repeat：
round；为确保图片不被剪切，通过调整图片大小适应背景区域。
background-repeat：
space；为确保图片不被剪切，通过在图片间添加空白来适应背景区域。
（2）背景位置——background-position
background-position有五个关键字值：
top、left、bottom、right、center
例：
background-position：
rightbottom；
background-position：
centercenter；（也可只写center）
background-position：
50%50%；
补充：
通过把background-position设定为50%50%，把background-repeat设定为no-repeat，实现了图片在背景区域内居中的效果。
文本在元素中居中，可将line-height设定为元素的高度，而行高是在文本行上下平均分配的，再将text-align设定为center，把文本水平居中。
（3）背景位置的值
设定背景位置时可以使用三种值：
关键字、百分比、绝对或相对单位的数值。
可以使用两个值分别设定水平和垂直位置。
关键字指的顺序不重要，leftbottom和bottomleft意思相同。
为了设定的值在所有浏览器中都有效，最好不要混用关键字值和数字值。
使用数值（比如40%30%）时，第一个值表示水平位置，第二个值表示垂直位置。
要是只设定一个值，则将其用来设定水平位置，而垂直位置会被设为center。
在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。
换句话说，如果设定了33%33%，则图片水平33%的位置和元素水平33%的位置对齐，垂直方面也一样。
例如，通过centercenter把图片的中心点定义在了元素的中心点。
像素之类的绝对单位数值就不一样了，要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。
有意思的是，还可以使用负值。
这样就可以把图片的左上角定义到元素外部，从而在元素中只能看到部分图片。
当然，给图片设定足够大的正值，也可以把图片的右下角推到元素外部，从而在元素中也只能看到部分图片。
位于元素外部的那部分图片不会显示。
4.背景尺寸——background-size
background-size属性用来控制背景图片的尺寸，可以给它设定的值及含义如下：
Ø50%：
缩放图片，使其填充背景区的一半
Ø100px50px：
把图片调整到100像素宽，50像素高
Øcover：
大大图片，使其完全填满背景区；保持宽高比
Øcontain：
缩放图片，时期恰好适合背景区；保持宽高比
应注意，不要将原本很小的图片拉得太大，那样会导致图片质量失真。
5.背景粘附——background-attachment
background-attachment属性控制滚动元素内的背景图片是否随元素滚动而移动。
这个属性的默认值是scroll，及背景图片随元素移动。
如果把它的值改为fixed，那么背景图片不会随元素滚动而移动。
background-attachment：
fixed；最常用于给body元素中心位置添加淡色水印，让水印不随页面滚动而移动。
实现这种效果的CSS规则如下：
body{
background-image:
url（watermark.png）;
background-position:
center;
background-color:
#fff;
background-repeat:
no-repeat;
background-size:
contain;
background-attachment:
fixed;
}
简写背景属性：
如上述可写为：
body{background:
url（watermark.png）center#fffno-repeatcontainfixed;}
6.其他CSS背景属性（浏览器不一定支持）
Øbackground-clip：
控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。
默认情况下，背景绘制区是扩展到边框外边界的。
Øbackground-origin：
控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置。
比如，可以设定以内容区左上角作为原点。
Øbackground-break：
控制分离元素（比如跨越多行的行内盒子）的显示效果。
7.背景渐变
渐变就是在一定长度内两种或多种颜色之间自然的过渡。
渐变分两种：
一种是线性渐变，一种是放射性渐变。
线性渐变从元素的一端延伸到另一端，放射性渐变则从元素内一点向四周发散。
升级会员 