css3 选择器
一.属性选择
1. E[attr^="val"]
选择匹配元素E，且E元素定义了属性attr，匹配属性值以val开头的任何字符串。
2.E[attr$="val"]
选择匹配元素E，且E元素定义了属性attr，匹配器属性值以val结尾的任何字符串。
3.E[attr*="val"]
选择匹配元素E，且E元素定义了属性attr，匹配器属性值以val包含的任何字符串。
eg:
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue 二.结构性伪类选择器
(一). :root (匹配元素E所在文档的根元素)
:root {
background:orange;
}(二). :not (否定选择器)
可以选择除某个元素之外的所有元素
input:not([type="submit"]){
border:1px solid red;
}
div:not([id="footer"]){
background: orange;
}(三). :empty(空)
用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
p:empty {
border-color:#fff;
}(四). :target(目标选择器)
- 用来匹配文档(页面)的url的某个标志符的目标元素。
html代码：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
CSS代码：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
(五). 选择子元素
1:first-child、:last-child和 nth-child(n)、nth-last-child(n)
:first-child选择父元素的第一个子元素的元素E:last-child选择父元素的最后一个子元素的元素E:nth-child(n)选择父元素的第n个子元素的元素E:nth-last-child(n)选择父元素的倒数第n个子元素的元素E开始计算- 当参数为n时，n的起始值为1.
- 2n、even表示选择偶数行；2n+1、odd表示奇数行；
li:first-child{
color: red;
}
li:last-child{
color: red;
}2. :first-of-type、:nth-of-type(n)和 :last-of-type、:nth-last-of-type(n)
:first-of-type主要用来定位一个父元素下的某个类型的第一个子元素。:last-of-type主要用来定位一个父元素下的某个类型的最后一个子元素。
.wrapper > p:first-of-type {
background: orange;
}
.wrapper > p:nth-of-type(2n){
background: orange;
}3. :only-child、only-of-type
:only-child匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。only-of-type表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的
html代码：
<div class="wrapper">
//被标记
<p>我是一个段落</p>
</div>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落</p> //被标记
<div>我是一个Div元素</div>
</div>css代码：
.wrapper {
border: 1px solid #ccc;
}
.wrapper p:only-of-type{
background: orange;
}(六) 设置元素样式
1 :enabled和:disabled
- 通常用在输入框、密码框、复选框、按钮中；
- 使用它设置样式
input[type="text"]:enabled {
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
input[type="text"]:disabled{
box-shadow: none;
}2 :checked
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
input[type="checkbox"]:checked + span {
opacity: 1;
}3 :read-only(只读状态)
- 用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
<div>
<label for="comment">评论：</label>
<textarea name="comment" readonly="readonly"></textarea>
</div>textarea :read-only {
border: 1px solid #ccc;
resize: none;
background: #eee;
}4 :read-write(非只读状态)
- 主要用来指定当元素处于非只读状态时的样式。
<input type="text" name="name" id="name" placeholder="大漠" />
input[type="text"]:read-write{
border:2px solid red;
}
5 ::selection
- 用来修改用鼠标选中文本之后的样式
::selection {
background: red;
color: green;
}6 ::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容- 这两个常和”content”配合使用，使用的场景最多的就是清除浮动。
- 伪元素的应用
- 清除浮动。（如父元素都是浮动的，则父元素的告诉无法撑开，则需要到这个）
- 画分割线
- 计数器
- 形变
- 增大点击热区
.effect:after{
content:"333";
}
//清除浮动
.clear:after {
content: '';
display: block;
clear: both;
}三.布局样式
1.columns
columnscolumn-width–列宽度column-count–列数量column-gap–列间距column-rule–列表边框column-span–跨列column-width:200px; column-count: 3; column-gap: 2em; column-rule: 2px dotted green(参数：边框宽度，边框类型，边框颜色); p:nth-child(1){ column-span:all; }
