1.派生选择器
包含三个 后代选择器;子类选择器;相邻兄弟选择器
后代选择器:
p span {color:red;}
子类选择器:(子的意思就是儿子,而该标签下的其他子标签不起作用)
p > span{color:red;}
相邻兄弟选择器,只对相邻兄弟内的内容产生影响,而兄弟内的其他标签内的内容无影响
p + span{color:red;}
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
a span {
color: red;
}
a > span {
color: green;
}
span + div {
color: pink;
}
</style>
</head>
<body>
<a>
<div><span>fdsfsd</span></div>
</a>
<a><span>wsc</span><div>bb<span>sss</span></div>
</a>
</body>
</html>
效果图如下:
类选择器: .sp{color:red;} .sp td{color:red} (只对类为sp的标签内的td影响) td.sp{td内的类为sp的元素影响}
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.aa td {
color: red;
border: dashed 1px black;
}
td.bb {
color: green;
border: dashed 1px green;
}
</style>
</head>
<body>
<a class="aa">
<table>
<tr>
<td>这是个单元格
</td>
</tr>
</table>
</a>
<table>
<tr>
<td class="bb">这是个单元格
</td>
</tr>
</table>
<a class="bb">非td内的bb类标签无影响</a>
</body>
</html>
效果图:
3.ID选择器
ID选择器 #xxx{color:red;} ID选择器和后代一起使用 #xxx span{color:red;}
代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#newA {
color: red;
border: dotted 1px black;
padding: 5px;
}
#newB b {
color: blue;
}
#newB span {
color: green;
}
#newB {
border: ridge 1px green;
padding: 5px;
}
</style>
</head>
<body>
<a id="newA">ID为newA的<a>标签为红色</a>
<a id="newB">ID为newB的a标签内的b元素为<b>蓝色</b>
span元素内的为<span>绿色</span></a>
</body>
</html>
效果图:
属性选择器:
格式为:[value]{color:red;} [value=xxx]{color:red} [value~=xxx]{color:red}
[value],[value=css] 这两个无需比较
[value~=css] 匹配css是个完整的词,不管前后,例如css; css a;a css; 但是css-a就不行。
[value*=css] 匹配的只要是value值内有css出现就行,不管是不是单独的词或者在前在后,例:csss,s-css,css-a
[value|=css] 匹配的只有两种形式 例如:css;css-afd
[value$=css] 匹配的是css结尾 例如:1css;1-css;1 css;
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
border: dotted 1px green;
width: 300px;
margin: 5px;
}
[val] {
color: red;
}
[val1=css] {
color: blue;
}
[val2~=css] {
color: gray;
}
[val3*=css] {
color: hotpink;
}
[val4$=css] {
color: yellowgreen;
}
[val5|=css] {
color: blanchedalmond;
}
</style>
<div>
<a val="s">val</a>
</div>
<div>
<a val1="css">val1</a>
<a val1="csss">val1</a>
</div>
<div>
<a val2="css aa">val2</a>
<a val2="csss">val2</a>
<a val2="css-s">val2</a>
<a val2="1 css s">val2</a>
</div>
<div>
<a val3="css">val3</a>
<a val3="csss">val3</a>
<a val3="csss-cs">val3</a>
<a val3="ss-css">val3</a>
</div>
<div>
<a val4="1css">val4</a>
<a val4="1-css">val4</a>
<a val4="1 css">val4</a>
<a val4="cscss">val4</a>
</div>
<div>
<a val5="css">val5</a>
<a val5="css-s">val5</a>
<a val5="css s">val5</a>
<a val5="css^s">val5</a>
<a val5="csss">val5</a>
<a val5="s css">val5</a>
</div>
</head>
<body>
</body>
</html>
效果图如下: