css 基础---选择器

时间:2023-03-08 16:34:57
css 基础---选择器

1.css基础

selector {property: value}

css 基础---选择器

eg:

h1 {color:red; font-size:14px;}
p {
text-align: center;
color: black;
font-family: arial;
}
h1,h2,h3,h4,h5,h6 {
color: green;
}

希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

li strong {
font-style: italic;
font-weight: normal;
}

id 选择器以 "#" 来定义。

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

#red {color:red;}
#green {color:green;}

id 选择器和派生选择器

在现代布局中,id 选择器常常用于建立派生选择器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

类选择器以一个点号显示:

.center {text-align: center}

和 id 一样,class 也可被用作派生选择器:

.fancy td {
color: #f60;
background: #666;
}

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

属性选择器

下面的例子为带有 title 属性的所有元素设置样式:

[title]
{
color:red;
}

下面的例子为 title="W3School" 的所有元素设置样式:

[title=W3School]
{
border:5px solid blue;
}

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

[title~=hello] { color:red; }

CSS 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value]

匹配属性值中包含指定值的每个元素。