CSS选择器分类
上一节练习题:写两个各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中查看全部。