CSS选择器分类

738 阅读3分钟

上一节练习题:写两个各10条数据的列表,第一个列表字体是16px,第二个列字体大小是20px。实现方法很多,但是根据现有知识写出来代码会很多,所以今天我们通过学习css选择器来简化你的代码。

简单选择器

根据标签名、id、类名来选取。id:是标签id的属性值,类名:是标签class的属性值。

元素选择器:根据标签名来选择html元素,如p、h1、div、input等等。

p{
 font-size:16px
}

id选择器:用于选择一个唯一元素,css使用的时候前边加 # ,后边跟id值。

<div id="par"></div>
#par{
 font-size:16px;
}

注意:id名称不能以数字开头。

类选择器:选择有特定class属性的html元素,使用时在前边加 . 符号,后边跟类名。

<div class="par"></div>
.par{
 font-size:16px;
}

还可以指定特定的某个元素,如:下边实例指定的是p标签上的元素。

<div class="par"></div>
<p class="par"></p>
p.par{
 font-size:16px;
}

通用选择器(*):选择页面上的所有html元素,设置的样式会影响全部元素。

组合类选择器

css有四种不同的组合器:

  • 后代选择器(空格)
  • 子选择器(>)
  • 相邻兄弟选择器(+)
  • 通用兄弟选择器(~) 实例:
<div>
 <p>内容</p>
</div>

后代选择器:div p{ font-size:16px }

子选择器:div > p{ font-size:16px }

相邻兄弟选择器:div + p{ font-size:16px }

通用兄弟选择器:div ~ p{ font-size:16px }

伪类选择器

可以设置鼠标经过,元素获取焦点,已访问过和未访问链接等设置不同样式。

  • a:hover 鼠标悬停在链接上
  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:active 已选择的链接
  • div:hover { }鼠标悬停在div元素上,也可以控制鼠标悬停元素的子元素,如:
div:hover p{ font-size:20px } 

鼠标停在div上时,子元素p中文字变为20像素。

伪元素选择器

伪元素用于设置元素指定部分的样式,如元素首行、之前、之后等插入内容。

如给div元素内的内容之后加一个对号,我们可以不用图片,直接使用伪元素,如:

div::after{
content: '\2714';
color: #fff;
}

div::before{ } 在元素之前加入内容

p::first-line 文本的首行添加样式或内容

p::first-letter 文本的首字母添加样式或内容

属性选择器

为带有特定属性 [attribute] 的html元素设置样式。

  • a[target]{ background:red } /* 设置背景为红色 */,带有target属性的a标签
  • a[href="http:baidu.com"],选带有href="http:baidu.com"的a标签
  • [title ~= 'flower' ]{ },选取title属性包含flower的所有元素
  • [class|="top"] { },选取class属性以top开头的元素,必须是完整且唯一的单词,或者以 - 分隔开。
  • [class^="top"]{ },选取class属性以top开头的元素。
  • [class$="top"]{ },选取class属性以top结尾的元素。
  • [class*="top"]{ },选取class属性包含top的元素。 css选择器很多,css3也新增了很多选择器,我们后期在讲css3的选择器。上述讲的都是一些常见选择器,自己可在w3c中查看全部。