属性选择器:

[att*=val]{}若att元素属性值包括val指定字符,则使用该样式

[att^=val]{}若att元素属性值开头字符为val,则使用该样式

[att&=val]{}若att元素属性值结尾字符为val,则使用该样式

例:

<style type="text/css">
[id^=section1]{
background-color: yellow;
}
</style>

<div id="section2">演示样例文本2</div>
<div id="subsection1">演示样例文本1-1</div>
<div id="subsection2">演示样例文本1-2</div>
<div id="subsection2-1">演示样例文本2-1</div>
<div id="subsection2-2">演示样例文本2-2</div>

target选择器:

页面内href跳转时,又一次定义目标的属性

font字体:曾经的版本号网页中应用的特殊字体仅仅有在client有这个字体时候该字体才干正常显示,

而css3支持从server中获取字体,也就是说你把字体文件放到font目录,能够直接通过url使用这个字体

这一新的变化真的带来了非常大的便利。例:

@font-face{
font-family: WebFont;
src:url('font/FZJZFW.TTF') format("truetype");
font-weight: normal;
}
article{
font-family: WebFont;
}
<article>
<h1>文章内容</h1>
<p>网页级内容区块的正文</p>
<section>
<h3>section级内容的正文</h3>
<p>section级内容区块的正文</p>
</section>
</article>

CSS3学习----选择器、字体的更多相关文章

  1. [CSS3] 学习笔记-选择器详解(三)

    1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...

  2. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  4. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  5. CSS3 教程 选择器 标记一下防止 要找时404

    客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...

  6. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  7. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  8. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  9. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

随机推荐

  1. PHP的接口类(interface)和抽象类(abstract)的区别

    <?php /** * 接口类:interface * 其实他们的作用很简单,当有很多人一起开发一个项目时,可能都会去调用别人写的一些类, * 那你就会问,我怎么知道他的某个功能的实现方法是怎么 ...

  2. WampServer PHP服务配置方法(允许外部访问、phpmyadmin设置为输入用户名密码才可登录等)

    WampSever 指的是apache + mySQL + PHP 三合一套装,第一字母W,是指用于windows系统,我用的是2.0f版.用于Linux系统的,是LampSever,第一字母是L.请 ...

  3. 数字证书管理工具keytool常用命令介绍

    需要给一个apk加签名,用到了keytool这个工具,下面转载一篇介绍keytool的文章 http://blog.chinaunix.net/uid-17102734-id-2830223.html ...

  4. latex列表

    枚举.列举和描述 \begin{list_type} \item The first item \item The second item \item The third etc \ldots\end ...

  5. python 连接数据库-设置oracle ,mysql 中文字符问题

    import cx_Oracle import MySQLdb def conn_oracle(): cnn = cx_Oracle.connect('用户名','密码','ip:端口号/数据库') ...

  6. select,poll,epoll之api笔记

    参考:http://www.cnblogs.com/Anker/p/3265058.html select /* According to POSIX.1-2001 */ #include <s ...

  7. sketch 跟随鼠标指针移动的特效

    演示地址:http://www.ke01.com/yanshi/sucai/20140830/2/ 下载地址:https://yunpan.cn/cqgWeIYPer8eC  访问密码 672b

  8. WPF的重要新概念

    原文 http://www.cnblogs.com/free722/archive/2011/11/12/2238654.html 逻辑树与可视树 XAML天生就是用来呈现用户界面的,这是由于它具有层 ...

  9. spring mvc 提交表单的例子

    1. 构建MAVEN项目,然后转换成web格式,结构图如下: 2. 通过@RequestMapping来进行配置,当输入URL时,会以此找到对应方法执行,首先调用setupForm方法,该方法主要是生 ...

  10. 解析微信node开发;拿token

    获取token,本着两个原则, 1.先查询是否有token,有的话判断其时间是否与上一次请求时间差是否超过7100: a.不超过,直接用得到: b.超过,再获取刷新: 2.没有token获取刷新tok ...