CSS选择器几种用法-详解

目录

 

CSS选择器类型

一，基本选择器

1.ID选择器

2.标签选择器

3.类选择器

4.通用选择器

二，包含选择器

三，属性选择器

四，伪类选择器

:checked

:first-child

:last-child

:nth-child(n)

案例：实现表格隔行变色效果。

五，伪元素选择器

六，常见样式

基本语法

---

CSS选择器类型

在 CSS 中，对于元素的修饰是通过选择器来获取到的，它有很多选择器。

• 基本选择器

• 包含选择器

• 属性选择器

• 伪类选择器

一，基本选择器

基本选择器使用的频率是最高的，它分为以下几种：

• ID选择器

• 标签选择器

• 类选择器

• 通用选择器

1.ID选择器

    
    
    


id="div1">这是第一个块元素
这是第二个块元素

ID 选择器的优先级是最高的，因为页面中的 ID 不能重复，即是唯一的。

2.标签选择器

    
    
    


<div id="div1">这是第一个块元素

这是第二个块元素

这个span元素

3.类选择器

    
    
    


这是第一个块元素
class="container">这是第二个块元素
这个span元素

注意：

1. 使用类样式是通过 class 属性来指定的

2. 在编写样式时，需要前面有个小圆点

4.通用选择器

    
    
    


这是第一个块元素
这是第二个块元素
这个span元素

通用选择器是使用 * 号来表示匹配所有的页面元素。padding 表示内边距，margin 表示外边距。

id，标签选择器的优先性大于类，和通用选择器

二，包含选择器

包含选择器又分为以下几种：

• 子选择器：只能获取某个标签的第一级子元素 >

• 后代选择器：能够获取某个标签的所有子元素 空格

• 分组选择器：使用逗号选择器，还叫并列选择器。它可以设置多个标签 逗号

    
    
    


这是一个 div 块元素
这是一个段落标签
这也是一个 div 块元素
这是标题


    

        
这是一个列表1
        
这是一个列表2
        
这是一个列表3
        
这是一个列表4
        
这是一个列表5
        
这是一个列表6
        
这是一个列表7
        
这是一个列表8
        
这是一个列表9
        
这是一个列表10
    
    
这是一个列表8
    
这是一个列表9
    
这是一个列表10

三，属性选择器

        由于在 HTML 中标签的属性是很重要的元素，所以 CSS 中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号（[]）。

    
    
    


这是一个容器
第一个段落
第二个段落
这是第二个容器




这是个人信息
第三个段落

属性选择器说明：

1. 要使用属性选择器，必须合适中括号

2. 可以直接使用属性，也可以使用属性名="属性值" 的方式

3. 还可以使用包含（*）、以什么开头（^）、以什么结尾（$）的方式来获取

4. 加号表示某个元素之后紧跟着的第一个元素

四，伪类选择器

同一个标签，在不同的状态下，它就具有不同的样式，这就叫伪类样式。伪类选择器使用冒号来表示。

常见的状态主要有以下几种：

1）:link 超链接点击之前

2）:visited 超链接点击之后

3）:hover 鼠标悬停在某个标签上时

4）:active 鼠标点击某个标签时，但没有松开

5）:focus 某个标签获取焦点时的状

    
    
    


百度
淘宝

在 CSS 中伪类选择器有很多。

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2|2n-1|odd|even)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
::first-letter	p::first-letter	选择每个p 元素的第一个字母
::first-line	p::first-line	选择每个p元素的第一行
::first-child	p::first-child	选择器匹配属于任意元素的第一个子元素的 元素
::before	p::before	在每个p元素之前插入内容
::after	p::after	在每个p元素之后插入内容
::section	p::section	被鼠标选中后的样式
:lang(language)	p:lang(it)	为p元素的lang属性选择一个开始值

:checked

这个伪类选择器，是用于获取所有选中的元素。

      
    
    


 男  女

 看书
 游戏

:first-child

选择器匹配属于任意元素的第一个子元素的 元素

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6

:last-child

选择所有指定元素的最后一个子元素

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6

:nth-child(n)

选择所有 p 元素的父元素的第二个子元素

    
    
    



    
1
    
2
    
3
    
4
    
5
    
6

案例：实现表格隔行变色效果。

    
    
    



    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
编号
姓名
年龄
操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

五，伪元素选择器

在 CSS3 中出现了伪元素选择器，我们常用的有两个：

• ::before 它是在元素的内容之前添加前缀内容

• ::after 它是在元素的内容之后添加后缀内容

    
    
    


这是内容

六，常见样式

样式名称	样式的值	说明
font-family	字体名称（如微软雅黑or Microsoft YaHei）	文本字体
font-style	normal、italic、oblique	规定斜体文本
font-variant	small-caps、normal	小型大写字母
font-weight	normal、bold、bolder、数值	文本的粗细
font-size	默认大小是 16 像素 (16px=1em)，单位一般是px，也可以是其他	文本的大小
text-indent	所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值	软化文本内容
text-align	left、right 、center、justify	文本行间的对齐方式
word-spacing	其默认值 normal 与设置值为 0 是一样的	改变单词间隔
letter-spacing	其默认值 normal 与设置值为 0 是一样的	改变字（字母）间隔
text-transform	none、uppercase、lowercase、capitalize	处理文本的大小写
text-decoration	none、underline、overline、line-through、blink	文本装饰
white-space	normal、pre-line、nowrap、pre、pre-wrap	空格换行和tab 处理
color	#十六进制三原色、颜色单词、rgb函数、rgba函数	文本颜色
direction	默认ltr、rtl、inherit	文本的方向
line-height	normal、数值、%等	行高
text-shadow	h1 { text-shadow: 5px 5px 5px #FF0000; }	文本阴影效果
box-shadow	div{ text-shadow: 5px 5px 5px #FF0000; }	盒子阴影效果
list-style-type	disc、circle、square、decimal、lower-roman、lower-latin	列表的样式
list-style-image	url函数引入图片	列表图标
list-style-position	inside、outside、inherit	何处放置列表项标记
list-style	list-style:square inside url('imgs/point.png');	统一设置列表样式
outline	p { outline:#00FF00 dotted thick; }	轮廓线
outline-offset	数值	轮廓和元素的距离
outline-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	轮廓颜色
outline-style	dotted、solid、dashed、double等	轮廓样式
outline-width	thin（细）、medium（默认）、thick（粗）、数值	轮廓的宽度
border-image	div { border-image:url(border.png) 30 30 round;}	使用图片来创建边框
opacity	0~1之间的数值，0表示全透明，1表示不透明	透明度
width	数值	元素的宽度
height	数值	元素的高度
max-height	数值	最大高度
max-width	数值	最大宽度
min-height	数值	最小高度
min-width	数值	最小高度
margin	{margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;}	外边距
margin-left	数值	左外边距
margin-right	数值	右外边距
margin-top	数值	上外边距
margin-bottom	数值	下外边距
padding	{padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; }	内边距
padding-xx	和margin一致	也有四个
border	border: 1px solid red;	边线
border-width	数值	边线粗细
border-style	dotted、dashed、solid、double	边线样式
border-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	颜色
border-xx-xx	border-top-width: 15px	样式、颜色、粗细
border-radius	div { border:2px solid; border-radius:25px; }，数值或者百分比	边线的弧度
background	{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; }	背景综合写法
background-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	背景颜色
background-position	top left 这种单词对 或者 坐标位置（x,y）或者 x%, y%	背景位置
background-size	background-size:80px 60px;| cover	背景图像的尺寸
background-repeat	repeat、repeat-x、repeat-y、no-repeat	背景图像重复
background-image	url函数引入图片	背景图片
background-attachment	默认scroll、fixed	背景图像是否固定或者随页面的滚动
visibility	visible、hidden	元素是否可见
display	none、block、inline、inline-block、list-item	元素类型转换、可见性
position	static、relative、absolute、fixed	元素定位
z-index	数值，默认0	表示z轴的优先级
vertical-align	baseline、sub、super、top、text-top、middle、text-bottom	元素的垂直对齐方式
overflow	visible、hidden、scroll、auto	溢出元素框时处理
clear	left、right、both、none	清除浮动
float	left、right、none	元素在哪个方向浮动
resize	none、both、horizontal、vertical	规定是否调整元素尺寸
box-sizing	content-box、border-box	容器尺寸计算方式
filter	opacity()、url()、blur()、grayscale()、brightness()等函数	设置页面的滤镜

基本语法

CSS的样式编写的基本语法如下：

选择器 {
    属性: 属性值;
    属性: 属性值;
    ......
}

注意：每一个属性值后要用分号结束，属性与属性值之间用英文冒号分隔。