zoukankan html css js c++ java

CSS知识总结（二）

CSS的选择符分成：

　　1. 通配选择符

　　2. 元素选择符

　　3. 群组选择符

　　4. 关系选择符

　　5. id及class选择符

　　6. 伪类选择符

　　7. 属性选择符

　　8. 伪对象选择符

1.通配选择符（*）

　　* 号表示所有的对象。

　　所谓通配选择符，就是指可以使用模糊指定的方式来对象进行选择，指定样式。

　　例子源代码：

/* CSS代码 */
*{
    color:gray;
}

<!-- HTML代码 -->
<body>
    <p>这是灰色字体的p标签</p>
    <span>这是灰色字体的span标签</span>
</body>

　　效果：

这是灰色字体的p标签

这是灰色字体的span标签

2.元素选择符

　　所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

　　例子源代码：

/* CSS代码 */
p{
    color:gray;
}
span{
    color:brown;
}

<!-- HTML代码 -->
<body>
    <p>这是灰色字体的p标签</p>
    <span>这是棕色字体的span标签</span>
</body>

　　效果：

这是灰色字体的p标签

这是棕色字体的span标签

3.群组选择符

　　对一组标签进行相同的样式定义；使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式。

　　例子源代码：

/* CSS代码 */
p,span{
    color:brown;
}

<!-- HTML代码 -->
<body>
    <p>这是棕色字体的p标签</p>
    <span>这是棕色字体的span标签</span>
</body>

　　效果：

这是棕色字体的p标签

这是棕色字体的span标签

4.关系选择符

　　a.包含选择符（E F）

　　　选择所有被E元素包含的F元素。

　　例子源代码：

/* CSS代码 */
ul li a{
    color:red;
}

<!-- HTML代码 -->
<body>
    <ul>
        <li>
            <a href="">菜单项</a>
            <ul>
                <li><a href="">列表项1</a></li>
                <li><a href="">列表项2</a></li>
                <li><a href="">列表项3</a></li>
            </ul>
        </li>
    </ul>
</body>

　　此例，使用ul li a，那么所有a标签都会变红色。

　　效果：

菜单项

　　b.子选择符（E > F）

　　　选择所有作为E元素的子元素F。

　　例子源代码：

/* CSS代码 */
.nav > li > a{
    color:red;
}

<!-- HTML代码 -->
<body>
    <ul class="nav">
        <li>
            <a href="">菜单项</a>
            <ul>
                <li><a href="">列表项1</a></li>
                <li><a href="">列表项2</a></li>
                <li><a href="">列表项3</a></li>
            </ul>
        </li>
    </ul>
</body>

　　此例，使用.nav>li>a，那么只有.nav的li下面的a标签才会变红色。

　　效果：

菜单项

　　c.相邻选择符（E + F）

　　　选择紧贴在E元素之后的F元素。

　　例子源代码：

/* CSS代码 */
p+p{color:red;}

<!-- HTML代码 -->
<body>
    <h3>这是一个标题</h3>
    <p>这是第1个p标签</p>
    <p>这是第2个p标签</p>
    <h3>这是一个标题</h3>
    <p>这是第3个p标签</p>
    <p>这是第4个p标签</p>
</body>

　　此例，使用p+p{color:red;}，选择紧贴在p标签后的p标签，那么第2个p标签和第4个p标签将会变成红色。

　　效果：

　　这是一个标题

　　这是第1个p标签

　　这是第2个p标签

　　这是一个标题

　　这是第3个p标签

　　这是第4个p标签

　　d.兄弟选择符（E ~ F）

　　　选择E元素的所有兄弟元素F。

　　例子源代码：

/* CSS代码 */
p~p{color:red;}

<!-- HTML代码 -->
<body>
    <h3>这是一个标题</h3>
    <p>这是第1个p标签</p>
    <p>这是第2个p标签</p>
    <h3>这是一个标题</h3>
    <p>这是第3个p标签</p>
    <p>这是第4个p标签</p>
</body>

　　此例，使用p~p{color:red;}，选择p标签的其它所有p标签，那么第2个p标签、第3个p标签和第4个p标签将会变成红色。

　　效果：

　　这是一个标题

　　这是第1个p标签

　　这是第2个p标签

　　这是一个标题

　　这是第3个p标签

　　这是第4个p标签

5.id及class选择符

　　id及class均是css提供由用户自定义标签名称的选择符，用户可以使用选择符id及class来面对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合HTML标签的目的。

　　a.id选择符（E#id）

　　　id选择符可以为标有特定id的HTML元素指定特定的样式。

　　　id选择器以“#”来定义。

　　　*在网页中，一个id名称只能使用一次，不得重复。

　　例子源代码：

/* CSS代码 */
#content{
    color:gray;
}

<!-- HTML代码 -->
<body>
    <p id="content">正文内容</p>
</body>

　　效果：

　　正文内容

　　b.class选择符（E.class）

　　　不同于id选择符的唯一性，class选择符可以同时定义多个。

　　例子源代码：

/* CSS代码 */
.a{
    color:gray;
}
.b{
    font-weight:bold;
}

<!-- HTML代码 -->
<body>
    <p class="a b">正文内容</p>
</body>

　　效果：

　　正文内容

6.伪类选择符

　　伪类选择符种类特别多，这里并未列出所有的伪类选择符，但都支持现代浏览器（除了IE6-8）

　　这里，我举例几个常用的伪类选择符：

　　例子1　　源代码：

/* CSS代码 */
a{
    text-decoration:none;   /*改变a链接的样式*/
}
a:link{
    color:black;    /*设置超链接a在未被访问前的样式*/
}
a:visited{
    color:gray;     /*设置超链接a在其链接地址已被访问过时的样式*/
}
a:hover{
    color:blue;     /*设置元素在其鼠标悬停时的样式*/
}
a:active{
    color:red;      /*设置元素在被用户激活时的样式*/
}

<!-- HTML代码 -->
<body>
    <p><a href="###">点击我吧</a></p>
</body>

　　效果：

　　点击我吧

　　例子2　　源代码：

/* CSS代码 */
.ul1 li:first-child{color:red;}     /*第一个*/
.ul1 li:last-child{color:blue;}     /*最后一个*/
.ul1 li:nth-child(2){color:green;}     /*第二个*/
.ul1 li:nth-last-child(2){color:yellow;}    /*倒数第二个*/

<!-- HTML代码 -->
<body>
    <ul class="ul1">
        <li>这是列表的第1行</li>
        <li>这是列表的第2行</li>
        <li>这是列表的第3行</li>
        <li>这是列表的第4行</li>
        <li>这是列表的第5行</li>
        <li>这是列表的第6行</li>
     </ul>
</body>

　　效果：

这是列表的第1行
这是列表的第2行
这是列表的第3行
这是列表的第4行
这是列表的第5行
这是列表的第6行

　　例子3 （乘法因子n）　　源代码：

/* CSS代码 */

/*乘法因子 奇数*/
.ul2 li:nth-child(odd){
    color:red;
}
.ul2 li:nth-child(2n+1){
    border-left:3px solid red;
}

/*乘法因子 偶数*/
.ul2 li:nth-child(even){
    color:blue;
}
.ul2 li:nth-child(2n){
    border-left:3px solid blue;
}

/*乘法因子 3的倍数*/
.ul2 li:nth-child(3n){
    font-weight:bold;
}

<!-- HTML代码 -->
<body>
    <ul class="ul2">
        <li>这是列表的第1行</li>
        <li>这是列表的第2行</li>
        <li>这是列表的第3行</li>
        <li>这是列表的第4行</li>
        <li>这是列表的第5行</li>
        <li>这是列表的第6行</li>
     </ul>
</body>

　　效果：

这是列表的第1行
这是列表的第2行
这是列表的第3行
这是列表的第4行
这是列表的第5行
这是列表的第6行

7.属性选择符

　　a. E[att]

　　　选择具有att属性的E元素。

　　例子源代码：

/* CSS代码 */
p[class] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="aaa">这是第一个p标签</p>
    <p>这是第二个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　b. E[att="val"]

　　　选择具有att属性且属性值等于val的E元素。

　　例子源代码：

/* CSS代码 */
p[class="content"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="title">这是第一个p标签</p>
    <p class="content">这是第二个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　c. E[att~="val"]

　　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

　　例子源代码：

/* CSS代码 */
p[class~="content"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="content abc">这是第一个p标签</p>
    <p class="cba content">这是第二个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

　　d. E[att^="val"]

　　　选择具有att属性且属性值为以val开头的字符串的E元素。

　　例子源代码：

/* CSS代码 */
p[class^="a"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="aaa">这是第一个p标签</p>
    <p class="bbb">这是第二个p标签</p>
    <p class="abc">这是第三个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　e. E[att$="val"]

　　　选择具有att属性且属性值为以val结尾的字符串的E元素。

　　例子源代码：

/* CSS代码 */
p[class$="a"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="aaa">这是第一个p标签</p>
    <p class="abc">这是第二个p标签</p>
    <p class="cba">这是第三个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　f. E[att*="val"]

　　　选择具有att属性且属性值为包含val的字符串的E元素。

　　例子源代码：

/* CSS代码 */
p[class*="a"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="abc">这是第一个p标签</p>
    <p class="a-b-c">这是第二个p标签</p>
    <p class="c_b_a">这是第三个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

　　g. E[att|="val"]

　　　选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

　　例子源代码：

/* CSS代码 */
p[class|="a"] {
    color:red;
}

<!-- HTML代码 -->
<body>
    <p class="abc">这是第一个p标签</p>
    <p class="a-b-c">这是第二个p标签</p>
    <p class="c-b-a">这是第三个p标签</p>
</body>

　　效果：

这是第一个p标签

这是第二个p标签

这是第三个p标签

8.伪对象选择符

　　*CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。

　　*伪对象选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

　　a. E:first-letter/E::first-letter

　　　设置对象内的第一个字符的样式。

　　例子源代码：

/* CSS代码 */
p:first-letter {
    font-size:30px;font-weight:bold;
}
p::first-letter {
    font-size:30px;font-weight:bold;
}

<!-- HTML代码 -->
<body>
    <p>早起的鸟儿有虫吃</p>
</body>

　　效果：

早起的鸟儿有虫吃

　　b. E:first-line/E::first-line

　　　设置对象内的第一行的样式。

　　例子源代码：

/* CSS代码 */
p:first-line {
    color:gray;
}
p::first-line {
    color:gray;
}

<!-- HTML代码 -->
<body>
    <p>早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。 早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。</p>
</body>

　　效果：

早起的鸟儿有虫吃：其它鸟儿还在窝里睡觉，那些勤劳的鸟儿早早勤劳，很快就抓到虫子吃了，就是辛勤劳动的人可以得到好的回报。早起的虫儿被鸟吃：其它虫儿还在窝里睡觉，而那些不安分的虫儿、因为早早起来活动被鸟发现了，最后成了鸟儿的腹中餐，否定了勤奋，问题不在于早起，而是该谁做什么就做什么，不该谁做什么就不要去做。

　　c. E:before/E::before

　　　设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。

　　例子源代码：

/* CSS代码 */
p:before {
    content:"广州是个好地方，";color:gray;
}
p::before {
    content:"广州是个好地方，";color:gray;
}

<!-- HTML代码 -->
<body>
    <p>高楼大厦，四通八达。</p>
</body>

　　效果：

高楼大厦，四通八达。

　　d. E:after/E::after

　　　设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。

　　例子源代码：

/* CSS代码 */
p:after {
    content:"高楼大厦，四通八达。";color:gray;
}
p::after {
    content:"高楼大厦，四通八达。";color:gray;
}

<!-- HTML代码 -->
<body>
    <p>广州是个好地方，</p>
</body>

　　效果：

广州是个好地方，

　　e. E::placeholder

　　设置对象文字占位符的样式。

　　*::placeholder 伪元素用于控制表单输入框占位符的外观。

　　*需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

　　例子源代码：

/* CSS代码 */
input::-webkit-input-placeholder {      /*Chrome4.0+*/
    color: green;
}
input:-ms-input-placeholder {       /*IE10+*/
    color: green;
}
input:-moz-placeholder {        /*Firefox4-18*/
    color: green;
}
input::-moz-placeholder {       /*Firefox19+*/
    color: green;
}

<!-- HTML代码 -->
<body>
    <input type="text"  placeholder="请输入..."/>
</body>

　　效果：

　　f. E::selection

　　　设置对象被选择时的颜色。

　　*需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow (IE11尚不支持定义该属性)。

　　例子源代码：

/* CSS代码 */
p::-moz-selection{
    background:#000;color:#f00;
}
p::selection{
    background:#000;color:#f00;
}

<!-- HTML代码 -->
<body>
    <h3>选中下面的文字，看看它的颜色</h3>
    <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
</body>

　　效果：

选中下面的文字，看看它的颜色

你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。

查看全文

相关阅读:
Java内存管理以及各个内存区域详解
 python数据的存储和持久化操作
 Redis的安装及配置
 POI使用详解
 遍历Map的几种方法
 Quartz的cronTrigger表达式
 Java对XML文档的增删改查
 Solr系列二：Solr与mmseg4j的整合
 cms STW 的两个阶段
 GROUP BY 和 ORDER BY 同时使用问题

原文地址：https://www.cnblogs.com/mossbaoo/p/5752740.html

最新文章
手写模板引擎
 PHP
SVN
Smarty
JQuery
PHP
数据库迁移
 Technology_Roadmap
设计模式
 SQL 2012 alwayson设置只读路由