美文网首页
CSS选择器

CSS选择器

作者: 陈智涛 | 来源:发表于2016-12-01 17:42 被阅读0次

1、基础选择器

  • 通用元素选择器
    格式:*{
    }
    可以匹配页面任何元素
*{
  font-size:12px;
  background: #000;
}
  • id选择器
    匹配html中特定id的元素,并且id唯一
#head1{
  color:red;
}
  • 类选择器
    匹配class类包含的一类特定元素
.head1{
  color:red;
}
  • 标签选择器
    匹配某一种标签,不建议使用
span{
  color:red;
 font-size:12px;
}

2、组合选择器

  • 多元素选择器
    格式:E,F
    用,分隔,同时匹配元素E或元素F
h1,span{
  color:red;
 font-size:12px;
}
  • 后代选择器
    格式:E F
    后代选择器是匹配该E元素下的所有后代F元素,不只是子元素,子元素向下递归。

    2016-12-01 4 02 372016-12-01 4 02 37
  • 子元素选择器
    格式:E>F
    子元素选择器是匹配E元素下的所有直接后代F元素。

    2016-12-01 4 10 122016-12-01 4 10 12
  • 直接相邻选择器

格式:E+F
匹配E元素之后的相邻的同级元素F

2016-12-01 4 38 212016-12-01 4 38 21
  • 普通相邻选择器

格式:E~F
匹配E元素后的所有同级相邻元素F

2016-12-01 4 41 002016-12-01 4 41 00

3、属性选择器


2016-12-01 4 42 272016-12-01 4 42 27

属性选择器可以根据元素的属性及属性值来选择元素


2016-12-01 4 49 302016-12-01 4 49 30

4、伪类选择器
格式:selector : pseudo-class {property: value}
参考:http://www.w3school.com.cn/css/css_pseudo_classes.asp

2016-12-01 4 51 002016-12-01 4 51 00
2016-12-01 4 53 232016-12-01 4 53 23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;color:red;}
li:first-child {text-transform:uppercase;}
</style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
</div>

</body>

</html>

2016-12-01 5 01 192016-12-01 5 01 19

5、伪元素选择器
格式:selector:pseudo-element {property:value;}
CSS 伪元素用于向某些选择器设置特殊效果

2016-12-01 5 06 392016-12-01 5 06 39

相关文章

  • 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 选择器

    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-选择器1-概述

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

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

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

  • CSS

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

网友评论

      本文标题:CSS选择器

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