CSS 常见的8种选择器 和 文本溢出问题
<!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种选择器 和 文本溢出问题的更多相关文章
- [Web 前端] 007 css 常见的七种选择器
1. 标签选择器 影响范围大 建议尽量应用在层级选择器中 举例 <!-- body 体中的 div --> <div>box...</div> /* style 中 ...
- 理解CSS中的三种选择器>+~
1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...
- css实现单行(多行)文本溢出显示 ...
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
- CSS常见的5种垂直水平居中(面试够用)
方法一 (flex) <div id='box'> <div class='child'></div> </div> #box{ width:200px ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- 常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
随机推荐
- docker 8 docker的镜像命令
先回顾一下容器.存储.镜像三者之间的关系. 我们知道docker的logo是一条大鲸鱼背上驮着集装箱.那我们对应到docker如下: 1)蓝色的大海里面------->宿主机系统比如我笔记本wi ...
- idea 修改设置 检测方式为 es6
intellij idea 14不支持ES6语法!javascript 文件内到处飘红 file>settings>Lauguages & Frameworks>javasc ...
- 深入理解 Servelt
1.什么是 Servlet ? Servlet(Server Applet)是 Java Servlet 的简称,称为小服务程序或服务连接器,用 Java 编写的服务器端程序,具有独立于平台和协议的特 ...
- redis学习(一)——redis介绍及安装
一.redis简介 redis是一个高性能的key-value非关系数据库,它可以存键(key)与5种不同类型的值(value)之间的映射(mapping),支持存储的value类型包括:String ...
- python:面向对象编程之Zope.interface安装使用
持续学习python+django中... 一.接口简述 在我们所熟知的面向对象编程语言中,大多提供了接口(interface)的概念.接口在编程语言中指的是一个抽象类型,是抽象方法的集合:它的特点如 ...
- 调试器GDB的基本使用方法
GDB调试的三种方式: 1. 目标板直接使用GDB进行调试. 2. 目标板使用gdbserver,主机使用xxx-linux-gdb作为客户端. 3. 目标板使用ulimit -c unlimited ...
- 解决Android Studio 错误方法
https://blog.csdn.net/lang523493505/article/details/82914253 https://blog.csdn.net/qq_23599965/artic ...
- H5 18-序选择器
18-序选择器 我是标题 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 我是段落7 我是段落8 --> 我是段落1 我是段落2 我是段落2 我是标题 <!DOCT ...
- CI框架在控制器中切换读写库和读写库
CodeIgniter框架版本:3.1.7 ,php版本:5.6.* ,mysql版本:5.6 在Ci框架中,可以在application/config/database.php中配置多个group, ...
- 【学习总结】C-翁恺老师-入门-第0周<程序设计与C>
[学习总结]C-翁恺老师-入门-总 1-首先按视频说的下载编辑器 <DevC++> 并一路默认设置: 安装包下载链接 (我有vc6.0不过预感告诉我老师要用类似CS50里那种命令行编辑器? ...