CSS选择器的分类及实际应用
CSS选择器的分类及运用
1.选择器的分类
在了解分类之前，我们首先应该清楚**CSS选择器的含义：**每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{ }之前的部分就是“选择器”。 **“选择器”**指明了{ }中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
1.1、类选择器
**类选择器：**根据元素的class属性值选取元素。
语法:.class类名{ }
1.2、通用选择器
** 通用选择器:给网页所有的标签选取样式，一般用来清除网页中的默认样式。
** 语法：*{ }
1.3、ID选择器
** ID选择器：根据元素的ID属性值选取元素。
** 语法：#id名{ }
1.4、标签选择器
** 标签选择器：**给所选取的标签添加样式
** 语法：**标签名{ }
1.5、群组选择器
** 群组选择器: 可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
** 语法：.class名，#id名，标签名 { }
1.6、后代选择器
** 后代选择器：后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
** 语法：.class名 p{ }或者#id名 p{ }
1.7、子代选择器
** 子代选择器：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。在这里注意**后代选择器和子代选择器的区别。
1.8、兄弟选择器
**兄弟选择器：**除了根据祖先父子关系，还可以根据兄弟 关系查找元素。
**语法：**兄弟元素+兄弟元素 { }（查找兄弟元素一个兄弟元素） 兄弟元素~兄弟元素 { }（查找兄弟元素后面所有兄弟元素）
1.9、伪类选择器
**伪类选择器：**有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
语法：
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。一般用于链接上面。
1.10、伪元素选择器
**伪元素选择器：**所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器
语法：
:first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
div p:first-letter {font-size: 20px}
//选择div元素里所有的p元素的第一个字母或汉字，如果把块元素转换成行内元素则就不支持了；
:first-line，设置第一个文本行样式；
.box .main:first-line {color: #f00}
//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
:before，设置之前的样式，可以插入生成的内容，并设置其样式；
body:before {content: 'The Start:'; display: block}
//在body元素前插入文本内容'The Start:'，并设置其为块元素
:after，设置之后的样式，可以插入生成的内容，并设置其样式；
body:after {content: 'The End.'; display: block}
//在body元素最后插入文本内容'The End.'，并设置其为块元素
1.11、属性选择器
**属性选择器：**属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；当然，也可以同时匹配多个属性；
语法：
语法：
[attr]
[title] {margin-left: 10px}
//选择具有 title 属性的所有元素；
[attr=val]
[title = 'this'] {margin-right: 10px}
//选择属性 title 的值等于 this 的所有元素
[attr^=val]
[title ^= 'this'] {margin-left: 15px}
//选择属性title的值以this开头的所有元素
[attr$=val]
[title $= 'this'] {margin-right: 15px}
//选择属性title的值以this结尾的所有元素
[attr*=val]
[title *= 'this'] {margin: 10px}
//选择属性title 的值包含 this 的所有元素
[attr~=val]
[title ~= 'this'] {margin-top: 10px}
//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔
[attr|=val]
[title |= 'this'] {margin-bottom: 10px}
//选择属性 title 的值等于this，或值以 this- 开头的所有元素
2、选择器的应用实例（未完待续）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1.全局选择器*/
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-size: 14px;
}
/*2.标签选择器*/
p{
width: 60%;
/*height: 30px;*/
line-height: 30px;
text-align: center;
border: 1px solid red;
margin: 10px;
}
/*3.ID选择器*/
#div{
width: 50%;
margin: auto;
border: 2px solid orangered;
border-radius: 30px;
margin-top: 50px;
padding: 30px;
}
/*4.类(class)选择器*/
.lei{
font-size: 30px;
color: red;
}
/*5.属性选择器*/
[name]{
font-size: 24px;
font-style: italic;
}
/*6.子元素选择器*/
ul>li{
background-color: #DDDDDD;
}
/*7.兄弟(相邻)选择器*/
li+li{
font-weight: bold;
}
/*8.伪类选择器*/
a:link{
color: gold;
}
a:visited{
color: blueviolet;
}
a:hover{
color: orangered;
}
a:active{
color: aqua;
}
/*9.后代选择器*/
ul li a{
border: 1px solid black;
margin:15px;
}
/*10.伪元素选择器*/
p:first-letter{
font-size: 50px;
padding-right: 120px;
}
li:nth-child(1):first-line{
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li><a href="" name="">百度</a></li>
<li class="lei">淘宝</li>
<li class="lei"><a href="">CSDN</a></li>
<li><a href="">美团</a></li>
</ul>
<ul>
<li class="lei"><a href="">项目1</a></li>
<li><a href="">项目2</a></li>
<li><a href="" name="name">项目3</a></li>
<li class="lei"><a href="">项目4</a></li>
</ul>
<p class="lei">我是第一行</p>
<p>我是第二行</p>
<p>我是第三行</p>
<p><a href="#">我是第四行</a></p>
</div>
</body>
</html>
3、选择器使用注意的问题点：(未完待续，待使用过程中发现总结)
1、由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序，否则可能会导致显示不出来所要的效果。
2、选择器的优先级顺序
**总结：**内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器
使用选择器过程之中也尤其需要注意优先级的问题，在实际应用过程当中很可能我们的代码没有问题，但是却发现所选择的元素的效果始终不能生效，这个时候我们也许应该会回过头来想想是不是选择优先级的问题。未完待续…