元素（类似工具提示的效果）

 h1 {

   display: none;

   background-color: green;

   padding: 25px;

 }

 ​

 div:hover h1 {

   display: block;

 }

2、结构性伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的结构性伪类

  :first-child 选择某个元素的第一个子元素；

  :last-child 选择某个元素的最后一个子元素；

  :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；

  :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；

  :nth-of-type() 规定属于其父元素的第n个 指定 元素；

  :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素；

  :first-of-type 选择一个上级元素下的第一个同类子元素；

  :last-of-type 选择一个上级元素的最后一个同类子元素；

  :only-child 选择它的父元素的唯一一个子元素；

  :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

  :checked匹配被选中的input元素，这个input元素包括radio和checkbox。

  :empty 选择的元素里面没有任何内容。

  :disabled匹配禁用的表单元素。

  :enabled匹配没有设置disabled属性的表单元素。

  :valid匹配条件验证正确的表单元素。

  :in-range选择具有指定范围内的值的 元素。

  :optional选择不带 "required" 属性的 元素。

  :focus选择获得焦点的 元素。

伪类和CSS

实例

1.选择器匹配p元素的第一个子元素：

 p:first-child {

  color: red;

 }

 

你好

 

好啊

2.匹配所有

元素中的首个 元素:

 p i:first-child {

   color: blue;

 }

 ​

 

我是一个强壮的男人。我是一个强壮的男人。

 

我是一个强壮的男人。我是一个强壮的男人。

3.段落2变成蓝色

语法解释：p:nth-child(3),P标签的父元素是body，body的第3个子元素是“段落2。”所以段落2”，颜色变成了蓝色

 p:nth-child(3)

 {

 background:blue;

 }

 ​

 

 

今天学习伪类和伪元素

段落1

段落2

段落3

在上一个代码中，如果p:nth-child(3)改为属p:nth-of-type(3) ，则意思为规定其父元素的第3个 p 元素，那么变蓝色的是段落3

4.lang="en" 的 q 元素定义~：

q:lang(en) {

quotes: "~" "~";

}

Some text A quote in a paragraph Some text.

5.选择获得焦点的 元素(点击输入框，背景颜色变为黄色）:

input:focus {

background-color: yellow;

}

First name:

Last name:

四、伪元素

所有的伪元素

选择器例子例子描述::afterp::after在每个

元素之后插入内容。::beforep::before在每个

元素之前插入内容。::first-letterp::first-letter选择每个

元素的首字母。::first-linep::first-line选择每个

元素的首行。::selectionp::selection选择用户选择的元素部分。

注意：

CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。

为所有

元素中的首行添加样式：

p::first-line {

color: #ff0000;

font-size:16px;

}

在这里对于::first-line,我们需要注意，::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

设置所有

元素中文本的首字母格式：

p::first-letter {

color: red;

font-size: 16px;

}

在这里对于::first-letter ,我们需要注意，::first-letter 伪元素只能应用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性 颜色属性 背景属性 外边距属性 内边距属性 边框属性 text-decoration vertical-align（仅当 "float" 为 "none"） text-transform line-height float clear

::before和::after比较

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）

默认值：normal继承：no版本：CSS2JavaScript 语法：object.style.content="url(beep.wav)"

contnt属性的类别

none设置 content 为空值。normal在 :before 和 :after 伪类元素中会被视为 none，即也是空值。counter设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）attr(attribute)将元素的 attribute 属性以字符串形式返回。string设置文本内容open-quote设置前引号close-quote设置后引号no-open-quote移除内容的开始引号no-close-quote移除内容的闭合引号url(url)设置某种媒体（图像，声音，视频等内容）的链接地址inherit指定的 content 属性的值，应该从父元素继承

在每个

元素的内容之前插入一幅图：

h1::before {

content: url();

}

在每个

元素的内容之后插入一幅图像：

h1::after {

content: url();

}

使所选文本在蓝色背景上显示为红色：

::selection {

color: red;

background:blue;

}

可以应用于 ::selection：的属性

color background cursor outline

伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 class="name" 的段落的首字母。)

p.name::first-letter {

color: hotpink;

font-size: 200%;

}

你好漂亮！

精彩内容

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：