标签：02 color 元素 value class 选择器 CSS 属性
一、元素（类型）选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
因此，我们也可以为 XML 文档中的元素设置样式：
XML 文档：
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
CSS 文档：
note
{
font-family:Verdana, Arial;
margin-left:30px;
}
to
{
font-size:28px;
display: block;
}
from
{
font-size:28px;
display: block;
}
heading
{
color: red;
font-size:60px;
display: block;
}
body
{
color: blue;
font-size:35px;
display: block;
}
通过上面的例子，您可以看到，CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。
二、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1 { text-align:center; color:red; }
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
三、class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
四、分组选择器
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
h1,h2,p { color:green; }
五、嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
六、CSS 组合选择符
1、后代选择器(以空格分隔)
后代选择器用于选取某元素的后代元素。
以下实例选取所有元素插入到元素中:
div p { background-color:yellow; }
2、直接子元素选择器(以>大于号分隔）
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了元素中所有直接子元素 ：
div>p { background-color:yellow; }
3、相邻兄弟选择器（以+加号分隔）
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于元素后的第一个元素:
div+p { background-color:yellow; }
4、后续兄弟选择器（以~破折号分隔）
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 元素之后的所有相邻兄弟元素 :
div~p { background-color:yellow; }
七、属性选择器
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
- "value 是完整单词" 类型的比较符号: ~=, |=
- "拼接字符串" 类型的比较符号: *=, ^=, $=
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title]
{
color:blue;
}
1、属性值等于value
下面的实例改变了标题title='runoob'元素的边框样式:
[title=runoob]
{
border:5px solid green;
}
2、属性中包含 value:
1、[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] -->
2、[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en] { color:blue; }
3、[attribute*=value] 属性中包含字符串，作字符串拆分只要能拆出来 value 这个词就行，例如：
[title*=flower] -->
3、属性中以value首尾:
1、[attribute^=value] :attribute 属性以 value 开头
[lang^=en] -->
2、[attribute$=value]:attribute 属性以 value 结尾
a[src$=".pdf"]
属性选择器样式无需使用class或id的形式:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
标签：02,color,元素,value,class,选择器,CSS,属性 来源： https://www.cnblogs.com/springsnow/p/16270035.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。