转载请注明出处：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. linux版本安装pip

    因为一直在windows开发python程序,今天把python程序打成docker image镜像的时候,发现pip无法使用,并且使用yum 也无法安装,查找资料发现下面方法可用 1.python ...

  2. 20145331实验五 Java网络编程及安全

    20145331魏澍琛 实验五 Java网络编程 实验内容 1.用书上的TCP代码,实现服务器与客户端. 2.客户端与服务器连接 3.客户端中输入明文,利用DES算法加密,DES的秘钥用RSA公钥密码 ...

  3. SVN错误：Failed to load JavaHL Library

    环境:jdk1.7(64bit),eclipse4.4(64bit),SVN1.10.3 问题:在利用subclipse同步资源时,报出错误提示 Failed to load JavaHL Libra ...

  4. iOS开发中的地图开发

    显示地图: 1.导入头文件 #import <MapKit/MapKit.h> 如果同时需要用户定位的话还需要 #import <CoreLocation/CoreLocation. ...

  5. [CF1042F]Leaf Sets

    题意:给定一棵$n$个点的树,将叶子节点分为数个集合使集合里点对最长距离不超过$k$,求最少集合数.($n\le1000000$) 首先我们可以想到,这道题并不是让你构造最优方案,因为只要把所有叶子节 ...

  6. [BZOJ2282]消防

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  7. scrapy之Pymongo

    用Pymongo保存数据 爬取豆瓣电影top250movie.douban.com/top250的电影数据,并保存在MongoDB中. items.py class DoubanspiderItem( ...

  8. UVA 12063 Zeros and Ones（三维dp）

    题意:给你n.k,问你有多少个n为二进制的数(无前导零)的0与1一样多,且是k的倍数 题解:对于每个k都计算一次dp,dp[i][j][kk][l]表示i位有j个1模k等于kk且第一位为l(0/1) ...

  9. spring的静态代理和动态代理

    Java静态代理 Jdk动态代理 java代理模式 即Proxy Pattern,23种java常用设计模式之一.代理模式的定义:对其他对象提供一种代理以控制对这个对象的访问. 原理: 代理模式的主要 ...

  10. 对于"第一次创业者"应该给什么样的建议

      转:其实我创业也不是很成功(目前属于第二次).目前为止,基本保证家里足够温饱和足够温馨,偶尔奢侈,但是我坚持走技术路线,不做土豪(因为做不了). 我创业的口号是:成全别人,累死自己!!   有人问 ...