前端css——css选择器（完整用心总结）
选择器
- 常用的选择器
- 元素选择器
- id选择器
- 类选择器
- 选择器分组（并集选择器）
- 通配选择器
- 复合选择器（交集选择器）
- 后代元素选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器：
- 兄弟元素选择器
- 否定伪类选择器
- 否定伪类：
常用的选择器
元素选择器
作用：通过元素选择器，可以选择页面中所有指定元素
语法：.标签名{}
如： .p{ }
id选择器
使用方法：通过元素的id属性值选中唯一的一个元素
语法：#id的属性值{ }
类选择器
先介绍一个属性class。我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素。相对与id，class的功能更强一些。可以同时为一个元素设置多个class属性，多个值之间使用空格隔开
作用：通过元素的class 属性值选中一组元素
语法：.class的属性值{}
选择器分组（并集选择器）
选择器分组把拥有相同的特性的属性写在一起，用逗号隔开
语法：选择器1,选择器2,选择器3{ }
比如：#p1,.p2,h1{ }
假设还是上面那段代码，现在我们要为id为p1的元素，class为p2的元素，还有h2，同时设置背景颜色为黄色。我们要怎么做呢？？？
#p1{
background-color: yellow;
}
.p2{
background-color: yellow;
}
h2{
background-color: yellow;
}
这样么？？？确实能达到效果，但用选择器进行分组更易懂
通配选择器
作用:他可以选中页面中所有的元素
语法：*{}
复合选择器（交集选择器）
作用:可以选中同时满足多个选择器中的元素(同时满足所有选择器)
语法：选择器1选择器2选择器3{}
p#p1{
background-color: red;
对于id选择器来说，不建议使用复合选择器。一般是类选择器才用。
后代元素选择器
有后代就有祖先，有儿子就有父亲
那么我们先来看一下这些元素之间的关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div span{
color: greenyellow;
}
</style>
</head>
<body>
<div id="">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<span>我是body中的span元素</span>
</body>
</html>
伪类选择器
给链接定义样式:
有4个伪类可以让你根据访问者与该链接的交互方式，将连接设置成4中不同的状态。
1、正常链接：a：link
2、 访问过的链接：*a:vidited(只能定义字体颜色），存在隐私问题！！
3、鼠标划过的链接：a:hover
4、 正在点击的连接：a:active
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*为没访问过的连接设置为黄绿色。*/
a:link{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br />
<a chref="http://www.baidu123456.com">未访问过的链接</a>
</body>
</html>
作用:伪类专门用来表示元素的一种特殊的状态比如访问过的超链接、比如普通的超链接、比如获取焦点的文本框。当我们需要为特殊状态元素设置样式时，就可以使用伪类
语法：a:link{}、a:vidited{}、a:hover{}、a:active{}…
需要注意的是：我们的hover、active不仅可以在a标签中使用,也可以为其他元素设置（IE6中不支持对超链接以外的设置hover、active）
…
p:hover{
background-color: yellow;
}
…
我是一个p标签
...其他：
获取焦点：-:focus。
指定元素前：-:before。
指定元素后：-:after。
选中的元素：-::selection。(这个伪类在火狐中需要采用另一种方式编写-::moz-selection)
伪元素选择器
作用:使用伪元素来表示元素中的一些特殊的位置。
语法：-:first-letter、-:first-line、-:before、-:after。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 为p中的第一个字符设置特殊的样式 */
p:first-letter {
color: red;
font-size: 20px;
}
/*为p中的第一行设置背景颜色为黄色*/
p:first-line {
background-color: yellow;
}
/*
* before表示元素最前面的部分
* 一般before都需要结合一个属性content一起使用。
* 通过content可以向before或after添加一些内容。
*/
p:before{
color: blue;
content: "我会在最前面";
}
p:after{
color: orange;
content: "我会在最后面";
}
</style>
</head>
<body>
<p>
我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签我是一个p标签
</p>
</body>
</html>
属性选择器：
说属性选择器前我们先说一个title属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
</head>
<body>
<p title="我是title中的文字">我是一个段落</p>
</body>
</html>
当我们把鼠标移至文字上的时候会出现title标签中的属性值就会显示（作为提示文字）。
属性选择器：
作用：可以根据元素中的属性或属性值来选取指定元素。
语法：
选取含有指定属性的元素:[属性名]{}。
选取含有特殊指定属性及属性值的元素：[属性名=“属性值”]{}。
选取属性值以指定内容开头的元素：[属性名^=“属性开头值”]。
选取属性值以指定内容结尾的元素:[属性名$=“属性结尾值”]。
选取属性值包含指定内容的元素：[属性名*=“包含属性值”]。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
[title="hello"]{
background-color: yellow;
}
</style>
</head>
<body>
<p title="我是title中的文字">我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
</body>
</html>
兄弟元素选择器
...
<span>我是一个span</span>
<p>我是一个p</p>
...
当我们想要为span后的一个p元素设置一个背景颜色为黄色时要怎么写呢？？？span是p他哥，他俩就是兄弟，要用兄弟元素选择器。
span+p{
background-color: yellow;
}
选中后一个兄弟元素：
作用:可以选择一个元素后紧挨着的指定的兄弟。
语法：前一个+后一个{}。
选中后面所有元素：
作用：选中后面的所有指定兄弟。
语法：前面一个~后面所有{}。
否定伪类选择器
...
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
...
当我们需要将所有p元素设置黄色背景，除了class为hello的时，需要使用否定伪类。
p:not(.hello){
background-color: yellow;
}
否定伪类：
作用:可以从已选中的元素中剔除某些元素。
语法：:not(选择器)。
声明块
声明块紧跟在选择器后面，并且用{}括起来，声明块中其实就是一组一组的名值对结构。
例如:“color:red”
一组一组的名值对我们称之为声明。在一个声明块中可以写多个声明，多个声明之间使用;来隔开,声明的样式名和样式值之间使用:来连接。样式名1:样式值1; 样式名2:样式值2; …