本博文介绍CSS中的基础选择器和复合选择器。
基础选择器包括标签选择器、类选择器、id选择器和通配符选择器,复合选择器包括后代选择器、子选择器、并集选择器和伪类选择器。
1 基础选择器
基础选择器由单个选择器组成,包括:标签选择器、类选择器、id选择器和通配符选择器。
1.1 标签选择器
标签选择器通过单个元素标签(如p、div、h1)选择对应的元素,使用标签选择器会选择到所有的对应标签。
使用格式:
标签名{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例:
div{ height: 100px; width: 100px; }
实例作用:将所有的 div 元素的高(height)和宽(width)设置为100px
1.2 类选择器
类选择器通过元素的类名(class)对元素进行选择,可以选择到一个或者多个元素标签,该选择器在开发中最常用。
使用格式:
.类名{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例:
.red-box{ color: red; }
实例作用:将类名为"red-box"的元素中的字体颜色(color)设置为红色(red)
1.3 id选择器
id 选择器通过元素的 id 对元素进行选择,该选择器只能选择到一个元素标签(因为元素的 id 是唯一的),id 选择器经常和 js 搭配使用。
使用格式:
#id值{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例:
#content_left{ text-align: left; }
实例作用:将 id 为"content_left"的元素中的文字内容设置左对齐(text-align: left;)
1.4 通配符选择器
通配符选择器可以选择页面中的所有元素,在去除掉页面中的默认样式时有很好的作用。
使用格式:
*{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例:
*{ margin: 0; padding: 0; }
实例作用:将页面中所有元素的外边距(margin)和内边距(padding)都设置为0(此实例使用频率很高)
2 复合选择器
复合选择器由多个基础选择器组成,常用的包括:后代选择器、子选择器、并集选择器和伪类选择器。
2.1 后代选择器
后代选择器可以选择某个元素的所有后代元素(包括儿子元素、孙子元素等)。
使用格式:
元素1 元素2 元素3{ 样式 }
注意:
(1)元素和元素之间用空格隔开;
(2)元素1、元素2、元素3...为基础选择器(标签选择器、类选择器、id选择器等)。
使用实例:
div p{ color: red; }
实例作用:将所有 div 元素的所有子元素 p 中的字体颜色(color)设置为红色(red)
2.2 子选择器
子选择器可以选择某个元素的最近一级子元素(只包括儿子元素,不包括孙子元素等)。
使用格式:
元素1 > 元素2{ 样式 }
注意:
(1)元素和元素之间用 > 隔开;
(2)元素1、元素2...为基础选择器(标签选择器、类选择器、id选择器等)。
使用实例:
div > p{ color: red; }
实例作用:将所有 div 元素的所有儿子元素 p 中的字体颜色(color)设置为红色(red)
2.3 并集选择器
并集选择器可以选择多组元素并设置相同的样式。
使用格式:
元素1, 元素2{ 样式 }
注意:
(1)元素和元素之间用 , 隔开;
(2)元素1、元素2...为基础选择器(标签选择器、类选择器、id选择器等)。
使用实例:
.left-box, .right-box{ color: red; }
实例作用:将所有类名为"left-box"和"right-box"的元素中的字体颜色(color)设置为红色(red)
2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,这里介绍链接伪类选择器和 focus伪类选择器。
使用格式:在选择器后用冒号表示,如 :hover、:active等。
- 链接伪类选择器
链接伪类选择器通过将元素选择器(a 元素)和伪类选择器复合,起到不同的效果,具体可以分为以下四种。
链接伪类选择器 | 选择元素 |
a:link | 选择到所有未被访问的 a 元素 |
a:visited | 选择到所有已被访问的 a 元素 |
a:hover | 选择到鼠标指针位于其上的 a 元素 |
a:active | 选择活动链接(鼠标按下未弹起的 a 元素) |
注意:为了确保链接伪类选择器生效,需按照link、visited、hover、active的顺序来写。
使用实例:
a:hover{ color: red; }
实例作用:当鼠标移到 a 元素上时,链接的文字颜色(color)变为红色(red)
- focus伪类选择器(:focus)
focus伪类选择器可以选取获得焦点(光标)的表单元素。
使用格式:
input:focus{ 样式 }
使用实例:
input:focus{ background-color: skyblue; }
实例作用:当光标聚焦在 input 元素上时,input 元素的背景颜色(background-color)变为天蓝色(skyblue)
标签:伪类,color,元素,复合,实例,red,选择器,CSS From: https://www.cnblogs.com/detailNew/p/17269109.html