作者：jun_c | 来源：互联网 | 2023-08-29 17:49
一、属性选择符如下表所示:例子如下：二、伪对象选择符CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择
一、属性选择符
如下表所示:
例子如下：
<head>
<meta charset="utf-8">
<style type="text/css">
h3[class]{
color: red;
}
a[class="link"]{
color: burlywood;
}
a[class~="aa"]{
text-decoration: none;
}
a[class^="aa"]{
color: yellow;
}
a[class$="bb"]{
color: blueviolet;
}
a[class*="cc"]{
color: brown;
}
a[class|="test"]{
color: darkcyan;
}
style>
head>
<body>
<h3 class="hh">我是标题3h3>
<h3>我是标题3h3>
<h3 class="ss">我是标题3h3>
<h3>我是标题3h3>
<a href="#" class="link">链接一a>
<a href="#" class="link1 aa">链接二a>
<a href="#" class="aalink1">链接三a>
<a href="#" class="linkbb">链接一a>
<a href="#" class="linkcc">链接二a>
<a href="#" class="cclink1">链接三a>
<a href="#" class="test-link">链接四a>
body>
二、伪对象选择符
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
（1）、E:first-letter/E::first-letter 注：此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
<head>
<style type="text/css">
.p1::first-letter
{
float: left;
font-size: 30px;
padding: 5px;
}
style>
head>
<body>
<p class="p1">今天天气晴朗，有风。p>
body>
（2）、E:first-line/E::first-line 注:此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。
<head>
<style type="text/css">
.p2::first-line
{
color: red;
}
style>
head>
<body>
<p class="p2">设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。p>
body>
（3）、E:before/E::before 、E:after/E::after
<head>
<style type="text/css">
h2::before{
color: red;
content: "谢谢你的访问。";
}
h3::after{
color: blue;
content: "谢谢你的访问。";
}
style>
head>
<body>
<h2>我是标题2h2>
<h3>我是标题3h3>
body>
（4）、E::selection
不同浏览器测试下的写法：
<head>
<style type="text/css">
#pp1::-moz-selection{
color: red;
background: #fff;
}
#pp1::selection{
color: red;
background: #fff;
}
style>
head>
<body>
<p id="pp1">请选中这段文字，就会知道selection的作用。p>
body>
请选中这段文字，就会知道selection的作用。
CSS学习总结（三）
京公网安备 11010802041100号