常见的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. 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用

    嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...

  2. 优课堂考勤系统——Alpha发布1

    一.作业描述 这个作业属于哪个课程 这个作业要求在哪里 团队名称 CTRL-IKun 这个作业的目标 在这个星期内完成团队项目α版本的第一次测试和发布,为发布下一次的 α版本做一个准备和前期检验 项目 ...

  3. Bate冲刺博客(3次)

    Bate冲刺博客 课程介绍 课程 (https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience) 作业要求 https://www ...

  4. AI初探1

    一个典型的机器学习的过程,首先给出一个输入数据,我们的算法会通过一系列的过程得到一个估计的函数,这个函数有能力对没有见过的新数据给出一个新的估计,也被称为构建一个模型.就如同上面的线性回归函数. 在机 ...

  5. Web自动化测试项目(六)多环境执行

    需求 使用命令行运行脚本,可以指定测试/预发布/生产环境的url,如果找不到该环境变量则默认为测试环境 python3 xxxxxx.py test 修改constants.py # DOMAIN = ...

  6. springBoot 启动没有数据库配置报错

    在没有配置数据库的时候, 直接启动springBoot 项目 会有报错 Description: Failed to configure a DataSource: 'url' attribute i ...

  7. .net core3.1 web api中使用newtonsoft替换掉默认的json序列化组件

    在微软的文档中,有着较为详细的替换教程 https://docs.microsoft.com/zh-cn/aspnet/core/web-api/advanced/formatting?view=as ...

  8. Dubbox 环境搭建-新(Windows下)

    分布式服务框架 dubbo/dubbox 入门示例 dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http:// ...

  9. 链表基本操作与排序(c语言)

    本设计程序用C编写,完成单链表的生成,任意位置的插入.删除,以及确定某一元素在单链表中的位置.实现三种排序算法-冒泡排序.快速排序.合并排序.产生四个长度为100,1000,10000,50000的随 ...

  10. Java 添加、替换、删除PDF中的图片

    概述 本文介绍通过java程序向PDF文档添加图片,以及替换和删除PDF中已有的图片.另外,关于图片的操作还可参考设置PDF 图片背景.设置PDF图片水印.读取PDF中的图片.将PDF保存为图片等文章 ...