想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。
下面是CSS3的属性选择器的语法,及使用。
元素名字[元素类型=“类型名字”]:选择器名字{
属性:值;
属性:值;
}
在元素类型匹配时,就可以使用类似正则的匹配方法。
[att=val] 指定特定名字的元素
[att*=val] 匹配val*的元素,
[att^=val] 匹配val开头的元素,比如id为val1、val432432都可以。
[att$=val] 匹配val结尾的元素,比如id为1213val、fdajlval等等。
通常,CSS中会有一些已经定义好的元素选择器,我们通过
选择器:伪元素{属性名:值}
来定义。
常用的伪选择器有:
1 first-line 伪元素选择器:某个元素的第一行
2 first-letter:某元素的首字母
3 after:某元素之后插入内容,如
:before
{
content:123
}
4 before:某元素之前插入内容
root:整个DOM的元素定点,也就是html
not:排除特定的元素
empty:比如一个列表空的那个元素
target:链接指定的目标
1 <html>
2 <head>
3 <style type="text/css">
4 :target{
5 background-color:yellow;
6 }
7 style>
8 head>
9 <body>
10 <p id="menu">
11 <a href="#text1">示例1a>|
12 <a href="#text2">示例2a>|
13 <a href="#text3">示例3a>|
14 <a href="#text4">示例4a>|
15 <a href="#text5">示例5a>
16 p>
17 <div id="text1">
18 <h2>示例文字1h2>
19 <p>..此处省略..p>
20 div>
21 <div id="text2">
22 <h2>示例文字2h2>
23 <p>..此处省略..p>
24 div>
25 <div id="text3">
26 <h2>示例文字3h2>
27 <p>..此处省略..p>
28 div>
29 <div id="text4">
30 <h2>示例文字4h2>
31 <p>..此处省略..p>
32 div>
33 <div id="text5">
34 <h2>示例文字5h2>
35 <p>..此处省略..p>
36 div>
37 body>
38 html>