CSS选择符
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。 http://suxiangjuner.blog.51cto.com/353064/283475
CSS学习系列二:CSS选择符
选择符的脚本语法: 选择符名{样式属性:属性值;样式属性:属性值;..........}
选择符名:选择符的名称,在HTML中文档的标签是通过匹配该选择符来加载样式的
{}:选择符后面，整个括号里面的内容都是选择符的声明;括号里面的内容为规则(rule)的集合.一个声明可以有多条规则每个规则用;分开
规则:一个规则是二部分组成,一部分是样式属性,如表示颜色的color。表示字体的font等另外一部分是样式属性的值.
类型选择符
类型选择符(Type Selectors)是以文档中的对象(Element)名为选择符号名,因此型号选择符可以使一个元素原来的颜色转换为另外一个样式.类型选择符的语法代码如下:
E{ 样式属性:属性名称;样式属性:属性名称;.........}
其中E为文档中的元素,如果该文档时XML文档,则E为XML文档中所声明的元素;如果该文档时HTML文档,则E为HTML的元素,则E为HTMl的的元素如p h1 hr img.
- <html>
- <head>
- <title>CSS学习系列一 CSS的使用(内联样式)title>
- <link href="" type="text/css" rel="stylesheet"/>
- <style type="text/css">
-
- style>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- head>
- <body>
- <h1>标题一h1>
- <h2>标题二h2>
- <h3>标题三h3>
- <h4>标题四h4>
- body>
-
- html>
通用选择符
*{样式属性:属性值;样式属性:属性值;.........}
-
- >
- <html>
- <head>
- <title>选择符分组title>
- <link href="" type="text/css" rel="stylesheet"/>
- <style type="text/css">
-
- style>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- head>
- <body>
- <h1>标题一h1>
- <h2>标题二h2>
- <h3>标题三h3>
- <h4>标题四h4>
- body>
-
- html>
以上的通用选择符很少用大多数情况是让某一个标签下的所有标签都使用一个样式,此时的通用选择符
E * {样式属性:属性值;样式属性:属性值;.........}
-
- >
- <html>
- <head>
- <title>通用选择符title>
- <link href="" type="text/css" rel="stylesheet"/>
- <style type="text/css">
-
- style>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- head>
- <body>
- <p>这是一个测试网页p>
- <div>这是一个测试网页,<P>这是一个超级链接p>这是一个测试网页,<b>这是b标签里面的文字b>div>
-
- body>
-
- html>
子选择符
从某种程度上来说,子选择符 (child Selectors)与包含选择符很像，但鼻血是从父级标签指定字标签,其语法
E1 > E2 {样式属性:属性值;样式属性:属性值;.........}
其中E1 为E2的父标签
-
- >
- <html>
- <head>
- <title>子选择符title>
- <link href="" type="text/css" rel="stylesheet"/>
- <style type="text/css">
-