css笔记之选择器

已经两周过去了，想着坚持着也还是偷了个懒~

就看过的css,自己做了些笔记，如下：以后也好翻找出来当个目录查阅什么的。O(∩_∩)O哈哈~继续加油哦~

2.css的优点：

css可以缩减文件大小

css一方面可以大大减少下载时间，另一方面又能够大大提升读者的满意度

HTML是一种结构化语言，而css是它的补充：是一种样式语言

HTML中比较常用的元素：p,table,div,span,a

css中替换（<img src='howdy.gif'>）和非替换元素

块级元素和行内元素

3.选择器

h2   {color:gray,font-size:18;}

选择器 声明块

声明和关键字

p {font : medium Helvetica;}声明块中有两个关键字，使用空格隔开

只有一种关键字之间可以使用/:     h2 {font:large/150% sans-serif;}斜线分割了用来设置元素字体大小和行高的两个关键字

选择器分组

h2,p {background:yellow;}//h2元素和段落p都是黄色背景

通配选择器

* {color:red;}//将文档中所有元素的颜色置为红色

将声明分组

h1 {font:18px Helvetica;color:purple;background:aqua;}//h1标题紫色文本，背景淡绿色。或者

h1 {

    font:18px Helvetica;

    color:purple;

    background:aqua;

}

文档选择器，类选择器，ID选择器（它们允许以一种独立于文档元素的方式来指定样式）

类选择器

<p class="warning">hello,good evening everyong,nice to meet you</p>

*.warning {font-weight:bold;} 

.点号标记这是一个类选择器

p.warining可以解释为“其class属性包含词warining的所有段落”

多类选择器

<p class="urgent warning">include urgent and warning包含紧急和警告</p><span class="warning">只包含警告</span>

.warning {font-weight:bold;}

.urgent {font-style:italic;}

.waring.urgent {background:silver;}

p.waring.urgent {background:silver;}也可以匹配<p class="warning urgent help ">Help!</p>

ID选择器

*#first-para {font-weight:bold;}

这个规则会让所有id属性中包含first-para的元素显示为粗体文本

<p id="first-para">This paragraph will be boldfaced</p>

在HTML文档中，一个ID选择器将被使用一次，且仅被使用一次。

4.属性选择器(2014.11.25)

对于类和ID选择器，只是选择属性值，前面两小节用法是对HTML,SVG,MathML文档特定的。

属性选择器可以根据元素的属性及属性值来选择元素。共有四类

1）简单属性选择器

选择有某个属性的元素，而不论元素之是什么

eg1.选择有class属性的元素：h1[class] {color:silver;}//还可以更具体范围h1[class="aa"] {color:silver;}

<h1 class="hoopla">Hello</h1>

<h1 class="severe">Word</h1>

eg2.同时将具有href和title属性的HTML超链接的文本置为粗体

a[href][title] {font-weight:bold;}

2）根据具体属性值选择

h1[class="aa"] {color:silver;}

//注意ID选择器和制定id属性的属性选择器不是一回事。换句话说h1#page-title和h1[id="page-title"]之间存在着微妙但是很重要的差别。

3）根据部分属性值选择

p[class~="warning"] {font-weight:bold;}  波浪号~是部分选择的关键

p.warning和p[class~="warning"]应用到HTML文档时是等价的。

4)特定属性选择类型

*[lang |="en"] {color:white;}

这个规则会选择lang属性等于en或者以en-开头的所有元素

这种属性选择器最常见的用途是匹配语言值。

5.使用文档结构

/\s/是非空字符在JS里的正则表达式

后代选择器

h1 em {color:gray;}//这个规则会把h1元素后代的em元素的文本变为灰色

//h1 em这种语法会选择从h1元素继承的所有em元素，而不论em元素的嵌套层次有多深。

选择子元素

h1 > strong {color:red}

//只作为一个h1元素子元素（而不是后代元素）的子元素

h1>strong可以理解为“选择作为h1元素子元素的所有strong元素“

选择相邻兄弟元素

h1 + p {margin-top:0;}

去除紧接在一个h1元素后出现的段落的上边距

6.伪类和伪元素

利用这些选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻想类指定样式。换句话说，会根据另外某些条件而非文档结构想文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

伪类选择器

Mosaic协议指定未访问页面的链接为蓝色，已访问页面的链接为红色。

css定义了伪类，使已访问页面的锚就好像已经有了一个"visited"类一样：

a:visited {color:red;}

链接伪类（2个）

:link    指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。注意，有些浏览器可能会不正确地将:link解释为指向任何超链接，包括已访问和未访问的超链接

:visited  指示作为已访问地址超链接的所有锚

动态伪类（3个）

伪类名   描述

.focus   指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种元素激活的元素

:hover    指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接

:active   指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接

选择第一个子元素

静态伪类：first-child来选择元素的第一个子元素

根据语言选择

lang()伪类就像是|=属性选择器（|=的意思是说会选择lang属性等于**或者以**-开头的所有元素）

eg.要把所有法语元素变成斜体

*:lang(fr) {font-style : italic;}

伪选择器和属性选择器主要差别：语言信息可以从很多来源得到，而且其中一些可能在元素之外。伪类比属性选择器稍微健壮些。

结合伪类

a:link:hover {color:red;}

a:visited:hover {color:red;}

注意：不要把互斥的伪类结合在一起使用。

伪元素选择器

就像伪类为锚制定幻像类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果

设置首字母样式

第一个伪元素用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式：

p:first-letter {color:red;}

这个规则会把每一段的第一个字母变成红色。

设置第一行的样式

p:first-line {color:purple;}//可以让一个文档总第一段的第一行变成紫色

注意:first-letter和:first-line的限制

设置之前和之后元素的样式

h2:before {content:"}}";color:silver;}//在元素之前插入内容

body:after {content : "The End.";}