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>
转载于:https://www.cnblogs.com/ZXF6/p/10408913.html
CSS 常见的8种选择器 和 文本溢出问题相关推荐
- HTML/CSS常见的几种水平居中、垂直居中、水平垂直居中方法
HTML/CSS常见的几种水平居中.垂直居中.水平居中方式 一.水平居中 1.第一种方式 在css中使用text-align和display属性 <!DOCTYPE html> <h ...
- CSS基础知识---三种选择器
CSS基础知识---三种选择器 选择器 标签选择器 id选择器 class选择器 全部代码 选择器 标签选择器 id选择器 class选择器 标签选择器 选择器优先级:id>class>标 ...
- css样式的五种选择器
css样式的五种选择器 css样式中有五种选择器,分别是标签选择器.类选择器.ID选择器.派生选择器.组合选择器,接下来为大家一一介绍. (1)标签选择器 针对于标签的选择器,这种选择器中的样式会作用 ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
- css常见的几种布局
1.float 浮动. 浮动元素的顶部,在标准文档流的底部. 浮动会脱离文档流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存 ...
- CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局 常见的单列布局有两种: header.cont ...
- CSS3常见的几种选择器
基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选择指定类型的的html元素 ID选择器~选择指定ID属性值为"id"的html元素,选择的时候前面 ...
- CSS常见的四种垂直居中的方法
面试中不管是笔试题还是面试题,一般很容易被问到如何实现垂直水平居中,这里总结四种方法作为参考 (1)margin:auto法 css: div{ width: 400px; height: 400px ...
- html,css常见的几种垂直居中方式
一丶什么是垂直居中 指当前标签在父级容器中垂直方向是居中显示的 实现垂直居中的几种方式: 1.table-cell+vertical-align 属性配合使用 2.absolute+transform ...
- web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录 一.什么是CSS 二.CSS的三种样式及其优先级 三.CSS基本选择器及其优先级 四.其他常见的选择器 五.选择器优先进阶 六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
最新文章
- LeetCode实战：最小栈
- codesmith用access的mdb文件作数据源的模板引用
- 产品要不要做先回答的10个问题
- c语言编程基础课件,第7章_C语言图形编程基础课件
- 谈谈NiTE 2手部跟踪在彩色图像上的显示
- iOS项目开发优秀文章汇总
- linux-文件的类型
- B站在港交所挂牌上市 12名UP主共同敲钟
- 深度学习实践指南（四）—— 一个典型的深度学习的实践流程
- Spring之获得Bean本身的id
- vue.js简单登录界面访问mysql_Vuejs实战项目：登陆页面
- java aes加密_springboot.X手册：防抓包？快速实现API接口数据加密
- 9 内存模型和名称空间
- Axure RP 8的介绍
- 定时器+echarts运行时间太长导致内存溢出页面崩溃
- xbrowser连接Linux没有桌面,Windows下使用Xbrowser连接Centos 6.x自带的远程桌面
- 【C++容器】数组和vector、array三者区别和联系
- konga 连接postgresql 12+启动异常：error: column r.consrc does not exist
- Unity C# 网络学习（十二）——Protobuf生成协议
- 【UI界面开发】基本组件概述