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 ...
随机推荐
- BIOS/MBR UEFI/GPT关系与区别-资料整理
---恢复内容开始--- 关于 BIOS/MBR UEFI/GPT他们之间的关系一直比较疑惑, 首先一点前提 BIOS UEFI 是一类,是控制硬件,引导启动的:MBR GPT是硬盘的分区定义.. 后 ...
- 仔细讨论 C/C++ 字节对齐问题⭐⭐
原文:https://www.cnblogs.com/AlexMiller/p/5509609.html 字节对齐的原因 为了提高 CPU 的存储速度,编译器会对 struct 和 union的存储进 ...
- Jenkins 集成Ansible教程
前提条件: 1. 部署Jenkins Server 2. 部署 Ansible Server 一.在Jenkins安装SSH插件 系统管理 -> 插件管理 二.在Jenkins 凭证中添加Ans ...
- JAVA基础补漏--链表
查询慢:链表中数据不是连续的,每次查询元素,都得从头开始 增删快:链表结构,增加或删除一个数据,对链表的整体结构没有影响,所以快.
- 在Windows下使用Navicat连接Linux下的MySql
Linux下的Mysql安装可以参考菜鸟教程:https://www.runoob.com/mysql/mysql-install.html 安装完成后你会发现用Navicat链接MySql会失败,这 ...
- 将应用注册为Linux的服务
主流的Linux大多使用init.d或systemd来注册服务.下面以centos6.6演示init.d注册服务:以centos7.1演示systemd注册服务. 1. 基于Linux的init.d部 ...
- 第一个版本库 Repository
Git安装 Windows系统 Git 为 Windows 系统提供了简易的 .exe 安装包, 直接下载并安装就可以了(点这里->):https://git-scm.com/download/ ...
- nodejs 备忘
引入模块(在于你用什么模块,需要的模块可以用终端进行安装, npm,一般express,swig,body-parser,cookies,markdown) 设置模块 设置渲染 var express ...
- photoshop cc下载与安装
地址:https://jingyan.baidu.com/article/c275f6bacdd927e33d756729.html
- C5 标准IO库：APUE 笔记
C5 :标准IO库 在第三章中,所有IO函数都是围绕文件描述符展开,文件描述符用于后续IO操作.由于文件描述符相关的操作是不带缓冲的IO,需要操作者本人指定缓冲区分配.IO长度等,对设备环境要求一定的 ...