前端学习笔记(7)css选择器(一)-阿里云开发者社区

开发者社区> 开发与运维> 正文

前端学习笔记(7)css选择器(一)

简介: 选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。

选择器分类

  • 简单选择器:针对某一特征判断是否选中元素。
  • 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。
  • 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
  • 选择器类别:用逗号分隔的复杂选择器,表示“或”。

简单选择器

简单选择器分类:

  • 类型选择器
  • 全体选择器
  • id选择器
  • class选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

类型选择器

根据标签名来选中元素。

div{
}

全体选择器

“*”可以选中任意元素。

*{
}

id选择器

“#”后面跟id名。

#myid{
}

class选择器

“.”后面跟class名 c 一个元素可以拥有多个类。下例中“.a” “.b” “ .c”都可以选中div标签。

 <div class="a b c"></div>
.a{
}

属性选择器

  • 第一种,[att]: 选中带有att属性的元素
<input type="text"/>
[type]{
}
  • 第二种,[att=val]: 选中att属性值为val的元素
<input type="text"/>
[type=text]{
}
  • 第三种,[att~=val]: 选中属性att的值中包含指定词汇的元素
<img src="" title="img1 img2" />
[type~=img1]{
}
  • 第四种,[att|=val]: 选中属性att值以val开头的元素,val必须为整个单词
<p lang="en-us">Hello World!</p>
[type|=en]{
}
  • 第五种,[att^=val]: 选中属性att值以val开头的元素
<input type="text"/>
[type^=te]{
}
  • 第六种,[att$=val]: 选中属性att值以val结束的元素
<input type="text"/>
[type^=xt]{
}
  • 第七种,[att*=val]: 选中属性att值包含val的元素
<input type="text"/>
[type*=ex]{
}

属性选择器中val可能包含特殊字符,所以可以使用单双引号包裹起来规避特殊字符,也可以使用反斜杠转义。

伪类选择器

伪类选择器是一系列由 CSS 规定好的选择器,它们以冒号开头。伪类选择器有普通型和函数型两种。

树结构关系伪类选择器

  • :root表示树的根元素,html文档中根元素为html标签。
  • :empty表示没有子节点的元素,拥有空白文本也不能被选中。
  • :nth-child和:nth-last-child,nth-child规则如下。nth-last-child为从后向前。
  • :first-child和:last-child分别表示第一个和最后一个元素。
  • :only-child表示唯一子元素
  • S:nth-of-type和S:nth-last-of-type表示只从S只选中。(of-type系列同理)
<div>
  <p>1</p>
  <a>2</a>
  <p>3</p>
  <p>4</p>
</div>
div p:nth-child(1){
//选中 1
}
div p:nth-child(2){
// 没有选中
}
div p:nth-of-type(2){
// 选中3
}
  • :first-of-type和:last-of-type
<div>
  <p>1</p>
  <a>2</a>
  <p>3</p>
  <p>4</p>
</div>
div p:first-child{
//选中1
}
div a:first-child{
//没有选中
}
div a:first-of-type{
//选中2
}
  • :only-of-type
<div>
  <p>1</p>
  <a>2</a>
</div>
div p:only-child{
//没有选中
}
div p:only-of-type{
//选中p
}

链接与行为伪类选择器

  • :any-link 表示任意的链接,包括 a、area 和 link 标签都可能匹配到这个伪类。
  • :link 表示未访问过的链接, :visited 表示已经访问过的链接。
  • :hover 表示鼠标悬停在上的元素。
  • :active 表示用户正在激活这个元素,如用户按下按钮,鼠标还未抬起时,这个按钮就处于激活状态。
  • :focus 表示焦点落在这个元素之上。
  • :target 用于选中浏览器 URL 的 hash 部分所指示的元素。

逻辑伪类选择器

:not目前只支持简单选择器

<div>
  <p class="p1">1</p>
  <p>2</p>
</div>
div p:not(.p1){
//选中2
}

伪元素选择器

伪元素选择器选中的是不存在的元素。常用的伪元素选择器有以下几种。

  • first-line 选用元素的第一行
  • first-letter 选中元素的第一个字母
  • before
  • after

first-line 必须出现在最内层的块级元素之内。所以下例代码中第一行为蓝色。

<div>
  <p id=a>First paragraph</p>
  <p>Second paragraph</p>
</div>

div>p#a {
    color:green;
}

div::first-line { 
    color:blue; 
}

span标签为行级元素,所以伪元素在span之外,第一行为绿色。

<div>
  <span id=a>First paragraph</span>
  <span>Second paragraph</span>
</div>

div>span#a {
    color:green;
}

div::first-line { 
    color:blue; 
}

::first-letter 的行为又有所不同,它的位置在所有标签之内。我们把前面的代码换成::first-letter,首字母为蓝色。

<div>
  <span id=a>First paragraph</span>
  <span>Second paragraph</span>
</div>

div>span#a {
    color:green;
}

div::first-letter { 
    color:blue; 
}

::before 表示在元素内容之前插入一个虚拟的元素,::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效,我们看下例子:

<p class="hi">hellow world!</p>
p.hi::before {
    display: block;
    content: "hi! ";
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章