<!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. docker 8 docker的镜像命令

    先回顾一下容器.存储.镜像三者之间的关系. 我们知道docker的logo是一条大鲸鱼背上驮着集装箱.那我们对应到docker如下: 1)蓝色的大海里面------->宿主机系统比如我笔记本wi ...

  2. idea 修改设置 检测方式为 es6

    intellij idea 14不支持ES6语法!javascript 文件内到处飘红 file>settings>Lauguages & Frameworks>javasc ...

  3. 深入理解 Servelt

    1.什么是 Servlet ? Servlet(Server Applet)是 Java Servlet 的简称,称为小服务程序或服务连接器,用 Java 编写的服务器端程序,具有独立于平台和协议的特 ...

  4. redis学习（一）——redis介绍及安装

    一.redis简介 redis是一个高性能的key-value非关系数据库,它可以存键(key)与5种不同类型的值(value)之间的映射(mapping),支持存储的value类型包括:String ...

  5. python：面向对象编程之Zope.interface安装使用

    持续学习python+django中... 一.接口简述 在我们所熟知的面向对象编程语言中,大多提供了接口(interface)的概念.接口在编程语言中指的是一个抽象类型,是抽象方法的集合:它的特点如 ...

  6. 调试器GDB的基本使用方法

    GDB调试的三种方式: 1. 目标板直接使用GDB进行调试. 2. 目标板使用gdbserver,主机使用xxx-linux-gdb作为客户端. 3. 目标板使用ulimit -c unlimited ...

  7. 解决Android Studio 错误方法

    https://blog.csdn.net/lang523493505/article/details/82914253 https://blog.csdn.net/qq_23599965/artic ...

  8. H5 18-序选择器

    18-序选择器 我是标题 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 我是段落6 我是段落7 我是段落8 --> 我是段落1 我是段落2 我是段落2 我是标题 <!DOCT ...

  9. CI框架在控制器中切换读写库和读写库

    CodeIgniter框架版本:3.1.7 ,php版本:5.6.* ,mysql版本:5.6 在Ci框架中,可以在application/config/database.php中配置多个group, ...

  10. 【学习总结】C-翁恺老师-入门-第0周<程序设计与C>

    [学习总结]C-翁恺老师-入门-总 1-首先按视频说的下载编辑器 <DevC++> 并一路默认设置: 安装包下载链接 (我有vc6.0不过预感告诉我老师要用类似CS50里那种命令行编辑器? ...