Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

转载请注明出处：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的更多相关文章

Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...
Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...
Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...
Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...
Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点链接列表表单 &l ...
【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
【从0到1学Web前端】CSS伪类和伪元素分类： HTML+CSS 2015-06-02 22:29 1065人阅读评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

Windows Server 2008驱动安装全攻略
安装设备驱动程序原本是一件非常简单的事情,很多驱动程序在安装的时候我们只要不停单击“下一步”按钮,就能让驱动程序顺利地在对应计算机系统“落户”;不过,当身边的计算机系统升级为Windows Serve ...
BZOJ4765: 普通计算姬
BZOJ4765: 普通计算姬题目描述传送门题目分析求的和非常奇怪,不具有连续性,所有上树的数据结构全死了. 考虑分块,思考对于一段连续的询问区间可以直接询问整块,零散块可以在树上dfs序暴力 ...
BZOJ 3192: [JLOI2013]删除物品奇淫技巧&树状数组
点我看题这题十分奇淫技巧...QAQ因为知道是树状数组的题QAQ刚开始以为维护两个数组的树状数组然后模拟从大到小,然后发现不会打QAQ 于是悄悄咪咪翻开题解了. 实际上两个数组可以看做一个数组如 ...
数据结构实习 - problem K 用前序中序建立二叉树并以层序遍历和后序遍历输出
用前序中序建立二叉树并以层序遍历和后序遍历输出 writer:pprp 实现过程主要是通过递归,进行分解得到结果代码如下: #include <iostream> #include &l ...
Educational Codeforces Round 13 A、B、C、D
A. Johny Likes Numbers time limit per test 0.5 seconds memory limit per test 256 megabytes input sta ...
raid1磁盘更换---测试
安装centos6.71. CentOS安装过程配raid.参考:http://www.360doc.com/content/13/1209/21/14661619_335823338.shtml. ...
Linux安装ipvsadm
一.介绍 ipvs称之为IP虚拟服务器(IP Virtual Server,简写为IPVS).是运行在LVS下的提供负载平衡功能的一种技术二.安装 1.下载 http://www.linuxvirt ...
PHP 重载方法 __call()
__call() 方法用于监视错误的方法调用. __call()(Method overloading) 为了避免当调用的方法不存在时产生错误,可以使用 __call() 方法来避免.该方法在调用的方 ...
缓存技术内部交流_05_Cache Through
参考资料: http://www.ehcache.org/documentation/3.2/caching-patterns.html http://www.ehcache.org/document ...
OSI7层网络模型协议精析
OSI7层网络模型协议精析一.总结一句话总结:在7层模型中,每一层都提供一个特殊的网络功能.从网络功能的角度观察:下面4层(物理层.数据链路层.网络层和传输层)主要提供数据传输和交换功能,即以节点 ...

Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

CSS外部文档链接：

通配选择器 标签选择器：

类选择器：

ID选择器：

群组选择器：

后代选择器：

子代选择器：

属性选择器：

相邻兄弟选择器：

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

随机推荐

热门专题

通配选择器标签选择器：