<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css常见的8种选择器</title>
</head>
<style>
/*1.通用选择器
匹配页面上任何一个元素 语法 *{}
* */
*{
color:darkred;
font-size: 23px;
color: blue;
}
/*2.元素选择器 也叫标签选择器
作用 匹配页面指定的元素
元素名称作为选择器
* */
h1{
font-family:kartika;
font-size: 30px;
background:deeppink;
}
/*3.类选择器
作用 通过元素class值 对类选择器进行引用
语法 .类名{}
类名不能以数字开头
* */
.one{
border: 1px dotted deeppink;
}
/*4.id选择器
独一无二 为标有特定id的HTML元素指定样式

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
#id{}

* */
#a{
border: 1px solid red;
height: 600px;

}
/*5.群组选择器
某些元素具有相同的属性，将他们的选择器放在一列 用逗号隔开
列 div,p,#p1,div.top{
color:red;
}
*/
/*6.后代选择器 控制所有后代 范围大
元素之间 存在包含关系 就是嵌套
语法 父级标签或者其选择器 子级标签或者其选择器
列 #a p{}
* */
div p{
background-color: greenyellow;
color:red ;
/*优先级上 p 标签 不在受通用选择器约束*/
}
/*7.子代选择器
只通过父子级关系定位元素 只控制父级下的子级标签 范围小
语法 父级选择器>子级选择器
* */
#a> p{
background-color: yellow;
color: green;
}
/*8.伪类选择器 分为1.链接伪类 2.动态伪类
特点 匹配元素某种特定的状态
语法 由 ： 作为结合符
选择器是伪类选择器{}

1.链接伪类
link 尚未访问的超链接
visited 访问过的超链接

2.动态伪类
hover 鼠标悬停在HTML元素的状态
active 元素被激活的状态
focus 元素获取焦点的状态 一般用在 文本框上
* */
a:link {/*link 尚未访问的超链接*/
background-color: red;
}
a:visited{/*visited 访问过的超链接*/
color:chartreuse;
}
a:active{/*元素被激活的状态*/
color: green;
}
a:hover{/*鼠标悬停在HTML元素的状态*/
background-color: pink;
}
input:focus{ /*元素获取焦点的状态 一般用在 文本框上 */
color: deeppink;
background-color: green;
}
/*9.溢出问题
属性 overflow
overflow-x 横向溢出处理方式
overflow-y 纵向溢出
取值
visible 溢出可见
hidden 溢出隐藏
scroll 出现滚动条
auto 自动不溢出不显示滚动条，溢出的话显示滚动条
*
* */
#z{
border: 1px solid red;
width: 600px;
height:100px;
overflow: auto;

}
</style>
<body>
<!--选择器的作用 ：规范页面中的元素 使用定义好的样式-->
<h1>学习很有趣</h1>

<p>一起加油</p>

<div class="one">
你好 我是div标签 我可以给网页划分布局 作为块级标签 我可以被设置高宽
</div>
<hr />
<div id="a">
<p >后代选择器下的p标签 优先级问题 就近 不受通用选择器约束</p>
<p >后代选择器和子代选择器的区别在哪？ 后代是所有 子代只控制下一子级
<div>
<p >后代选择器下的p标签 优先级问题 就近 不受通用选择器约束</p>
</div>
</p>
</div>
<hr />
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu">666</a>
<hr />

<input type="text" placeholder="placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。"/>
<hr />
<div id="z">
文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。
文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。文本的溢出问题。

</div>

</body>
</html>

CSS 常见的8种选择器 和 文本溢出问题的更多相关文章

  1. [Web 前端] 007 css 常见的七种选择器

    1. 标签选择器 影响范围大 建议尽量应用在层级选择器中 举例 <!-- body 体中的 div --> <div>box...</div> /* style 中 ...

  2. 理解CSS中的三种选择器>+~

    1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F            相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...

  3. css实现单行（多行）文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  4. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  5. CSS常见的5种垂直水平居中（面试够用）

    方法一 (flex) <div id='box'> <div class='child'></div> </div> #box{ width:200px ...

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

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

  7. 常见CSS3选择器和文本字体样式汇总

    常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...

  8. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  9. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

随机推荐

  1. 002_浅析python 中__name__ = '__main__' 的作用

    很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...

  2. hadoop学习笔记贰 --HDFS及YARN的启动

    1.初始化HDFS :hadoop namenode -format 看到如下字样,说明初始化成功. 启动HDFS,start-dfs.sh 终于启动成功了,原来是core-site.xml  中配置 ...

  3. Idea突然不停indexing的问题

    只要清理一下Idea的缓存和索引就可以了,在File-Invalidate Caches / Restart中,选择Invalidate and Restart,之后会重启Idea,然后就解决啦!

  4. C# 下载文件

    最近一段时间,真的是太忙太忙了!经历了自我毕业以来最忙碌的一个项目! 说起这个项目,我有万千感慨 且不说技术能力,也无需谈论项目需求.单就项目压力,日常加班,周六日补班而言,我相信很多人是扛不住的! ...

  5. Maven项目远程部署到Tomcat

    目录 Maven项目远程部署到Tomcat 一.Tomcat插件支持的目标 二.系统要求及插件引入 2.1 系统要求 2.2 引入插件 三.远程部署war到tomcat 3.1 添加tomcat管理角 ...

  6. MiniProfiler安装使用心得

    MiniProfiler简介: MVC MiniProfiler是Stack Overflow团队设计的一款对ASP.NET MVC的性能分析的小程序.可以对一个页面本身,及该页面通过直接引用.Aja ...

  7. 朱晔的互联网架构实践心得S2E4：小议微服务的各种玩法（古典、SOA、传统、K8S、ServiceMesh）

    十几年前就有一些公司开始践行服务拆分以及SOA,六年前有了微服务的概念,于是大家开始思考SOA和微服务的关系和区别.最近三年Spring Cloud的大火把微服务的实践推到了高潮,而近两年K8S在容器 ...

  8. C#里面滥用String造成的性能问题

    前两天给我们的json写一个解析函数, 之前用的正宗的json parser, 支持完整的json特性. 但是实际上我们用到特性, 只有key-value的映射, value的类型只有数字和字符串两种 ...

  9. Python-正则表达式总结版

    前言: 总是写不好正则表达式,时间长不用就有些忘记了,故此在总结一篇文章以便日后查阅. 一.常用的匹配规则总结表 模式 描述 \w 匹配字母数字及下划线 \W 匹配非字母数字及下划线 \s 匹配任意空 ...

  10. c++构造函数成员初始化中赋值和初始化列表两种方式的区别

    先总结下: 由于类成员初始化总在构造函数执行之前 1)从必要性: a. 成员是类或结构,且构造函数带参数:成员初始化时无法调用缺省(无参)构造函数 b. 成员是常量或引用:成员无法赋值,只能被初始化 ...