转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76576469

觉得博文有用，请点赞，请评论，请关注，谢谢！~

CSS外部文档链接：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>CSS基础-外部文档链接</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        p{color:blue;text-align: center; }
        h1{color:#999999;font-size:12px ;text-align: center; }
    </style>
</head>
<body>
    <p>我是段落</p>

    <p style="color:black;text-align:right">我是另一个段落</p>

    <h1>我是标题</h1>
</body>
</html>

通配选择器 标签选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>通配选择器 标签选择器</title>
    <style type="text/css">
        /*通配选择器*/
        *{color:#999999;font-size:12px ;text-align: center; }
        /*标签选择器*/
        h1{color:#000000;width: 200px;height: 200px;border: 1px solid red;font-size:20px ;text-align: center; }
    </style>
</head>
<body>
    <p>我是段落</p>
    <h1>我是标题</h1>
    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>
</body>
</html>

类选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        /*类选择器*/
        .tag01{color:red;font-size:22px ;text-align: center;}
        .tag02{list-style-type: none;}
    </style>
</head>
<body>
    <p class="tag01">我是段落</p>
    <h1>我是标题</h1>
    <ul>
        <li class="tag01 tag02">我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>
</body>
</html>

ID选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        /*ID选择器*/
        #tag_01{color:red;font-size:22px ;text-align: center;}
    </style>
</head>
<body>
    <p id="tag_01">我是段落</p>
    <h1>我是标题</h1>
    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>
</body>
</html>

群组选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>群组选择器</title>
    <style type="text/css">
        /*群组选择器*/
        li,td,tag1,#tag_1{color:blue;font-size:22px ;text-align: center;}
    </style>
</head>
<body>
    <p class="tag1">我是段落</p>
    <h1 id="tag_1">我是标题</h1>
    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>
</body>
</html>

后代选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        /*后代选择器*/
        /*table tr td div p a*/
        table a{text-decoration: none;color: red;font-size: 3cm;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <div>
                    <p>
                        <a href="http://www.baidu.com">百度</a>
                    </p>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

子代选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>子代选择器</title>
    <style type="text/css">
        /*子代选择器*/
        tr > td{text-decoration: none;color: red;font-size: 3cm;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>我是td</td>
        </tr>
    </table>
</body>
</html>

属性选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*属性选择器*/
        /*img[title]{border: 1px;width: 200px;height: 100px;}*/
        /*img[title][id]{border: 1px;width: 200px;height: 100px;}*/
        img[title][id=tag01]{border: 1px;width: 200px;height: 100px;}
    </style>
</head>
<body>
    <img src="" alt="" title="image01" id="tag01">
    <img src="" alt="" title="image01" id="tag02">
    <img src="" alt="" title="image02" class="tag02">
    <p>我是段落</p>
    <h1>我是标题</h1>
</body>
</html>

相邻兄弟选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        /*相邻兄弟选择器*/
        /*td + td{color: red;}*/
        .tag01 + .tag02{color: red;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="tag01">我是td1</td>
            <td class="tag02">我是td2</td>
        </tr>
        <tr>
            <td>我是td3</td>
            <td>我是td4</td>
        </tr>
    </table>
</body>
</html>

转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76576469

欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式

微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com

觉得博文有用，请点赞，请评论，请关注，谢谢！~

Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime的更多相关文章

  1. Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

  2. Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  3. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  4. Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...

  5. Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...

  6. Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...

  7. Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...

  8. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. 如何用纯 CSS 创作一个摇摇晃晃的 loader

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/oyJvpe 可交互视频 此 ...

  2. RocEDU.阅读.写作《苏菲的世界》书摘

    我们在成长的过程当中,似乎失去了对这世界的好奇心.也正因此,我们丧失了某种极为重要的能力(这也是一种哲学家们想要使人们恢复的能力).因为,在我们内心的某处,有某个声音告诉我们:生命是一种很庞大的.神秘 ...

  3. Python Matplotlib简易教程【转】

    本文转载自:https://blog.csdn.net/Notzuonotdied/article/details/77876080 详情请见:Matplotlib python 数据可视化神器 简单 ...

  4. 对linux内核创建flash上的各分区源码进行分析

    1.注意:内核源码版本为4.9 2.首先注意关键字符串"partitions found on MTD device 这句话在drivers/mtd/mtdpart.c的parse_mtd_ ...

  5. Swift学习笔记 - Swift属性只读

    在OC中我们经常用到只读属性,用readonly修饰一下就行了,但在Swift中已经不是这样修饰的了,下面记录一下Swift中只读属性的使用 在OC中的只读: //只读属性 @property(rea ...

  6. PHP设计模式（三）：抽象工厂模式

  7. OAuth中client id的处理

    http://www.tugberkugurlu.com/archive/simple-oauth-server-implementing-a-simple-oauth-server-with-kat ...

  8. LeetCode——maximal-rectangle

    Question Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ...

  9. 超详细！mac flutter 创建过程及遇到的问题

    虽然网上有教程,但是过程中遇到些问题,这些问题教程里并没有,所以写这个文章记录一下. 1.打开终端 2.clone flutter 命令: git clone -b beta https://gith ...

  10. 上传网站后建议执行：chown www:www -R /path/to/dir 对网站目录进行权限设置，/path/to/dir替换为你网站目录。

    上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录.