前端css 选择器

CSS分为选择器和属性,

1. 选择器:选择要应用属性值的标签
2. 属性:应用在标签上改变标签的样式

选择器:

基本选择器

       优先级:id选择器>类选择器>元素选择器>通用选择器

      同等级选择器优先级从下到上

选择器类型	使用方法	在css文件中使用示例(以p标签为例)
元素选择器	<p>标签选择器</p>	p{ color: red; }       标签加中括号
类选择器	<p class="pclass1">类选择器</p>	.pclass1{ color:blue; }    点加类名
id选择器	<p id="pid1" class="pclass1">id选择器</p>	#pid1{ color:yellow; }     井号加id名
通用选择器	无	*{color: black;} 星号后加中括号

组合选择器

      组合选择器可以使用元素选择器、 id选择器或类选择器进行组合

选择器类型	使用格式	使用说明
后代选择器	li a { color: green; }	选择li标签后代中的a标签
儿子选择器	div>p { color: green; }	选择div标签的儿子标签中的p标签
毗邻选择器	div+p{color:black;}	选择div标签后边相邻的p标签(同等级标签)
弟弟选择器	#i1~p{color:green;}	选择id为i1的标签后边的p标签(同等级标签)

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

不常用的

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

分组

当多个元素样式重复时可使用分组使用逗号隔开,组中的元素都使用统一的样式

div, p { color: red; }

一般使用如下形式,一个元素一行

div,

p { color: red; }

伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

使用方法	使用场景(before和after多用于清除浮动。)
p:first-letter { font-size: 48px; color: red; }	常用的给首字母设置特殊样式：
p:before { content:"*"; color:red; }	在每个<p>元素之前插入内容
p:after { content:"[?]"; color:blue; }	在每个<p>元素之后插入内容