常见的CSS3选择器包含：常用基本、属性、伪类、层级（组合）选择器，具体使用情况建议先阅读css选择器四大类：基本、组合、属性、伪类对于选择器的使用有一个基本了解，选择器的作用在于通过它找到元素，并且给它添加属性样式。

常用的选择器有：标签、id、类、关联（通过父集找到子集）组合选择器，注意html页面中id是唯一的；基本选择器有（/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)第几个元素*/，/*::first-line 第一行*/，/*::first-letter 第一个单词/字符*/，然后层级选择器有a b后代，a>b子元素，a+b后面的元素（相邻选择器），其次伪类选择器有:hover，:focus焦点，::selection更改鼠标选择文本背景色，最后属性选择器（属性选择器的目的在于可以直接把标签身上的一种属性拿来用）有基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束。（备注说明：教程是16年的，有些选择器的名称与现在的不是很一致，建议这里的基本选择器还是按照伪类来记，有关css选择器的四大分类以之前博文为主导，有不同地方欢迎留言评论，下面是一些有意思的的样式，就写出来展示了下）.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>CSS3选择器和文本字体样式</title>

     <style type="text/css">

     div::first-line{

         color: #f90;

     }/*第一行*/

     div::first-letter{

         font-style: italic;

         font-size: 24px;

     }/*第一个单词/字符*/

     .box>li:first-child{

         list-style: square;

     }/*第一个元素*/

     .box>li:last-child{

         list-style: none;

     }/*最后一个元素*/

     .box>li:nth-child(3){

         list-style: lower-roman;

     }/*第n个元素*/

     div::selection{

         background-color: red;

         color: #FFF;

     }/*::selection更改鼠标选择文本背景色*/

     input{

         outline: none;

     }/*文本聚焦，更换默认边框颜色*/

     </style>

 </head>

 <body>

     <ul class="box">

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

     </ul>

     <div>

         “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies.It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. "

     </div>

     <form action="" method="get">

         焦点:<input type="text">

     </form>

 </body>

 </html>

css3中"font"字体:/*font-family:字体类型*/，/*font-size:字体大小*/，/*font-style:itailc斜体*/，/*font-weight: 控制字体粗细大小*/，建议阅读css常用样式font控制字体的多种变换内容介绍基本一致。

css3对文本样式的处理常见的样式有letter-spacing:字间距，word-spacing:词间距，text-decoration:下划线，text-align:文本对齐方式，text-indent：首航缩进，line-height:行高，color：文本字体颜色，word-break:break-all文本折行。常说撞了南墙才回头，现在如果文本中恶意输入信息，比方都是这个单字母，怎么办？你会发现它在浏览器中不自动换行，而且出现底部滚动条，这个html文档展示一般从上至下，但是这个页面这样从左至右展示，怎么办?解决办法见div.box2，自行写下，浏览器展示下，印象更深，当然这种情况毕竟是少数，毕竟页面的排版还是换行来的好看，Foreigner也不例外吧！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>有意思的word-break:break-all文本折行</title>

     <style type="text/css">

     div.box2{

         word-break: break-all;

         overflow: auto;

     }/*word-break:break-all文本折行*/

     </style>

 </head>

 <body>

     <!--默认文本都是换行的-->

     <div class="box1">

         “尽信书不如无书下一句：吾于《武成》，取二三策而已矣。出自《孟子》的《尽心章句下》， “尽信书，则不如无书” 这是精辟透脱的读书法，要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies. It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently.

     </div>

      <!--但是像这样一些恶意输入文本的,你会发现它在浏览器中不自动换行，而且出现底部滚动条，这个html文档展示一般从上至下，但是这个页面这样从左至右展示，怎么办?解决办法见div.box2-->

     <div class="box2">

         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

     </div>

 </body>

 </html> 

常见CSS3选择器和文本字体样式汇总的更多相关文章

  1. css3-2 CSS3选择器和文本字体样式

    css3-2   CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...

  2. flash中设置文本字体样式

    txt.setTextFormat(tf);  txt.defaultTextFormat = tf;

  3. CSS3 选择器 修改 整数个样式

    .blogbottom ul li:nth-child(4n){margin-right:0px;} 说明:4n就是每第4个.

  4. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  5. css选择器和新增UI样式总结

    经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.

  6. 0312-css样式（选择器、文本text、字体fonts、背景background）

    问题: 1.css中table{border:1px:}是定义table的样式,只有表格的外边框,不能实现<table border="1"></table> ...

  7. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  8. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  9. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

随机推荐

  1. 我的开源权限管理项目BeCore (基于.net core开发)

    首先 谢谢大家还记得我.. 新年快乐 祝大家工作顺利 事事顺心 人见人爱 车见车载 冬不寒 下雨有伞 全身哪都不疼 就是有人疼 ~~ Github地址:https://github.com/baby8 ...

  2. （转）GET来的漏洞

    转自呆子不开口在wooyun知识库的文章 0x00 前言 这篇文章主要讲目前互联网上get方法被不规范使用带来的一些安全漏洞.其中重点会讲get请求在账号登陆体系中被滥用的场景和攻击方式. 0x01 ...

  3. 如何查看Ubuntu服务器上Django项目的MySQL服务有没有挂？

    如果你在项目内输入:MySQL -uroot -p 接着输入密码之后返回ERROR:1045……如下图 那么这就说明MySQL服务挂了. 需要重新启动一下 重启时在项目目录下输入:sudo servi ...

  4. 正斜杠(" / ")和反斜杠(" \ ")的区别

    反斜杠“\”是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点.所以除了程序设计领域外,任何地方都不应该使用反斜杠. 如何区分正反斜杠 英语:"/" 英文是forward ...

  5. 痞子衡嵌入式：语音处理工具pzh-speech诞生记（4）- 音频录播实现(PyAudio)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之音频录播实现. 音频录播是pzh-py-speech的主要功能,pzh-py-speech借 ...

  6. c#数字图像处理（三）灰度直方图

    灰度直方图是灰度的函数,描述的是图像中具有该灰度级的像素的个数.如果用直角坐标系来表示,则它的横坐标是灰度级,纵坐标是该灰度出现的概率(像素的个数). using System; using Syst ...

  7. Python学习，第二课 - 字符编码

    关于字符编码 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) ASCII(American Standard Code for Information Inte ...

  8. 异想家Eclipse的偏好配置

    1.汉化 http://www.eclipse.org/babel/downloads.php 找到Babel Language Pack Zips,下面选自己版本点进去,找到如下类似的中文包: Ba ...

  9. [校内训练19_09_02]C

    题意 给出一棵N 个节点的树,树上的每个节点都有一个权值$a_i$. 有Q 次询问,每次在树上选中两个点u, v,考虑所有在简单路径u, v 上(包括u, v)的点构成的集合S. 求$\sum_{w∈ ...

  10. Kubernetes学习（一）

    一 安装 三台机器搭建K8S集群,一台master两台woker Docker 18.09.0---kubeadm-1.14.0-0 kubelet-1.14.0-0 kubectl-1.14.0-0 ...