CSS 选择器_找不到下面一列或多列的示例值-CSDN博客

1.常用选择器

1.类型选择器（元素选择器，简单选择器），后代选择器，id选择器，类选择器

类型选择器：

p{color:black;}
h1{font-weight:bold;}

后代选择器：

blockquote p {padding-left:2em;}

ID选择器，类选择器：

#intro {font-weight:bold;}
.data-posted {color:#ccc;}

<p id="intro"> Happy Birthday Andy </p>
<p class="data-posted">24/3/2009</p>

综合使用类型，后代，ID，类这几种选择器：

#main-content h2 {font-size:1.8em;}
#secondary-content h2 {font-size:1.2em;}

<div id="main-content">
    <h2>Articles</h2>
    ...
</div>

<div id="secondary-content">
    <h2>Latest news</h2>
    ...
</div>

ps：不要给这些元素指定不同的类，而应将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们

2.伪类

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

:link    伪类将应用于未被访问过的链接，与:visited互斥。
:hover   伪类将应用于有鼠标指针悬停于其上的元素。
:focus   应用于获取焦点的元素
:active  伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 伪类将应用于已经被访问过的链接，与:link互斥。

：link和：visited称为链接伪类，只能应用于锚元素。
：hover、：active、和：focus称为动态伪类，理论上可以应用于任何元素。
通过把伪类连接在一起，可以创建更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

3.伪元素

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:first-letter
伪元素的样式将应用于元素文本的第一个字（母）。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。

2.通用选择器

用以下规则删除每个元素上默认的浏览器内边距和外边距

*{
padding:0;
margin:0;
}

还可以与其他选择器结合使用，通用选择器可以用来对某个元素的所有后代应用样式，或者跳过一级后代。

3. 高级选择器

1.子选择器（”>”）和相邻同胞选择器（“+”）

子选择器只选择元素的直接后代，即子元素

#nav>li{
    background:url(folder.png) no-repeat left top;
    padding-left:20px;
    }
<ul id="nav">
    <li><a href="/home/">Home</a><li>
    <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/design/">Design</a></li>
            <li><a href="/services/development/">Development</a></li>
            <li><a href="/services/cnsultancy/">Consultancy</a></li>
        </ul>
    <li>
    <li><a href="/contact/">Contact Us</a></li>
<ul>
ps:IE7的父元素和子元素之间有HTML注释，就会有问题

有时，可能需要根据一个元素与另一个元素的相邻关系对它应用样式。
相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落显示为粗体、灰色，并且字号比后续段落略微大一点儿。

2.属性选择器

acronym[title]{
border-bottom: 1px dotted #999;
}

3.特殊性

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
通配符(*)，子选择器（”>”）和相邻同胞选择器（“+”）的权值为0

4.继承

应用样式的元素的后代会继承样式的某些属性，比如颜色和字号。
直接应用于元素的任何样式总会覆盖继承而来的样式，因为继承而来的样式的特殊性为空。

4.规划，组织和维护样式表

1.对文档应用样式

链接样式表 ：<link href="/css/basic.css" rel="stylesheet" type="text/css" />
导入样式表：<style type="text/css">
<!--
@import url("/css/advanced.css");
-->
</style>