css3基础之CSS3选择器
Posted sunnyboysix
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3基础之CSS3选择器相关的知识，希望对你有一定的参考价值。
Tips:css3在有些旧的浏览器上无法很好兼容（注意踩坑，很多时候不是代码错误是浏览器不兼容的问题）
1 css3分类
1） 基本选择器
* 统配选择器 选择文档中所有的HTML元素
ep: *{
margin:0;
padding:0;
} 一般元素在浏览器内都会自带一些margin或者padding这样可以去掉那些值，一般按照设计图写代码时候需要注意。
#id ID选择器 选择指定的ID
使用之前需要给ID对应的元素设置ID，ID选择器具有唯一性（非常重要，和后台数据交互时候有些数值需要循环并且添加样式或者触发事件的时候，一般不采用ID，采用.class）
.class 类选择器 选择指定的class
类选择器在一个页面中可以有多个相同的类名。
"selcet1,selectorN"是 群组选择器 将每一个选择器匹配的元素集合并
2）层次选择器
层次选择器通过html的DOM元素间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系。
语法：
E F 后代选择器（包含选择器） 选择匹配F，且匹配F被包含在E元素内
也被称为包含选择器，作用就是可以选择某元素的后代元素
ep: <div>
<div>1</div>
<div>2</div>
</div>
div div{background:red} 1 2的背景颜色会变为红色(下面也为红色)
ep:<div>
<div>1
<div>2
</div>
</div>
</div>
E >F 子选择器 选择匹配F，且匹配F是E的子元素
只能选择某元素的子元素
<body>
<div>1
<div>2
</div>
<div>
</body>
body>div {background:red} 1背景为红色 2 不变色
E+F 相邻兄弟选择器 选择匹配F元素，且F紧跟在E后面
（用的不多）
E~F 通用选择器 选择匹配F元素，且位于匹配E元素后所有匹配的F
（用的不多）
3）伪类选择器
一 动态伪类选择器
语法：
a:link 链接伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited 链接伪类选择器
a:visited {color: #00FF00} /* 已访问的链接 */
a:active 用户行为伪类选择器
a:active {color: #0000FF} /* 被选择的链接 */
a:hover 用户行为伪类选择器
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:foucs 用户行为伪类选择器
input:focus
{
background-color:yellow;
}
补充：cursor:pointer 光标移动到上面变为小手
二 目标伪类选择器
目标伪类选择器是动态选择器，只有存在URL只想该匹配元素时才有效果。
三 语言伪类选择器（用的不多）
四 语言伪类选择器（用的不多）
根据元素的语言编码匹配元素。
<html lang="fr">
五 UI元素状态伪类选择器
包括：启用，禁用，选中等等
六 结构伪类选择器（内容太多，单独写）
七 否定伪类选择器
:not(selector) 选择器匹配非指定元素/选择器的每个元素。
p
{
color:#000000;
}
:not(p)
{
color:blue;
}
4）伪元素（内容太多，单独写）
5）属性选择器（内容太多，单独写）
以上是关于css3基础之CSS3选择器的主要内容，如果未能解决你的问题，请参考以下文章