css3-选择器
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等
诺~给你图
css3.png
那么先从最基本的位置开始。选择器
一、选择器
伪元素选择器
:first-line 匹配内容的第一行
:first-letter 匹配内容的第一个字
:before 在元素内容之前插入一些内容，配合content使用
:after 在元素内容之后插入一些内容，配合content使用
::selection 选择器匹配元素中被用户选中或处于高亮状态的部分
栗子们
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*first-line:匹配内容的第一行*/
p:first-line{
color: red;
}
/*first-letter：匹配内容的第一个字*/
p:first-letter{
font-size: 20px;
color: blue;
}
/*在元素内容之前插入一些内容，配合content使用*/
.beijing:before{
content: " 在元素内容之前插入一些内容 ";
}
/*在元素内容之后插入一些内容，配合content使用*/
.beijing:after{
content: " 在元素内容之后插入一些内容 ";
}
/*鼠标点击滑过*/
div::selection{
color: gold;
}
</style>
</head>
<body>
<p>
匹配内容的第一行<br />
匹配内容的第一行
</p>
<p class="beijing">++在前后插入内容++</p>
<div>恭喜发财~红包拿来！</div>
</body>
</html>
运行的全部结果
伪元素选择器.jpg
目标伪类选择器
<a href="#second">链接</a>
<div id="second"></div>
结构类似上述代码这样
点击链接，出现对象链接的对象
栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div:target{
width: 300px;
height: 100px;
background-color: deeppink;
}
</style>
<body>
<p><a href="#first">第一个</a></p>
<div id="first">第一个div哦</div>
<p><a href="#second">第一个</a></p>
<div id="second">第二个div哦</div>
<p><a href="#third">第一个</a></p>
<div id="third">第三个div哦</div>
</body>
</html>
:target 表示选取当前活动的目标元素。
上述栗子表示当我们活动某个div时候，为这个div添加样式
运行结果
GIF.gif
状态伪类选择器
:disabled 设置禁用
:enabled 设置非禁用
:focus 获取焦点时触发（这个要放在其他样式后面方可生效，优先级比较低）
:read-only 只读
:checked 给单选多选设置样式
栗子们
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*设置禁用样式*/
input:disabled{
/*禁用不能输入*/
background-color: deepskyblue;
}
/*设置非禁用样式*/
input:enabled{
/*可以正常输入 背景为粉色*/
background-color: greenyellow;
}
/*这个要放在其他样式后面方可生效，优先级比较低*/
/*获取焦点时触发*/
input:focus{
/*当输入框获取焦点时北京变为粉色*/
background-color: deeppink;
}
/*只读*/
input:read-only{
/*只可读取 不可设置*/
background-color: pink;
}
/*给单选多选设置样式*/
input:checked{
/*当选择框被选中的时候高度变化*/
height: 100px;
}
</style>
</head>
<body>
获取焦点<input type="text" /><br />
设置禁用<input type="text" disabled="disabled" /><br />
非禁用<input type="text" /><br />
<!--注意只读和禁用的区别-->
只读<input type="text" readonly="readonly"/><br />
选中<input type="checkbox" />
</body>
</html>
运行结果
GIF.gif
上栗中 禁用和只读 点击上去无任何效果
结构伪类选择器
:root 匹配当前选中的根元素
:empty 选取内容或者内容为注释的元素
:first-child 匹配当前对象的第一个孩子（注意前方有一个空格）
:last-child 匹配当前对象的最后一个孩子
:nth-child(n) 匹配当前对象的第n个孩子
:nth-last-child(3) 匹配当前对象的倒数第n个孩子
:nth-child(add) 奇数的孩子
:nth-child(even) 偶数的孩子
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:only-of-type 选择每个p元素是其父级的唯一p元素
结构伪类选择器.jpg
否定伪类选择器
:not(selector) 选择每个并非selecter元素的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
background-color: gold;
}
li:not(.second){
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>第1个</li>
<li class="second">第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
</body>
</html>
运行结果
否定伪类选择器.jpg
层次选择器
后代选择器：祖辈选择器和子选择器中间有一个空格
子代选择器：父选择器和子选择器中间是>
仅限后一个兄弟：此兄弟和后一个兄弟之间是+ 表示后一个兄弟
后面所有兄弟：此兄弟和后一个兄弟之间是~ 表示后面所有兄弟
/*后代选择器*/
div p{
font-size: 20px;
color: red;
}
/*子代选择器*/
div>div>p{
font-size: 30px;
color: blue;
}
/*仅限后一个兄弟*/
div p+h3{
color: green;
font-size: 40px;
}
/*后面所有兄弟*/
div p~h3{
color: salmon;
font-size: 50px;;
}
属性选择器
[attribute] 选择带有某个属性的元素
[attribute=value] 选择属性值为固定值的元素
[attribute|=language] (比如：[lang|=en] 选择一个lang属性的起始值="en"的所有元素)
[attribute~=value] （比如：[title~=flower] 选择标题属性包含单词"flower"的所有元素）
[attribute=value]（比如：a[src="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素）
[attribute^=value]（比如 a[src^="https"] 选择每一个src属性的值以"https"开头的元素）
[attribute$=value]（比如：a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 ）**
属性选择器.jpg
注：以上选择器IE6不支持 其他浏览器都支持
推荐个人认为比较实用的
[attr="value"] 可以选择不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]
[attr$="value"] 以value结尾，在不同的链接中可以选择不同的文件类型比如.html .css .js这种
喜欢就点赞
