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 2012泛域名解析配置
应测试要求,要将一个泛域名(*.office.baibai.com)解析到一个内网的IP(10.1.100.240)地址上(使用域控DNS解析)...以下为我的配置过程,做的时候将图顺便接了下来: 1 ...
- 20145103JAVA第二次实验报告
实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验 ...
- 用hexo在github上搭建自己的静态博客
在自己的小站上发过一次,这边就不再多发一次了,直接给链接好了: http://nerohwang.github.io/2014/02/11/simple-test/
- Java 设计模式六原则及23中常用设计模式
一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...
- 总结的一些json格式和对象/String/Map/List等的互转工具类
总结的一些json格式和对象/String/Map/List等的互转工具类,有需要的可以看看,需要引入jackson-core-asl-1.7.1.jar.jackson-jaxrs-1.7.1.ja ...
- Pomelo热更新刷新handler和remote 以及 pomelo使用bearcat进行热更新
一. 开启 原生 pomelo 的hotreload支持 pomelo版本: 2.2.5 , 编辑脚本 app.js 加入如下代码 //全局配置 app.configure('production|d ...
- Shell学习小结 - 深入认识变量
移动端访问不佳,请访问我的个人博客 变量的命名 对于初学者来说,可以简单的理解为,变量就是保存在计算机内存中的一系列的键值对. 列如: str="hello" 这里的str就是变量 ...
- FASTQ format
FASTQ format 每个FASTQ文件中每个序列通常有四行信息: 1: 以 '@' 字符开头,后面紧接着的是序列标识符和可选字段的描述(类似FASTA title line). 2: 序列 3: ...
- jqGrid入门简单使用
jqGrid中文API:https://blog.mn886.net/jqGrid/ 这里没有请求后台,是直接读取本地.json文件 就两个文件,一个html.一个json文件,jquery是jqgr ...
- OpenDayLight "Error executing command: java.lang.NullPointerException"问题解决
参考: Fedora 21 mostly working but NullPointerException at Karaf shell 在使用ODL的时候,安装功能组件时出现: Error exec ...