css选择器整理

1.元素选择器(类型选择器)

html {color:black;}

2.选择器分组

h2, p {color:gray;}

3.CSS 类选择器

.important {color:red;}

4. ID 选择器

#intro {font-weight:bold;}

5.属性选择器

简单属性选择

img[CBD] //有CBD属性的img元素
a[href][title] //同时有 href 和 title 属性

具体属性选择

a[href="http://www.w3school.com.cn/about_us.asp"]

部分属性值选择

p[class~="important"] {color: red;} //包含class为important的元素

子串匹配属性选择器

[abc^="def"] //选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] //选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] //选择 abc 属性值中包含子串 "def" 的所有元素

特定属性选择类型

*[lang|="en"]

6.后代选择器

h1 em {color:red;}
a#b .cls { width: 100px;}

<a id=b>
   <span>1<span>
   <span class=cls>2<span>
</a>
<span class=cls>3<span>

7.CSS 子元素选择器

h1 > strong {color:red;}

8.CSS 相邻兄弟选择器

h1 + p {margin-top:50px;}

9.CSS 伪类

a:hover {color: #FF00FF}

10.CSS 伪元素

h1:before { content:url(logo.gif); }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1: 选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身 2:元素选择器又称...
    忆往昔Code阅读 1,016评论 0 0
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 888评论 0 1
  • class 和 id 的使用场景? 在CSS文件里书写时,ID加前缀"#";CLASS用"." id一个页面只可以...
    阿鲁提尔阅读 439评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,820评论 1 45
  • CSS基础 CSS作用 专门用来修改样式 CSS格式 注意点 style标签必须写在head标签的开始标签和结束标...
    七分之二十四阅读 444评论 1 0