美文网首页Web前端之路
CSS选择器(一)

CSS选择器(一)

作者: 前端梵风 | 来源:发表于2017-08-08 11:15 被阅读6次

css选择器是区分大小写的,因为要准确的匹配元素名称和属性值。

下面我们来讲一下css选择器:

一,通用选择器

1.*{   }

2.应用于文档的所有元素。

二,类型选择器

1.比如:  h1{   }

2.匹配元素的名称元选择器相同的元素(也称元素选择器)。

三,类选择器

1.比如:  .text{    }

2.匹配class属性的值为.text的元素。

3.或者也可以这样:   p.text{    }

4.匹配class属性的值为.text的p元素。

四,ID选择器

1.如:   #text{     }

2.匹配ID为text的元素。

五,子选择器

1.如:    li>a  {   }

2.匹配<li>元素下的直接子元素<a>

3.注意,其他的<a>元素不起作用。

六,后代选择器

1.如:    p   a   {     }

2.匹配所有位于<p>元素下的<a>元素。

七,相邻兄弟选择器

1.如:     h1+p    {    }

2.匹配<h1>元素下的第一个<p>元素(对其他的<p>元素不起作用)

3.

八,普通兄弟选择器

1.如:    h1~p  {    }

2.匹配<h1>下的兄弟元素<p>。

OK,css选择器的种类已经讲完。

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

    本文标题:CSS选择器(一)

    本文链接:https://www.haomeiwen.com/subject/ecttrxtx.html