CSS笔记回顾：CSS基本知识点 - 选择器

1、css中的单位

单位	描述
%	百分比，是以父元素的大小计算的
em	通常1em=16px，2em=32px，当用于指定字体大小时，em单位是指的父元素的字体大小。
ex	相对于字符x的高度，此高度通常为字体尺寸的一半
px	像素，是屏幕上显示数据的最基本的点
rem	相对单位，相对于html标签，常用于HTML5页面的自适应。

2、css中的颜色

颜色存在以下的几种表达方式

方式	描述
颜色名	如：black，red等
rgb(x,x,x)	红绿蓝值，如：rgb(255,245,244)
rgba(x,x,x,.a)	红绿蓝透明度值，如：rgb(255,245,244, 0.5)
HSL	色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，Hue取值范围为0360，Saturation取值为：0100%，Lightness取值为0~100%，如：hsl(120,65%,75%)
HSLA	HSL颜色值得拓展，带有一个Alph通道（它规定了对象的不透明度），如：hsla(120,65%,75%,0.3)

3、css选择器

3.1、基础选择器

• 3.1.1、标签选择器
  标签选择器用于将HTML的标签作为选择器

p { font-size: 12px; color: red }

• 3.1.2、id选择器
  id选择器使用"#"进行标识，后面紧跟的是id值，id属性唯一。

#tab { font-size: 12px; color: red }

• 3.1.3、类选择器
  类选择器以'.'进行标识，可以用于给多个HTML标签设置相同的样式

.myclass  { font-size: 12px; color: red }

• 3.1.4、限定式选择器
  限定式选择器由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或id选择器，中间是没用空格的。如：

div#mydiv {
  // 为id属性为mydiv下的所有div盒子添加样式
  font-size: 12px; 
  color: red 
}

• 3.1.5、后代选择器
  后代选择器是用来选择HTML标签元素的后代的，其写法是把付标签的选择器写在前面，后代标签的选择器械在后面，两者之间有空格

div p  {
  // 为 div标签中的p标签设计样式
 font-size: 12px; 
 color: red 
}

• 3.1.6、并集选择器
  并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并列式选择器的一部分，如果某些选择器定义的样式完全或部分相同，则可以使用并集选择器为他们定义样式

h1,div#box,.tab  { 
  // h1标签，id属性为box下的所有div，以及类tab的样式
  font-size: 12px; 
  color: red 
}

• 3.1.7、通配符选择器
  通配符选择器使用“*”号来表示，它是所有选择器中作用范围最广的，能匹配页面中的所有HTML标签元素。

3.2、其他选择器(上)

• 3.2.1、选择父元素为div标签下的p标签（必须是直系子元素）
  div > p
• 3.2.2、选择紧跟在div标签后面的p标签（不是内部）
  div+p
• 3.2.3、选择有相同的父元素且位于p标签元素之后的所有ul元素
  p~ul
• 3.2.4、选择所有包含name属性的input标签

input['name']

• 3.2.5、选择name属性为“myName”的input标签
  input[name = 'myName']
• 3.2.6、选择name属性以"my"开头的input标签

input[name ^= "my"]

• 3.2.7、选择属性name以"me"结尾的input标签

input[name $="me"]

• 3.2.8、选择name属性包含"na"的标签

input[ name *= "na"]

• 3.2.9、选择所有未被访问的a链接
  a:link
• 3.2.10、选择所有已被访问的a链接
  a:visited
• 3.2.11、选择所有活动的链接
  a:active

3.3、其他选择器(下)

• 3.3.1、选择鼠标悬停的div标签
  div:hover
• 3.3.2、选择所有获取焦点的input标签
  input:focus
• 3.3.3、选择p段落中的首字母

p:first-letter

• 3.3.4、选择p段落中的首行

p:first-line

• 3.3.5、选择属于父元素的第一个子元素的p标签
  p:first-child
• 3.3.6、选择属于父元素的最后一个子元素的p标签
  p:last-child
• 3.3.7、在每个p标签的内容前面插入文字"aaaa"

p:before {
  content:'aaaa'
}

• 3.3.8、在每个p标签的内容之后插入文字"bbbb"

p:after {
  content:'bbbb'
}

• 3.3.9、选择div里面的第一个p标签元素

div p:first-of-type

• 3.3.10、选择div标签里面的最后一个p标签

div p:last-of-type

• 3.3.11、选择属于其父元素的第二个p标签

li:nth-child(2)

• 3.3.12、选择属于其父元素的倒数第二个p标签

li:nth-last-child(2)

• 3.3.13、选择没有子元素的div标签

div:empty

• 3.3.14、选择除去最后一个li元素的其他所有li标签

li:not(:last-child)