本篇内容：
- 1，css3新增选择器
- 2，经典选择器
官方网页(http://www.w3school.com.cn/cssref/css_selectors.asp)
新增选择器
经典选择器
1，css3新增选择器
之后补充
2，经典选择器
- 2.1，标签(元素)选择器：p
- 2.2，类选择器：.class
- 2.3，id选择器：#id（绝大部分用于js）
- 2.4，通用选择器：*
- 2.5，群组(并列)选择器：element,element
- 2.6，群组(交叉)选择器：elementelement
- 2.7，后代选择器：element element
- 2.8，子标签(仅限下一级)选择器：element>element
- 2.9，相邻兄弟选择器：element+element；
通用兄弟选择器：element~element，这个是选中所有兄弟标签 - 2.10，属性选择器：[attribute]
- 2.11，属性设定选择器：[attribute=value]
- 2.12，属性约等选择器：[attribute~=value]，属性内容中包含value
- 2.13，属性开头选择器：[attribute|=value]，属性内容以value开头
- 伪类：
2.14，未被访问链接选择器：:link a:link 选择所有未被访问的链接。
2.15，已被访问链接选择器：:visited a:visited 选择所有已被访问的链接。
2.16，活动链接选择器：:active a:active 选择活动链接。
2.17，悬浮选择器：:hover a:hover 选择鼠标指针位于其上的链接。
2.18，聚焦选择器：:focus input:focus 选择获得焦点的 input 元素。 - 伪元素：
2.19，元素首字母选择器：:first-letter p:first-letter 选择每个 p 元素的首字母。
2.20，元素首行选择器：:first-line p:first-line 选择每个 p元素的首行。
2.21，首元素选择器：:first-child p:first-child 选择属于父元素的第一个子元素的每个 p元素。
222，元素前位置选择器：:before p:before 在每个 p 元素的内容之前插入内容。
2.23，元素后位置选择器：:after p:after 在每个 p 元素的内容之后插入内容。
2.24，特定的开头属性原则器：:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 p 元素。
- 选择器优先级:
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
具体使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*4.1，标签(元素)选择器：*/
p{
color: #525;
}
/*4.2，类选择器：.class*/
.firstDivSpan{
background-color: #888888;
}
/*4.3，id选择器：#id*/
#firstDivfirstSpan{
background-color: #ee7799;
}
/*4.4，通用选择器：**/
*{
color: #f00;
}
/*4.5，群组(并列)选择器：element,element*/
#firstDivsecondSpan, #secondDivsecondSpan{
background-color: black;
}
/*4.6，后代选择器：element element*/
div #firstDivthirdSpan{
background-color: olive;
}
/*4.7，子标签(仅限下一级)选择器：element>element*/
#secondDiv>span{
/*color: dodgerblue;*/
}
/*4.8，相邻兄弟选择器：element+element*/
#secondDivthirdSpan+span{
color: lavenderblush;
}
/*4.9，属性选择器：[attribute]*/
[name]{
color: yellow;
}
/*4.10，属性设定选择器：[attribute=value]*/
[name="li"]{
color: darkorange;
}
/*4.11，属性约等选择器：[attribute~=value]，属性内容中包含value*/
[name~="king"]{
color: #0f0;
}
/*4.12，属性开头选择器：[attribute|=value]，属性内容以value开头*/
/*这个好像不对,暂时先放着*/
[lang|=eng]{
background-color: cyan;
}
/*4.13，未被访问链接选择器：:link a:link 选择所有未被访问的链接。*/
/*这个好像和visited有冲突,因为这里设置的好像访问之后也还是有效的*/
a:link{
background-color: orange;
color: white;
}
/*4.14，已被访问链接选择器：:visited a:visited 选择所有已被访问的链接。*/
a:visited{
color: blue;
background-color:white;
}
/*4.15，活动链接选择器：:active a:active 选择活动链接。*/
/*4.16，悬浮选择器：:hover a:hover 选择鼠标指针位于其上的链接。*/
#secondDiv .secondDivSpan:hover{
background-color: #552255;
}
/*4.17，聚焦选择器：:focus input:focus 选择获得焦点的 input 元素*/
/*4.18，元素首字母选择器：:first-letter p:first-letter 选择每个 p 元素的首字母。*/
p:first-letter{
color: blue;
}
/*4.19，元素首行选择器：:first-line p:first-line 选择每个 p元素的首行。*/
p:first-line{
background-color: lime;
}
/*4.20，首元素选择器：:first-child p:first-child 选择属于父元素的第一个子元素的每个 p元素。*/
span:first-child{
color: white;
}
/*4.21，元素前位置选择器：:before p:before 在每个 p 元素的内容之前插入内容。*/
span:before{
content: "zhangdanfengbefore";
}
/*4.22，元素后位置选择器：:after p:after 在每个 p 元素的内容之后插入内容。*/
p:after{
content: 'pafter';
}
/*4.23，特定的开头属性原则器：:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 p 元素。*/
</style>
</head>
<body>
<!--4.1，标签(元素)选择器：p-->
<!--4.2，类选择器：.class-->
<!--4.3，id选择器：#id-->
<!--4.4，通用选择器：*-->
<!--4.5，群组(并列)选择器：element,element-->
<!--4.6，后代选择器：element element-->
<!--4.7，子标签(仅限下一级)选择器：element>element-->
<!--4.8，相邻兄弟选择器：element+element-->
<!--4.9，属性选择器：[attribute]-->
<!--4.10，属性设定选择器：[attribute=value]-->
<!--4.11，属性约等选择器：[attribute~=value]，属性内容中包含value-->
<!--4.12，属性开头选择器：[attribute|=value]，属性内容以value开头-->
<!--伪类：-->
<!--4.13，未被访问链接选择器：:link a:link 选择所有未被访问的链接。-->
<!--4.14，已被访问链接选择器：:visited a:visited 选择所有已被访问的链接。-->
<!--4.15，活动链接选择器：:active a:active 选择活动链接。-->
<!--4.16，悬浮选择器：:hover a:hover 选择鼠标指针位于其上的链接。-->
<!--4.17，聚焦选择器：:focus input:focus 选择获得焦点的 input 元素。-->
<!--伪元素：-->
<!--4.18，元素首字母选择器：:first-letter p:first-letter 选择每个 p 元素的首字母。-->
<!--4.19，元素首行选择器：:first-line p:first-line 选择每个 p元素的首行。-->
<!--4.20，首元素选择器：:first-child p:first-child 选择属于父元素的第一个子元素的每个 p元素。-->
<!--4.21，元素前位置选择器：:before p:before 在每个 p 元素的内容之前插入内容。-->
<!--4.22，元素后位置选择器：:after p:after 在每个 p 元素的内容之后插入内容。-->
<!--4.23，特定的开头属性原则器：:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 p 元素。-->
<div id="firstDiv" class="div">
<span id="firstDivfirstSpan" class="firstDivSpan" name="zhang">这是第一个div中的第一个span</span>
<span id="firstDivsecondSpan" class="firstDivSpan" name="li">这是第一个div中的第二个span</span>
<span id="firstDivthirdSpan" class="firstDivSpan">这是第一个div中的第三个span</span>
<span id="firstDivfouthSpan" class="firstDivSpan">这是第一个div中的第四个span</span>
<div>
<span name="i am the king">这是第二级的div中的第一个span</span>
<span>这是第二级的div中的第二个span</span>
<span lang="english">这是第二级的div中的第三个span</span>
</div>
<p>这是div中的一个段落标签</p>
</div>
<div id="secondDiv" class="div">
<span id="secondDivfirstSpan" class="secondDivSpan" name="zhang">这是第一个div中的第一个span</span>
<span id="secondDivsecondSpan" class="secondDivSpan">这是第一个div中的第二个span</span>
<span id="secondDivthirdSpan" class="secondDivSpan">这是第一个div中的第三个span</span>
<span id="secondDivfouthSpan" class="secondDivSpan">这是第一个div中的第四个span</span>
<a href="https://www.baidu.com" target="_blank">百度链接01</a>
<a href="https://www.baidu.com" target="_blank">百度链接02</a>
<a href="https://www.baidu.com">百度链接03</a>
</div>
</body>
</html>
网友评论