<!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. 关于alter database datafile offline和alter database datafile offline drop 的区别

    转: https://blog.csdn.net/killvoon/article/details/46913183 -----------------------2015-07-16-------- ...

  2. 修复XSS跨站漏洞

    XSS跨站漏洞最终形成的原因是对输入与输出没有严格过滤. 1.输入与输出 在HTML中,<,>,",',&都有比较特殊的意义.HTML标签,属性就是由这几个符合组成的.P ...

  3. Luogu4745/Gym101620G CERC2017 Gambling Guide 期望、DP、最短路

    传送门--Luogu 传送门--Vjudge 设\(f_x\)为从\(x\)走到\(N\)的期望步数 如果没有可以不动的限制,就是隔壁HNOI2013 游走 如果有可以不动的限制,那么\(f_x = ...

  4. Maven的porfile与SpringBoot的profile结合使用详解

        使用maven的profile功能,我们可以实现多环境配置文件的动态切换,可参考我的上一篇博客.但随着SpringBoot项目越来越火,越来越多人喜欢用SpringBoot的profile功能 ...

  5. [BZOJ4005][JLOI2015]骗我呢-[dp+容斥]

    Description 传送门 Solution 如果单独考虑一行i,则左边位置的数严格比右边位置的数小.而一行有m个位置,它们可以填[0,m]这m+1个数,则必然有一个数不存在. 定义第i行的第j位 ...

  6. Linux 特殊权限 SUID,SGID,SBIT

    setuid 和 setgid 分别是 set uid ID upon execution 和 set group ID upon execution 的缩写.我们一般会再次把它们缩写为 suid 和 ...

  7. 【C#复习总结】dynamic

    介绍 C# 4 引入了一个新类型 dynamic. 该类型是一种静态类型,但类型为 dynamic 的对象会跳过静态类型检查. 大多数情况下,该对象就像具有类型 object 一样. 在编译时,将假定 ...

  8. Python股票分析系列——基础股票数据操作（一）.p3

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第3部分.在本教程中,我们将使用我们的股票数据进一步分解一些基本的数据操作和可视化.我们将要使用 ...

  9. 在Linux的Windows子系统上(WSL)使用Docker（Ubuntu）

    背景 平时开发大部人都是在提供了高效GUI的window下工作,但是真正部署环境普遍都是在Linux中,所以为了让开发环境和部署环境统一,我们需要在windows模拟LInux环境,以前我们可能通过虚 ...

  10. 01-HTML介绍

    1.WEB标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构:html.表示: ...