CSS 选择器 CSS3选择器

1、CSS 选择器

1.1 、CSS基础选择器

标签选择器：所有标签名都可以当做选择器，比如body、h1、dl、ul、span等等
id选择器： 同一个页面内id不能重复（一般是JS中用ID选择器）
类选择器：任何的标签都可以携带class属性，class属性可以重复（CSS尽量用类选择器）

1.2 、CSS高级选择器

后代选择器：空格表示。选择的是后代，不一定是儿子
交集选择器：选择的元素是同时满足两个条件,一般都是以标签名开头。

        /* 选择的元素是同时满足两个条件，必须是h3标签，必须是special类 */h3.special{color:red;}

并集选择器（分组选择器）：逗号表示

        h3,li{color:red;}

通配符*：星号表示所有的元素

2、CSS3选择器

CSS3现状如下：

浏览器支持程度差，需要添加私有前缀
移动端支持优于PC端
坚持渐进增强的原则（低版本没有酷炫效果，但是也不影响正常显示浏览

CSS3选择器关系选择器
属性选择器
伪类选择器
其他选择器

2.1.、关系选择器

子代选择器 ul>li 选择ul的儿子，即所有li元素
下一个兄弟选择器（紧邻选择器）：.box+li 选择.box后面的第一个li元素，即6
兄弟选择器 .box~li 选择.box后面所有的li元素，即6、7、8、9、10

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li class="box">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
</ul>

2.2、属性选择器：通过属性来选择对应的元素

E[属性名]——选择所有的具备这个属性的E元素
E[属性名=值]——选择所有的具备这个‘属性 = 对应值’的E元素
E[属性名~=值]——选择所有的包含这个‘属性 = 对应值’的E元素

CSS3新增的：

E[属性名^=值]——从头去匹配这个‘属性 = 对应值’的E元素
E[属性名$=值]——从尾去匹配
E[属性名*=值]——从任意位置去匹配

PS:这几个匹配和对应正则表达式一样哈~

2.3. 伪类选择器

伪类以前学习过before、after、a:link

E:first-child——从父级出发找到第一个孩子为E的元素（css2）
E:last-child——从父级出发找到最后一个孩子为E的元素（css3）
E:nth-child(N)——从父级出发找到第N个孩子为E的元素（css3）N从1开始数
E:first-of-type——匹配同类型中的第一个同级兄弟元素E
last-of-type

<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>

如果我们要设置第一个li的样式，那么代码应该写成li:first-child {sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。

小案例:

<style>
.box p:first-of-type {background-color: red;}
</style>
<div class="box"><div class="one">111</div><p>222</p><p>333</p>
</div>

注意点：

even控制偶数，odd控制奇数
nth-child(5n+1):N从1开始数
有一个跟nth-child（）特别类似的一个选择器 E:nth-of-type（）匹配同类型中的第n个同级兄弟元素E.

2.4、其他选择器

input:focus{} ——选择获取焦点的表单
input:enabled{} —— 选择可操控的表单元素
input:disabled{} —— 选择不可操控的表单
input:checked{} ——选择被选中的checkbox表单
E:target{} —— 选择通过锚点跳转的当前E元素
E:empty{} ——选择没有子节点的E元素包括文本节点

CSS 选择器 CSS3选择器相关推荐

CSS和CSS3选择器
这一篇是对精通CSS:高级Web标准解决方案第二章的学习总结. 将会有以下内容: (1).常用的选择器. (2).高级选择器 (3).新的CSS3选择器最常用的选择器类型是类型选择器和后代选择器.类 ...
CSS、CSS3选择器
1.css基础选择器 (1)标签选择器: (2)类选择器: (3)id选择器: 只能调用一次(一般和js搭配使用). (4)通配符选择器: 2.复合选择器 (1)后代选择器(包含选择器): (2)子选 ...
CSS 选择器 CSS3选择器
1.CSS 选择器 1.1 .CSS基础选择器 **标签选择器:**所有标签名都可以当做选择器,比如body.h1.dl.ul.span等等 id选择器: 同一个页面内id不能重复(一般是JS中用ID ...
CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
css怎么设置表格斑马纹效果,利用CSS3选择器实现表格的斑马纹
要用到的Css3选择器 element:nth-child(number){ } 选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数 even 偶数完整demo: 测 ...
css3 选择器_CSS 3
好好学习,天天向上本章主要内容为:CSS3 新增选择器(子级.兄弟.结构伪类.伪元素.属性).CSS3盒模型.CSS3边框.文字阴影.边框阴影.过渡属性.2D转换.3D转换一.CSS3 新增选择器 ...
CSS3 选择器(转)
http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器在 CSS 中,选择器 ...

CSS 选择器 CSS3选择器

1、CSS 选择器

1.1 、CSS基础选择器

1.2 、CSS高级选择器

2、CSS3选择器

2.1.、关系选择器

2.2、属性选择器：通过属性来选择对应的元素

2.3. 伪类选择器

2.4、其他选择器

CSS 选择器 CSS3选择器相关推荐

最新文章

热门文章

CSS 选择器 CSS3选择器

1、CSS 选择器

1.1 、CSS基础选择器

1.2 、CSS高级选择器

2、CSS3选择器

2.1.、关系选择器

2.2、 属性选择器：通过属性来选择对应的元素

2.3. 伪类选择器

2.4、其他选择器

CSS 选择器 CSS3选择器相关推荐

最新文章

热门文章

2.2、属性选择器：通过属性来选择对应的元素