kano个人博客css教程之css3选择器的基础运用

kano个人技术博客 web前端开发 1,379 次浏览 没有评论

css全名Cascading Style Sheets层叠样式表),用于修饰网页,在1994年由哈坤·利提和伯特·波斯共同设计,本文是一篇前端技术开发css3教程,主要介绍css3选择器Kano的这篇教程比较基础,希望可以对刚刚入门同学的css布局起到一定的帮助。

css3选择器基础教程

※ 对于一些单纯用描述不太容易理解的样式,加了解释配图

css3常用的选择器有哪些?Kano个人博客认为可以分为以下几类:

1. html选择器

html标签,如div, span, h1

2. class选择器

选择的是自己为html元素起的class,如 .aa 会选择到 <div class=”aa”>啊啊啊</div>。

3. id选择器

类似类选择器,选择的是自己为html 元素起的id,如 #bag 会选择到 <div id=”bag”>啊啊啊</div>,和class选择器不同的是,id在页面中具有唯一性,一个id只能给一个标签。

4. css3属性选择器

根据html元素的属性选择元素,具体可以分为三种:

{

h1[class]  // 简单属性选择器,h1中如果有class属性则被选中

h1[class=”one”]  // 具体属性选择器,h1中class属性为one时被选择

部分属性选择器:

{

[class~="one"]  // 会选中 class=”zero one two”,即属性中拥有这个单词,但注意 alt=”zeroonetwo” 不会被选中,单词必须是独立存在的

[class*="one"]  // 会选中 class=”zeroonetwo” 这个选择器只要在属性值中查到到这个字符串即可选中

[class^="one"]  // 会选中以one开头的元素,如class=”onetwo”

[class$="one"]  // 会选中以one结尾的元素,如class=”zeroone”

[class|="one"]  // 会选中完全匹配one单词,或者以one-开头的元素,是一个略微特殊的选择器,如class=”one”或class=”one-two”

如果是学过正则的小伙伴,那解释起来则可以用更简单的方法:

[alt~="one"]  // 匹配 \bone\b

[alt*="one"]  // 匹配 one

[alt^="one"]  // 匹配 ^one

[alt$="one"]  // 匹配 one$

[alt|="one"]  // 匹配 ^one$|^one-

}

}

5. 分组选择器

实际上就是多个选择器在样式相同的时候的简便写法,如 h1, h2 ,h3 {…}

6. css3后代选择器(关联选择器)

选择符合“祖先 – 后代关系的元素”,如:h1 .one span {…}

7. css3子元素选择器 >

只选择子元素而不是更后代的元素,比起后代选择器是更为具体的选择,如 h1 > .one

可以选择到:

<h1>
  <span class="one"></span>
</h1>

而无法选择到:

<h1>
  <a href="http://www.baidu.com/">
    <span class="one"></span>
  </a>
</h1>

8. css3相邻选择器 +

选择紧接在某个元素后的元素,而且两者有相同的父级元素

.one + p (元素p被选中)

<div class="one">
</div>
<p>啊啊啊</p>

a + a 注意这里后3a都会被选中,因为都满足a元素后面的a元素这么一个条件

<a href="">111</a>
<a href="">111</a>
<a href="">111</a>
<a href="">111</a>

9. css3伪类选择器

伪类选择器是选择某种状态下的元素,以“元素名:伪类名”的形式出现,具体有以下几种

a标签的访问伪类(只有a标签才有):

{

a:link  未访问的链接

a:visited  访问过的链接

}

可以获得焦点的元素(如input元素)的的获得焦点伪类:

input:focus

通用伪类:

{

:hover  鼠标悬停时

:active  鼠标点击时

:first-child  第一个子元素,这个稍微有点让人迷惑,如p:first-child的意思并不是p元素的第一个子元素,而是第一个条件是元素是p,第二个条件是元素是其父元素的第一个子元素

:last-child 最后一个子元素

:root  选择根元素,主要用于xml文档的样式,html文档的话一般还是直接用html元素就好

:not(<selector>)  非某个选择器,比如 #a1 :not(.blue) 代表#a1元素下所有类为blue的所有后代元素。要注意的一点是,<selector>只能写普通的单个选择器,更具体的说,只能是 html选择器 类选择器和 id选择器这3种,即使结合使用也是无效的,比如 :not(div.left) 将选择不到任何元素

:empty  选择空元素,要注意是完全为空的元素,即使元素中只有空白元素也不算是空元素。另外在开始标签中就闭合的元素也算是空元素

:target  定义活动的锚点的样式(当跳转到锚点的时候,锚点的样式)

:nth-child(<index>/even/odd/equation)  用来选择某个位置的元素,很灵活。<index>是正整数(索引从1开始),even选择的是偶数元素,odd选择奇数元素,odd和even便是css3奇数选择器和css3偶数选择器,也称作奇偶选择器,equation是 an ± b 这种的表达式,n为从0开始的整数。

来看一下例子,首先有这样一些元素:

<div>
  <span>1.哈哈</span>
  <span>2.哈哈</span>
  <span>3.哈哈</span>
  <span>4.哈哈</span>
  <span>5.哈哈</span>
  <span>6.哈哈</span>
  <span>7.哈哈</span>
</div>
span 
{
  display: inline-block;
  margin-left: 5px;
  padding: 5px;
  background: #ddd;
}

奇偶选择器

选择第2个元素:

span:nth-child(2) {
  background: red;
}

奇偶选择器

选择偶数元素:

span:nth-child(even) {
  background: red;
}

偶数元素

选择奇数元素:

span:nth-child(odd) {
  background: red;
}

奇数元素

从第1个元素开始,隔两个元素选择一个元素:

span:nth-child(3n+1) {
  background: red;
}

奇偶选择器

:nth-last-child(<index>/even/odd/equation)  和:nth-child的区别在于从最后一个元素开始数(在元素的个数是不确定的时候很有用)

:nth-of-type(<index>/even/odd/equation)  用来选择某一类元素中某个位置的元素,:nth-child的索引实际上是不为元素分类的,比如:

<div>
  <span>1.哈哈</span>
  <span>2.哈哈</span>
  <i>3.哈哈</i>
  <span>4.哈哈</span>
  <span>5.哈哈</span>
  <i>6.哈哈</i>
  <span>7.哈哈</span>
</div>
span:nth-child(3) {
  background: red;
}

奇偶选择器

我们想选择5个span元素中的第三个,:nt-child实际上是做不到的,span:nth-child(3)实际上要满足两个条件,第一:元素是span,第二:元素在其父元素中的索引是3,这两个条件的交集(这有些迷惑人,你可能需要花上几分钟去理解);而:nth-of-type可以做到从第一个条件筛选出的元素中再进行第二次筛选:

span:nth-of-type(3) {
  background: red;
}

css3选择器

:nth-last-of-type(<index>/even/odd/equation)  和:nth-of-type的区别在于从最后一个元素开始数

:only-child  当元素是唯一的子元素的时候匹配,匿名文本元素并不算在内

:nth-child  :nth-last-child  :nth-of-type  :nth-last-of-type  :only-child  统称为结构选择器

}

伪类还可以结合使用,如:

{

a:link:hover  鼠标悬浮在未访问的链接上时

a:visited:hover  鼠标悬浮在已访问的链接上时

}

css3中为单独为表单增加了一些伪类选择器,这里就单拿出来了:

{

:enabled  有效表单(默认)

:disabled  无效表单

:read-only  只读表单

:read-write  可读写表单(默认)

:checked  radio, checkbox标签选中时

:default  在页面打开时就处于选中状态的radio和checkbox,即使用户把选中取消掉,样式还是会在

:indeterminate  一组单选框打开的时候没有任何一个单选框处于选中状态(也就是indeterminate:不确定的),该组单选框将被选中,当有其中一个单选框被选择,则样式消失

这里有的选择还没有或者很晚才得到了浏览器的支持,使用时请查一下手册

}

10. 伪元素选择器

选择的并不是真的元素,直接描述其实并不容易理解,直接介绍了:

{

::first-letter  选择首字母

<div class="a">
  aaaaa
</div>
a:first-letter 
{
  background: red;
}

首字母被选择 首字母被选择

::first-line  选择首行(调整元素宽度你会发现只有元素内第一行应用了样式,即使原来第一行的内容跑到了第二行)

<div class="a">
  啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
.a {
  width: 100px;
}

.a:first-line {
  background: red;
}

首行被选中首行被选中

.a {
  width: 200px;
}

.a:first-line {
  background: red;
}

调整元素宽度

依然是首行被选中依然是首行被选中

::befor和::after  用于在元素前或元素后插入一些内容,并为内容指定样式

<span class="sheep">羊</span>
.sheep::before {
  content: '绵';
  color: red;
}

.sheep::after {
  content: '咩咩咩咩咩咩';
}

css3选择器

::selection  选择被选中的文本(也就是平时操作的“拉蓝”部分),用它的时候要注意一下浏览器支持性

<span class="a">哈哈哈哈哈哈哈哈哈</span>
.a::selection {
  background: #ddd;
  color: red;
}

css3选择器

(中间的红字是用鼠标选中的部分)

}

css对伪元素选择器做出了一些限制,:first-line选择器只能用于块级元素,:first-letter和:first-line选择器并不能使用所有的css属性,而且所有伪元素选择器只能放在选择器的最后面,比如 p:first-line em 是不合法的(但是伪类选择器不要求必须放在选择器最后)

※ 实际用“:first-letter”这种单冒号也可以选择伪元素,这是css2中的写法,css3为了区分伪类和伪元素,所以kano个人技术博客建议还是用“::”比较好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go