关于css选择器的小结

css的选择器

1、id选择器

2、派生选择器（元素标签选择）

3、类选择器（class）

4、属性选择器（选择拥有特定属性的元素）[title]

[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性和值的元素。[attribute~=value]用于选取属性值中包含指定词汇的元素。[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值中包含指定值的每个元素。

1、选择器分组

用逗号（，）串联,形成一个集合

h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }

这里有一个通配符*，选择所有的元素

*{color:red;}

2、类选择器详解

（1）.类名{}；

（2）*.类名{}；通配符表示所有

（3）标签名.类名{}；特定元素下面class

（4）多类选择器

<pclass="important warning">This paragraph is a very important warning.</p>

通过把两个类名写在一起，表示仅同时具有这两个类的元素样式

.important.warning{}

3、id选择器，最好不要出现空格选择

4、属性选择器

属性必须完全一致

a[href][title] {color:red;}包含href/title的a标签

planet[moons] {color:red;}

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}必须完全匹配

5、后代选择器

h1 em {color:red;}h1元素下面所有的em元素都标记为红色；推荐少用

6、子选择器

h1> strong {color:red;}h1元素下面的子类strong元素，唯一后代；推荐多使用，结构会比较清晰

h1 > strongh1> strongh1 >strongh1>strong（此处空格没有关系，这四种写法都是可行的）

后代与子选择器的结合

table.company td > p

7、相邻兄弟选择器

li + li {font-weight:bold;}紧接在元素后面的元素，并且具有共同的父元素

多种选择器结合：

html > body table + ul {margin-top:20px;}

选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

8、伪类

常用几个：

（1）超链接：

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

（2）fouce的伪类

这个伪类比较有意思，聚焦

input:fouce{

background-color:#000;

}表示聚焦input框是背景变色

（3）:first-child

p:first-child表示第一个p标签

必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。

（4）：lang这个很少见啊

q:lang(no)

{

quotes: "~" "~"

}

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

显示效果：一些文本~段落中的引用~一些文本。

9、伪元素

（1）:first-letter向文本的首字母添加特殊的格式

p:first-letter{

font-size:20px;

color:red;

}

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (仅当 float 为 none 时)
• text-transform
• line-height
• float
• clear

（2）:first-line向文本的首行添加样式

（3）:before向元素的前面添加新的内容

span:before{

content:url(logo.gif);

}

（4）:after向元素后面添加内容

span:after{

content:url(logo.gif);

}