热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

【前端开发系列】——CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。

  CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。

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>
View Code
推荐阅读
author-avatar
du-qhy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有