CSS：【1st】选择器
2015-01-28 11:12
246 查看
假期实习中，做一个用STRUTS2框架的考勤管理系统，目前需求分析，设计样式，数据库全部设计完毕，现在开始写前台了，打算用easyUI的，经理不让只要自己写，没学过啊，今天开始学习CSS整理一下笔记
选择器分为：派生选择器
id选择器
类选择器
属性选择器
1st: 派生选择器
通过依据元素在其位置的上下文关系来定义样式，以达到使标记更加简洁。
例子，希望列表中strong元素变为斜体字，而不是通常的粗体字，可以定义这样一个选择器
li strong {
font-style : italic;
font-weight : normal;
}
请注意蓝色字体strong的上下文关系：
<p><strong>粗体字，因为不在列表中，所以规则不起作用</strong></p>
<ol>
<li><strong>斜体</strong></li>
<li>正常字体，因为strong唯一列表内</li>
<ol>
例子，看看下面CSS的规则
strong{
color: red;
}
h3{
color:blue;
}
h3 strong{
color:yellow
}
看看效果
<p>我叫黑泽，所以黑色.<strong>我是红丸，所以红色.</strong></p>
<h3>我叫蓝波，所以蓝色.</h3>
<h3>我叫蓝波，所以蓝色.<strong>我叫黄岐，所以黄色</strong></h3>
2nd: id 选择器
id 选择器可以为标有特定id 的 HTML 元素指定特定的样式
id 选择器以 # 来定义
例子，下面2个ID 选择器一个定义元素的颜色为红色，另一个定义元素的颜色为蓝色
#red{
color : red;
}
#blue{
color : blue;
}
下面代码ID 为 red 的元素显示为红色，ID 为 blue 的元素显示为红色
<p id="red">我是红丸，所以红色.</p>
<p id="blue">我叫蓝波，所以蓝色.</p>
ID 选择器和派生选择器
在现代布局中，ID 选择器常常用于建立派生选择器
#sidebar p{
font-style: italic;
text-align : right;
margin-top : 0.5em;
}
一个选择器，多种用法
即使被标记为sidebar 的元素只能在文档中出现一次，这个 ID 选择器作为派生选择器也可以被很多次使用
单独的选择器
ID 选择器即使不被用来创建派生选择器，他也可以独立发挥作用
3rd: 类选择器
在CSS 中类选择器以一个点号显示
.center {
text-align : center;
}
上面代码中，表示所有拥有center 类的 HTML 元素均为居中
下面代码中，h1 和 p 元素都 center 类。这意味着两者都将遵守，".cenrer"选择器中定义的规则
<h1 class="center">
我的类是center，按照规则我要居中
</h1>
<p class="center">
我的类也是center，按照规则我要居中
</p>
注意：类名的第一个字母不能使用数字
和 ID 一样，class 也可以被作为派生选择器
.fancy td{
color : #f60;
background : #666;
}
元素也可以基于他的类被选择：
td.fancy{
color : #f60;
background : #666;
}
上面代码中，类名为fancy的表格单元讲带有灰色背景的橙色
<td class="fancy">
4th: 属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为指定属性 HMTL 元素设置样式 ，而不仅限于 class 和 ID 属性
属性选择器
下面的例子中为带有title的属性的所有元素设置样式：
[title]{
color : red;
}
属性和值选择器
下面的例子为title="UckyK"的所有元素设置样式：
[tittle="UckyK"]{
color : red;
}
属性和值选择器' 多个值
下面的例子为title属性的所有元素设置样式。适用于由空格分隔的属性值：
[tittle~="hello"]{
color : red;
}
看看效果
<h1>应用样式的：</h1>
<h2 title="hello world">Hello world</h2>
<h2 title="wor
hello ld">Hello world</h2>
<p title="student
hello">Hello students!</h1>
<h1>未应用样式的：</h1>
<h2 title="world">Hello</h2>
<h2 title="worhellold">Hello</h2>
必须由空格隔开
下面的例子为lang属性的所有元素设置样式。适用于由-分割的属性值：
[lang|="en"]{
color:red;
}
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="uens">Hi!</p>
<p lang="zh">Hao!</p>
设置表单的样式
属性选择器在为不带有class或者ID的表单样式时特别有用
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
CSS参考手册
本文章大部分摘抄 w3school.com.cn 后整理所得
选择器分为：派生选择器
id选择器
类选择器
属性选择器
1st: 派生选择器
通过依据元素在其位置的上下文关系来定义样式，以达到使标记更加简洁。
例子，希望列表中strong元素变为斜体字，而不是通常的粗体字，可以定义这样一个选择器
li strong {
font-style : italic;
font-weight : normal;
}
请注意蓝色字体strong的上下文关系：
<p><strong>粗体字，因为不在列表中，所以规则不起作用</strong></p>
<ol>
<li><strong>斜体</strong></li>
<li>正常字体，因为strong唯一列表内</li>
<ol>
例子，看看下面CSS的规则
strong{
color: red;
}
h3{
color:blue;
}
h3 strong{
color:yellow
}
看看效果
<p>我叫黑泽，所以黑色.<strong>我是红丸，所以红色.</strong></p>
<h3>我叫蓝波，所以蓝色.</h3>
<h3>我叫蓝波，所以蓝色.<strong>我叫黄岐，所以黄色</strong></h3>
2nd: id 选择器
id 选择器可以为标有特定id 的 HTML 元素指定特定的样式
id 选择器以 # 来定义
例子，下面2个ID 选择器一个定义元素的颜色为红色，另一个定义元素的颜色为蓝色
#red{
color : red;
}
#blue{
color : blue;
}
下面代码ID 为 red 的元素显示为红色，ID 为 blue 的元素显示为红色
<p id="red">我是红丸，所以红色.</p>
<p id="blue">我叫蓝波，所以蓝色.</p>
ID 选择器和派生选择器
在现代布局中，ID 选择器常常用于建立派生选择器
#sidebar p{
font-style: italic;
text-align : right;
margin-top : 0.5em;
}
一个选择器，多种用法
即使被标记为sidebar 的元素只能在文档中出现一次，这个 ID 选择器作为派生选择器也可以被很多次使用
单独的选择器
ID 选择器即使不被用来创建派生选择器，他也可以独立发挥作用
3rd: 类选择器
在CSS 中类选择器以一个点号显示
.center {
text-align : center;
}
上面代码中，表示所有拥有center 类的 HTML 元素均为居中
下面代码中，h1 和 p 元素都 center 类。这意味着两者都将遵守，".cenrer"选择器中定义的规则
<h1 class="center">
我的类是center，按照规则我要居中
</h1>
<p class="center">
我的类也是center，按照规则我要居中
</p>
注意：类名的第一个字母不能使用数字
和 ID 一样，class 也可以被作为派生选择器
.fancy td{
color : #f60;
background : #666;
}
元素也可以基于他的类被选择：
td.fancy{
color : #f60;
background : #666;
}
上面代码中，类名为fancy的表格单元讲带有灰色背景的橙色
<td class="fancy">
4th: 属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为指定属性 HMTL 元素设置样式 ，而不仅限于 class 和 ID 属性
属性选择器
下面的例子中为带有title的属性的所有元素设置样式：
[title]{
color : red;
}
属性和值选择器
下面的例子为title="UckyK"的所有元素设置样式：
[tittle="UckyK"]{
color : red;
}
属性和值选择器' 多个值
下面的例子为title属性的所有元素设置样式。适用于由空格分隔的属性值：
[tittle~="hello"]{
color : red;
}
看看效果
<h1>应用样式的：</h1>
<h2 title="hello world">Hello world</h2>
<h2 title="wor
hello ld">Hello world</h2>
<p title="student
hello">Hello students!</h1>
<h1>未应用样式的：</h1>
<h2 title="world">Hello</h2>
<h2 title="worhellold">Hello</h2>
必须由空格隔开
下面的例子为lang属性的所有元素设置样式。适用于由-分割的属性值：
[lang|="en"]{
color:red;
}
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="uens">Hi!</p>
<p lang="zh">Hao!</p>
设置表单的样式
属性选择器在为不带有class或者ID的表单样式时特别有用
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
CSS参考手册
本文章大部分摘抄 w3school.com.cn 后整理所得
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css 中多个class选择器的详解
- CSS--选择器的特殊性
- CSS的Class以及ID选择器
- CSS 选择器 (1、2、3 )
- css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
- css 选择器，闲时看看，巩固基础
- CSS 选择器
- CSS 相邻兄弟选择器
- CSS ID选择器与类选择器的区别
- CSS中的各类选择器
- CSS基础知识一（CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、）
- 精通css 01 选择器
- HTML与CSS基础之伪类选择器(三)
- css 选择器
- css复习——选择器、padding、margin day4
- css link顺序与类选择器组合之间的关系
- html 学习(css class选择器)
- CSS 选择器参考手册
- CSS之旅——第三站 强大的伪选择器
- CSS三种基本选择器