转载请注明出处：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. crontab + rsyncd同步方案

    目的主机: rsync --daemon [root@iZ23ohdbxmrZ ~]# vim /etc/rsyncd.conf #global settingsport = 873pid file= ...

  2. 20145321 《Java程序设计》第9周学习总结

    20145321 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1 JDBC 1.JDBC简介: JDBC是Java联机数据库的标准规范,它定义一组标准 ...

  3. Jquery4 过滤选择器

    学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似 CSS3里的伪类,可以让不支持 CSS3 ...

  4. excel表中同一列相同内容进行合并

    如下图所示一张表格,如果想要把表格中相同考号的信息合并来查看的话,首先我们先通过表格的排序功能,把相同的内容先排列在一起.在数据选项卡下找到排序点就可以.   第二步,选中整个数据区域,在数据选项卡下 ...

  5. css 固定宽度，自动换行

    max-width: 200px; display: block; word-break: break-all:

  6. ANDROID教程目录

    html5 如何打包成apk,将H5封装成android应用APK文件的几种方法    

  7. Python模块学习之解决selenium的“can't access dead object”错误

    问题描述 在python执行过程中,提示selenium.common.exceptions.WebDriverException: Message: TypeError: can't access ...

  8. css实现一色多变化

    .pesudo{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 120px; paddi ...

  9. 开源 E-ChartSdk 的使用方法

    SVN 源码地址:http://code.taobao.org/svn/keshihua-echarts/ 1.1.如何声明 var sdk = new ChartSdk(); 1.2.加载JS中的图 ...

  10. Android开发--List与ArrayList区别

    List是一个接口,而ArrayList是一个类.  ArrayList继承并实现了List.  所以List不能被构造,但可以向上面那样为List创建一个引用,而ArrayList就可以被构造.  ...