讲给Android程序员看的前端教程(11)——CSS选择器(1)

来源：互联网发布：淘宝店流量怎么提升编辑：程序博客网时间：2024/05/18 03:06

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

CSS选择器

CSS 选择器用于选择需要设定样式的元素从而实现网页样式的设计，比如：文字的大小，颜色，元素的定位等等。看到这，有人会想什么是选择器呢？举个例子，到了年底公司就要发年终奖了，于是人事部门发了一个通知：

公司高管 {    奖金：20W    车子：一辆    手机：1部}项目经理 {    奖金：10W    手机：1部}普通员工 {    奖金：5W    对联：1副}

公司所有人看到这个通知后，再结合自身的岗位就清楚了今年自己的年终奖了。类似地，在CSS中采用选择器指定标签的显示样式：

selector{   property1 : value1;   property2 : value2;   property3 : value3;   property4 : value4;   ..................}

selector：选择器
property：属性；例如：颜色，大小
value：属性对应的值；例如：red，400px

嗯哼，在本教程中我们将介绍CSS中常用的选择器。

标签选择器

标签选择器，也常称为元素选择器；它用于设定指定标签的样式。请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签选择器</title>    <style type="text/css">        p{            font-size: 40px;            color: white;            width: 880px;            height: 50px;            background-color: pink;        }    </style></head><body>    <p>本文作者：谷哥的小弟</p>    <p>博客地址：http://blog.csdn.net/lfdfhl</p></body></html>

在该示例中，我们通过标签选择器为p标签统一设置宽度，高度，文字大小和背景颜色，效果图如下所示：

这里写图片描述

正如上图所示：所有的p标签都变成了统一的样式。如果，想让该标签选择器只作用于某些p标签呢？该怎么办呢？很简单，只需要给该便签选择器设置一些匹配规则即可，请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签选择器</title>    <style type="text/css">        p[id=name]{            font-size: 40px;            color: white;            width: 880px;            height: 50px;            background-color: pink;        }    </style></head><body>    <p id="name">本文作者：谷哥的小弟</p>    <p>博客地址：http://blog.csdn.net/lfdfhl</p></body></html>

在该标签选择器中设置了一个条件：id=name；也就是说该选择器只会作用于id=name的p标签，效果如下图所示：

这里写图片描述

除此以外，我们还可以添加别的匹配规则，比如：id的值以xx开头，id的值包含xx等等，在此不再赘述。

阅读全文

1 0