CSS基础---选择器

 

选择器优先级

标签选择器(div) <  类选择器(class="content")  < id选择器(id="unique")  < style属性

 

标签选择器：

div {

color: red;

}

 

类选择器：

.content {

color: green;

}

 

id选择器：

#unique {

color: black;

}

 

style属性：

<div style="key1:value1; key2:value2">xyz</div>

 

扩展选择器

关联选择器

如，只对p标签中的b标签进行设置

<p>xxxxzzzyyyyy</p><p>xxxx<b>zzz</b>yyyyy</p>

p b {

background-color: blue;

color: #FFF;

}

 

组合选择器

对不同选择器进行相同样式的设置

如，对类选择器和标签选择器同时进行设置

<div class="c1">xxxx</div>

<div>abc<b>eee<b>fgh</div>

.c1,div b {

background-color: blue;

color: #FFF;

}

 

伪元素选择器

预定义好的一系列css样式，在某个特定的时候由浏览器自动切换效果

如，a标签具有：

a:link 

a:visited 

a:hover 

a:active

link--->提供超链接标识

取消超链接的下划线

a:link {

 text-decoration: none;

 }

hover--->对div使用悬停效果：

div:hover {

color: white;

}

 

focus--->对具有焦点的元素进行属性设置

input:focus {

background-color:blue;

text-decoration: underline;

}