CSS3 :nth-child() 选择器
实例
指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
p:nth-child(2)
{
background:#ff0000;
}
定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。
……继续阅读 »
2年前 (2022-09-04) 115浏览 0评论
0个赞
CSS3 :only-of-type 选择器
实例
指定属于父元素的特定类型的唯一子元素的每个 p 元素：：
p:only-of-type
{
background:#ff0000;
}
定义和用法
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:only-of-type……继续阅读 »
2年前 (2022-09-04) 99浏览 0评论
0个赞
CSS3 :only-child 选择器
实例
匹配属于父元素中唯一子元素的 p 元素:
p:only-child
{
background:#ff0000;
}
定义和用法
:only-child 选择器匹配属于父元素中唯一子元素的元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:only-child
4.0
9.0
3.5
3.2
9.6
……继续阅读 »
2年前 (2022-09-04) 129浏览 0评论
0个赞
CSS3 :first-of-type 选择器
实例
选择的 p 元素是其父元素的第一个 p 元素：
p:first-of-type
{
background:#ff0000;
}
定义和用法
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器……继续阅读 »
2年前 (2022-09-04) 287浏览 0评论
0个赞
CSS3 :last-of-type 选择器
实例
指定其父级的最后一个p元素的背景色：
p:last-of-type
{
background:#ff0000;
}
定义和用法
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
……继续阅读 »
2年前 (2022-09-04) 132浏览 0评论
0个赞
CSS3 [attribute*=value] 选择器
实例
设置class属性值包含”test”的所有div元素的背景颜色：
div[class*=”test”]
{
background:#ffff00;
}
定义和用法
[attribute*=value] 选择器匹配元素属性值包含指定值的元素……继续阅读 »
2年前 (2022-09-04) 161浏览 0评论
0个赞
CSS3 [attribute^=value] 选择器
实例
设置class属性值以”test”开头的所有div元素的背景颜色：
div[class^=”test”]
{
background:#ffff00;
}
定义和用法
The [attribute^=value]
选择器匹配元素属性值带指定的值开始的元素。
浏览器支持
所有主流浏览器都支……继续阅读 »
2年前 (2022-09-04) 96浏览 0评论
0个赞
CSS3 [attribute$=value] 选择器
实例
设置class属性值以”test”结尾的所有div元素的背景颜色：
div[class$=”test”]
{
background:#ffff00;
}
定义和用法
[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。
浏览器支持
所有主流浏览器都支持[at……继续阅读 »
2年前 (2022-09-04) 117浏览 0评论
0个赞
CSS3 element1~element2 选择器
实例
设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色：
p~ul
{
background:#ff0000;
}
定义和用法
element1~element2 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在……继续阅读 »
2年前 (2022-09-04) 84浏览 0评论
0个赞
CSS :after 选择器
实例
每个<p>元素之后插入内容：
p:after
{
content:"– Remember this";
}
定义和说明
:after 选择器向选定元素的最后子元素后面插入内容。
使用content 属性来指定要插入的内容。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
::af……继续阅读 »
2年前 (2022-09-04) 113浏览 0评论
0个赞
CSS :lang 选择器
实例
每个<p>元素lang属性值等于”it(Italian)” 的选择的样式：
p:lang(it)
{
background:yellow;
}
定义和用法
:lang 向带有指定 lang 属性开始的元素添加样式。
注意: 值是整个单词，单独像lang=”en”，或者使用连字符(-)如lang =……继续阅读 »
2年前 (2022-09-04) 72浏览 0评论
0个赞
CSS :before 选择器
实例
每个 <p>元素之前插入内容：
p:before
{
content:”Read this: “;
}
定义和说明
:before 选择器向选定的元素前插入内容。
使用content 属性来指定要插入的内容。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
::before
……继续阅读 »
2年前 (2022-09-04) 98浏览 0评论
0个赞
CSS :first-line 选择器
实例
每个<p>元素的第一行选择的样式：
p:first-line
{
background-color:yellow;
}
定义和用法
:first-line选择器用来指定选择器第一行的样式。
注意::first-line选择器可以使用以下属性：
font properties
color properties
background……继续阅读 »
2年前 (2022-09-04) 131浏览 0评论
0个赞
CSS :first-child 选择器
实例
匹配 <p> 的父元素的第一个<p>元素
p:first-child
{
background-color:yellow;
}
定义和用法
:first-child 选择器匹配其父元素中的第一个子元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:first-child
4.0
7……继续阅读 »
2年前 (2022-09-04) 141浏览 0评论
0个赞
CSS :focus 选择器
实例
一个输入字段获得焦点时选择的样式：
input:focus
{
background-color:yellow;
}
定义和用法
:focus选择器用于选择具有焦点的元素。
提示: :focus选择器接受键盘事件或其他用户输入的元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:focus
4.0
8.0
2……继续阅读 »
2年前 (2022-09-04) 289浏览 0评论
0个赞
CSS :first-letter 选择器
实例
每个 <p>元素的第一个字母选择的样式：
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
定义和用法
:first-letter选择器用来指定元素第一个字母的样式。
提示: :first-letter选择器可以使用以下属性：
font properties
color p……继续阅读 »
2年前 (2022-09-04) 142浏览 0评论
0个赞
CSS :hover 选择器
实例
选择鼠标移到链接上的样式：
a:hover
{
background-color:yellow;
}
定义和用法
:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式
:active选择器设置当你点击链接时……继续阅读 »
2年前 (2022-09-04) 118浏览 0评论
0个赞
CSS :visited 选择器
实例
选择访问过得链接样式：
a:visited
{
background-color:yellow;
}
定义和用法
:visited向访问过的链接添加特殊的样式。
Tip: 使用:visited选择器设置访问过的页面链接的样式， :hover选择器当有鼠标悬停在其上的链接样式，:active 选择器设置当你点击链接时的样式。
浏览器支持
表格中的数字表示支……继续阅读 »
2年前 (2022-09-04) 107浏览 0评论
0个赞
CSS :active 选择器
实例
选择激活的链接样式：
a:active
{
background-color:yellow;
}
定义和用法
:active向活动的链接添加特殊的样式。
当你点击一个链接时它变成活动链接。
提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式,
:hover 选择器当有鼠标悬停在其上的链接样式。
注意……继续阅读 »
2年前 (2022-09-04) 148浏览 0评论
0个赞
CSS [attribute|=value] 选择器
实例
选择 lang 属性等于 en，或者以 en- 为开头的所有元素，并设置其样式：
[lang|=en]
{
background-color:yellow;
}
定义和用法
[attribute|=value] 选择器用于选择以指定值开头的属性值的元素。
注意:该值是整个单词，无论是单独像 lang=”en”，或者像连字……继续阅读 »
2年前 (2022-09-04) 116浏览 0评论
0个赞
CSS :link 选择器
实例
选择未访问链接样式：
a:link
{
background-color:yellow;
}
定义和用法
:link向未访问的链接添加特殊的样式。
注意: :link 选择器对已经访问的链接没有样式。
提示: 使用 :visited 选择器设置访问过的页面链接的样式，:hover选择器当有鼠标悬停在其上的链接样式，:active 选择器设置当你点击链接时的样式。……继续阅读 »
2年前 (2022-09-04) 140浏览 0评论
0个赞
CSS [attribute~=value] 选择器
实例
选择标题属性包含单词”flower”的所有元素
[title~=flower]
{
background-color:yellow;
}
定义和用法
[attribute~=value] 选择器用于选择属性值包含一个指定单词的元素。
浏览器支持
所有主流浏览器都支持[attribute~=value]选择器。……继续阅读 »
2年前 (2022-09-04) 114浏览 0评论
0个赞
CSS [attribute] 选择器
实例
选择所有带有target属性的 <a>元素：
a[target]
{
background-color:yellow;
}
浏览器支持
所有主流浏览器都支持 [attribute] 选择器。
浏览器支持
所有主流浏览器都支持 [attribute]选择器。
Note: [attribute] 在IE8中运行，必须声明 <!DOC……继续阅读 »
2年前 (2022-09-04) 140浏览 0评论
0个赞
CSS [attribute=value] 选择器
实例
选择所有使用target=”_blank”的a元素
a[target=_blank]
{
background-color:yellow;
}
<h2定义和用法
[attribute=value] 选择器用于选择指定了属性和值的元素。
浏览器支持
所有主流浏览器都支持[attribute=value]选择……继续阅读 »
2年前 (2022-09-04) 105浏览 0评论
0个赞
CSS element+element 选择器
实例
选择所有紧接着 <div> 元素之后的第一个 <p> 元素:
div+p
{
background-color:yellow;
}
定义和用法
element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。
浏览器支持
所有主流浏览器都支持 element+element 选择器。
注意: e……继续阅读 »
2年前 (2022-09-04) 107浏览 0评论
0个赞
CSS element>element 选择器
实例
选择所有父级是 <div> 元素的 <p> 元素：
div>p
{
background-color:yellow;
}
定义和用法
element>element 选择器用于选择特定父元素。
注意: 元素没有被选中是不能直接指定父级的子元素。
浏览器支持
所有主流浏览器都支持 element&……继续阅读 »
2年前 (2022-09-04) 72浏览 0评论
0个赞
CSS element element 选择器
实例
选择<div>元素内的所有<p>元素:
div p
{
background-color:yellow;
}
定义和用法
element element选择器用于选择元素内部的元素。
浏览器支持
所有主流浏览器都支持element,element选择器。
……继续阅读 »
2年前 (2022-09-04) 130浏览 0评论
0个赞
CSS element 选择器
实例
选择所有<p> 元素 :
p
{
background-color:yellow;
}
定义和用法
The element 选择器选择指定元素名称的所有元素。
Browser Support
所有主流浏览器都支持element 选择器。
……继续阅读 »
2年前 (2022-09-04) 114浏览 0评论
0个赞
CSS element,element 选择器
实例
选择所有 <p> 元素和 <h1> 元素:
h1,p
{
background-color:yellow;
}
定义和用法
几个元素具有相同的样式，用逗号分隔每个元素的名称。
浏览器支持
所有主流浏览器都支持 element,element选择器。
……继续阅读 »
2年前 (2022-09-04) 105浏览 0评论
0个赞
CSS * 选择器
实例
选择所有元素，并设置其背景色：
*
{
background-color:yellow;
}
定义和用法
* 选择器选择所有元素。
* 选择器也可以选择另一个元素内的所有元素:
实例
选择<div>元素内的所有元素：
div *
{
background-color:yellow;
}
Browser Support
所有主流浏览器都支……继续阅读 »
2年前 (2022-09-04) 112浏览 0评论
0个赞
