整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
对带有指定属性的 HTML 元素设置样式。
ps：这个属性你可以自定义，随便啦，想写什么写什么。
eg:
vue中的scoped作用域属性就是用它来实现的。
在template模板中给style标签加上scoped属性就可以实现不同template页面其样式互不干扰
当然，属性选择器远远不止这些：
我们可以给相同的属性不同的值定义不同的样式
还可以向正则表达式那样，给属性值开头不同，结尾不同，中间含义不同分别设置不同的样式！
input[attr^=a] ------ 属性值【开头】为【“a”】的元素
input[attr$=a] ------ 属性值【结尾】为【“a”】的元素
input[attr*=a] ------ 属性值中含有【“a”】的元素
ps: 我属性前面的input是标签选择器的意思，你也可以用类名，id, 标签什么的都可以!
就像这样：
还有就是我上面css中写属性选择器中，我把属性的中用引号包裹了，事实上，你带不带引号都对！看个人习惯!
选择第一个子元素：
父元素>子元素:first-child{}
ps：如果有很多父元素，要选择指定的用选择器就行 指定父元素>一堆子元素：first-child
选择最后一个子元素：
父元素>子元素:last-child{}
用法相同。
匹配属于父元素中唯一子元素的元素。
要匹配的子元素:only-child {}
当你使用这个选择器的时候，它会找一个自己是不是独生子女（父元素没有出了自已以外的其它子元素了），如果是独生子女，那就匹配成功，不是，不好意思，匹配失败！
匹配属于其父元素的特定类型的唯一子元素的每个元素。
要指定的子元素类型类型:only-of-type{}
这个真的不是很好理解，和only-child不同（only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。），在伪类选择器前面是要指定的子元素类型, 然后当它匹配时候，会找自己在父元素里面是不是独一份（假设我们把标签比作男女的话，它的父亲有很多个孩子，但是其它的都是男孩，只有它是女孩），如果是，匹配成功，否则匹配失败
eg:
ps：大家看了这个选择器，现在可以把它忘掉了，因为讲道理来说，既然它是父元素里的唯一此标签子元素，我们完全可以通过: 父元素>此子元素标签 直接就把它定位了！完全不需要这么麻烦！
子元素列表 :nth-child(要选择的第几个)
需要注意一点就是，他不是从0开始选择，比如你要选择第一个子元素，那么
子元素列表 :nth-child(1)即可
子元素列表:nth-last-child((要选择的倒数第几个)
同 :nth-child类似，它也是从1开始的，nth-last-child(1)代表倒数第一个，也就是最后一个！
eg:
子元素列表：nth-child(odd) 匹配下标是奇数的子元素 子元素列表：nth-child(even) 匹配下标是偶数的子元素
嗯，可以用它来实现经典的隔行变色是在恰当不过的了！
除此之外，:nth-child里面还可以写一些计算。
:nth-child(数字n) 表示匹配该数字的倍数的意思，比如nth-child(3n)就表示匹配该元素下的所有3的倍数：
eg:
:nth-child(数字n) ,这个数字还可以进行简单的计算，比如，如果我写 :nth-child(3n-1)，则会匹配到下标分别为 2,5,8的子元素，因为3的一倍为3,3减1得到下标2的子元素, 3的2倍为6, 6减1得到下标5的子元素。
子元素集合:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
好吧，官方描述可能坑，我们用例子来理解：
不同于 :nth-child(n) (选取父元素的第 N 个子元素，不论元素的类型。n 可以是数字（从 1 开始），关键词（even/odd）,或者公式（3n + 1, 2n + 1...）)
:nth-of-type(n)与 :nth-child(n) 的区别就在于 :nth-child(n) 不论元素的类型，而nth-of-type(2)选取父元素的第 N 个类型为 你所知道 的子元素。
上图中，父元素有2个span标签，第一个span标签在父元素的子元素集合中下标为2的位置，第二个span在父元素的子元素集合中下标为3的位置
我们使用 span:nth-child(2) 会选中第一个sapn标签，因为下标为1的子元素是p标签，
但是使用 span:nth-of-type(2) 则会选中第二个span标签，因为在该父元素的子元素集合中，第二个span标签是依据该父元素的子元素集合中的span标签集合中的第二个！！！！！！！
子元素集合:nth-last-of-type(n) n 可以是数字、关键词或公式。
这个用法同 :nth-of-type(n) 保持一致，只不过它是从倒数开始。
比如 span:nth-last-of-type(2)意思就是说选择父元素的倒数第二个span标签。
eg:
:focus {}
表示该表单光标获得焦点时触发。
:
:enabled{} 选择启用状态的元素
凡是没有设置属性为disabled的表单都会匹配到，disabled为禁用该表单的意思
与:enabled{} 相对的，:disabled{}为选择 选择禁用状态的元素 例如：<input type="text" disabled />
:valid {} 验证输入合法时触发
与:valid {} 相对于，:invalid{}选择器在匹配不合法时触发,这里就不写例子了
:before
在【当前元素】之前插入【额外内容】 ，需要配合【content】一起
使用。【content】的值就是插入的内容，这个和:after是很常用的，因为可以把一个标签当三个标签来用，大网站经常用它来提示性能。
同:before{}对应，:after{}会在元素之后插入内容，同样，也需要配合content来使用
::selection 指鼠标选中“网页文本”状态的设定。
默认，我们的浏览器选中网页文本效果都是蓝色背景，白色文字：
我们可以通过::selection来更改默认样式:
ps: 记着是两个冒号！！！！！ ::selection
好了，差不多就是这些，要是后面还有比较重要的我在补充！
文通过js代码实现了按住键盘的SHIFT键，通过鼠标点击网页复现框实现区间选中的功能，还是比较实用的。 完整的代码实现例子如下：
<!DOCTYPE html>
<html>
<head>
<title>测试页面</title>
<meta name="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
//选择全部
function checkAllItem(obj){
var box = document.getElementsByName("box");
for(var index=0;index<box.length;index++){
if(obj.checked){
box[index].checked = true;
}else{
box[index].checked = false;
}
}
}
//全局变量
var shiftKeyDown = false;
function keyDownHandler(event){
shiftKeyDown = true;
}
function keyUpHandler(event){
shiftKeyDown = false;
}
function selectRow(obj){
if(shiftKeyDown){
var checks = $(":checkbox[name='box']");
var currentIndex = checks.index($(obj)[0]);
var lastIndex = -1;
var box = document.getElementsByName("box");
for(var index=0;index<box.length;index++){
if(box[index].checked){
if(index!=currentIndex){
lastIndex = index;
if(index < currentIndex)
break;
}
}
}
if(lastIndex ==-1){
return ;
}
if(lastIndex < currentIndex){
for(var i=lastIndex;i<=currentIndex;i++){
if(obj.checked){
box[i].checked = true;
}else{
box[i].checked = false;
}
}
}else{
for(var i=currentIndex;i<=lastIndex;i++){
if(obj.checked){
box[i].checked = true;
}else{
box[i].checked = false;
}
}
}
}
}
</script>
</head>
<body onkeydown="keyDownHandler(event)" onkeyup="keyUpHandler(event);">
<h3>javascript代码实现按住shift键完成复选框的区间选中</h3>
<table style="width: 60%;" border="1">
<tr>
<td style="width: 10%" ><input type="checkbox" name="allBox" onclick="checkAllItem(this);"/>全选 </td>
<td>列1</td><td>列2</td></tr><tr>
<td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr><tr>
<td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
<tr><td><input type="checkbox" name="box" onclick="selectRow(this);"/></td>
<td>Cell</td><td>Cell</td></tr>
</table>
</body>
</html>
果我们想在 HTML 元素中设置 CSS 样式，则需要通过 CSS 选择器进行控制。换句话说，CSS 选择器就是用于指向需要添加 CSS 样式的标签，让 CSS 样式知道自己需要作用到那个标签上去。
CSS 的继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
以下分别介绍了几种常用的选择器与其可继承的属性。
我们通过设置标签的 id 属性来设置id选择器。CSS 中 id 选择器以 # 来定义。如以下则是设置 id 为“box”的 CSS 样式。为 div 添加一个高度为 100px，宽度为 100px，背景颜色为红色的样式。
常用的选择器还有类选择器。类选择器通过设置标签的 class 属性去设置样式。CSS 中 class 选择器以 . 来定义。如以下则是设置class 为“box”的 CSS 样式。为div添加一个高度为 100px，宽度为 100px，背景颜色为蓝色的样式。
标签选择器是为某一类标签设置 CSS 样式。在 CSS 中直接以标签名设置样式。如以下是设置 div 的 CSS 样式。给 div 加上一个高度为 100px,宽度为 100px,背景颜色为粉色的样式。
我们也可以直接在标签内写 CSS 代码。通过加上 style 属性，就可以在 style 内添加 CSS 样式了。
CSS 中可继承的属性有以下几种。
font | 组合字体 |
font-family | 规定元素的字体系列 |
font-weight | 设置字体的粗细 |
font-size | 设置字体的尺寸 |
font-style | 定义字体的风格 |
font-variant | 设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 |
font-stretch | 允许你使文字变宽或变窄。所有主流浏览器都不支持。 |
font-size-adjust | 为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。 |
text-indent | 文本缩进 |
text-align | 文本水平对齐 |
line-height | 行高 |
word-spacing | 增加或减少单词间的空白（即字间隔） |
letter-spacing | 增加或减少字符间的空白（字符间距） |
text-transform | 控制文本大小写 |
direction | 规定文本的书写方向 |
color | 文本颜色 |
visibility | 规定元素是否可见 |
caption-side | 规定表格标题的放置方式 |
border-collapse | 为表格设置合并边框模型 |
border-spacing | 设置相邻单元格的边框间的距离（仅用于“边框分离”模式） |
empty-cells | 设置是否显示表格中的空单元格（仅用于“分离边框”模式） |
table-layout | 显示表格单元格、行、列的算法规则 |
list-style-type | 设置列表项标记的类型 |
list-style-image | 使用图像来替换列表项的标记 |
list-style-position | 设置在何处放置列表项标记 |
list-style | 在一个声明中设置所有的列表属性 |
quotes | 设置嵌套引用（embedded quotation）的引号类型 |
cursor | 规定要显示的光标的类型（形状） |
page | 检索或指定显示对象容器时使用的页面类型 |
page-break-inside | 设置元素内部的 page-breaking 行为 |
orphans | 设置或返回一个元素必须在页面底部的可见行的最小数量（用于打印或打印预览） |
speak | 规定内容是否将以声音形式呈现 |
speak-punctuation | 规定如何念出标点符号 |
speak-numeral | 规定如何念出数字 |
speak-header | 指定如何处理表格标题。应该在每个单元格之前朗读标题，还是仅在标题与前一个单元格不同的单元格之前念出标题。 |
speech-rate | 规定说话的速度 |
volume | 规定说话的音量 |
voice-family | 规定语音的语音家族 |
pitch | 规定说话的声音 |
pitch-range | 规定语音的变化（单调还是动听的声音？） |
stress | 规定语音中的“压力” |
richness | 指定语音的丰富程度。（声音丰富还是稀薄？） |
azimuth | 设置声音的来源 |
elevation | 设置声音的来源 |
以上就是编程狮(w3cschool.cn)小编为你整理的 CSS 选择器及其继承属性的总结。希望可以帮到你~
*请认真填写需求信息，我们会在24小时内与您取得联系。
