10.6、css伪类、伪元素

伪类用于向某些选择器添加特殊效果;伪元素用于将特殊的效果添加达到某选择器。

区别:伪类的效果可通过添加一个实际的类达到,用:;伪元素效果则需要添加一个实际的元素,用::

伪元素的权重比伪类高

伪类:

  p>i{color:red;}   <p><i>老大</i><i>老二</i></p>

  p>i:first-child{color:red;}   <p><i>老大</i><i>老二</i></p>

  .first-child{color:red;}   <p><i class='first-child'>老大</i><i>老二</i></p>

伪元素:

            p:first-letter{color:red;}   <p>老大</p>

           .first-letter{color:red;}   <p><span class="first-letter">老</span>大</p>

常用的伪类:

10.6-1 a:hover,a:link,a:active,a:visited,:focus/*动态伪类*/

<input type="text" value='你好'/>

 input:focus{color:red} <input type="text" value='你好' />

10.6-2 :disabled禁用   :enabled 没有被禁用   :checked被选中  :read-only 只读  :read-write/*UI状态*/

button:disabled{color:red}
<button type="button" disabled="disabled">点击</button>
<button type="button" >点击</button>

input:read-write{color:red}  <input type="text" value='你好' /> 

 input:focus{color:red} <input type="text"  readonly="readonly" value='你好'/>

input:checked+label{color:red;}
<input type="checkbox" name='man' id="man" checked="checked"/><label for="man">老大</label>
<input type="checkbox" name="man" id="woman"/><label for="woman">老二</label>

10.6-3 伪类

p:nth-child(2)其父元素的第n个元素//找到父元素的第二个子元素,并且是P元素

:nth-last-child(n)其父元素的倒数第n个元素

:nth-of-type(2)(如:p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色)

:first-child 其父元素的第一个元素

:last-child 其父元素的最后一个元素

:nth-last-of-type(n) (如:p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色)

:first-of-type 其父元素的第一个p元素

:last-of-type 其父元素的第一个p元素

10.6-4 伪元素 :before :after  ::first-line   ::first-letter    ::selection

我是唐老鸭。<p>我是唐老鸭。</p>

p::before{content:'台词:'}<p>我是唐老鸭。</p>

P::first-letter{color:red;}<p>我是个鸭子</p>

P::first-line{color:red;} <p>我是个鸭子<br />我是个鸭子</p>

::selection{color:red;background:green;}   <p>我是个鸭子我是个鸭子</p>

11、权重 important>行内>内嵌>class>标签>继承>*通配符

12、文字阴影 text-shadow:水平位移,垂直位移,模糊半径,颜色

13、文本

word-wrap:break-word; 断单词

word-wrap:break-allk;断字符

超出省略:
width:200px;
white-space:nowrap;强制在一行显示所有文本
text-overflow:ellipsis;溢出显示省略标记
overflow:hidden;

css内容整理2的更多相关文章

  1. css内容整理1

    1.css引入的四种方式1.行内2.内嵌3.链接 <link href="1.css" rel="stylesheet">4.导入@import u ...

  2. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  3. css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  4. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  5. 【数学】NOIP数论内容整理

    NOIP数论内容整理 注:特别感谢sdsy的zxy神仙以及lcez的tsr筮安帮助审稿 一.整除: 对于\(a,b~\in~Z\),若\(\exists~k~\in~Z\),\(s.t.~b~=~k~ ...

  6. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  7. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  8. css命名整理

    .container { width: 720px; background: #fafafa; border: 2px dashed #999; padding: 10px; float: left ...

  9. CSS 知识点整理

    本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...

随机推荐

  1. epoll简介

    1.epoll简介 epoll是I/O事件通知工具,与select/poll相比,epoll最大的好处在于它不会随着监听fd数目的增长而效率降低.epoll API既可以用作edge触发的接口,也可以 ...

  2. 「BZOJ 3270」博物馆「高斯消元」

    应该算高斯消元经典题了吧. 题意:一个无向连通图,有两个人分别在\(s,t\),若一个人在\(u\),每一分钟有\(p[u]\)的概率不动,否则随机前往一个相邻的结点,求在每个点相遇的概率 题解: 首 ...

  3. Oracle基本函数即字段拆分

    --创建用户 CREATE USER jim IDENTIFIED BY changeit; --给用户赋登陆连接权限 GRANT CONNECT TO jim; --给用户赋资源权限 GRANT R ...

  4. 快速找出故障机器(single number)

    简单起见,假设每个机器存储一个标号为ID的记录(ID是小于十亿的整数),假设每份数据都保存两个备份,这样就有两个机器储存了同样的数据. 1.在某个时间,如果得到一个数据文件ID的列表,是否能够快速地找 ...

  5. PHPExcel类库的使用

    首先下载PHPEXCEL 下载地址:https://github.com/PHPOffice/PHPExcel 一.生成Excel <?php require "PHPExcel-1. ...

  6. 安装gitlab-runner

    # 下载 $sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/lat ...

  7. SprimgMVC学习笔记(六)—— 全局异常的处理

    一.处理思路 springmvc在处理请求过程中出现异常信息交由异常处理器进行处理,自定义异常处理器可以实现一个系统的异常处理逻辑. 系统中异常包括两类:预期异常和运行时异常RuntimeExcept ...

  8. [USACO18JAN]Cow at Large G(树形DP)

    P4186 [USACO18JAN]Cow at Large G(树形DP) Luogu4186 设dp[i]表示i点需要放多少个农民.则有 \(if(near[i]-dep[i]<=dep[i ...

  9. Java缓存类loadingCache

    <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artif ...

  10. log4net独立配置文件配置(winfrom)

    log4net配置很多,具体配置步骤不细说,具体说出个人遇到的问题. 在winfrom和web应用程序中配置,在默认配置文件配置都没问题,因为EF也写在默认配置文件中,就会冲突解决办法就是将log4. ...