选择器学习
标签选择器
样式表
<style>
p {color:red;}
</style>
html代码
<div>
<p>这是一个段落</p>
</div>
类选择器
总结：.classname ，以“.”开头，命名比较以字母开头，数字“-”,“_” 区分大小写，可以出现多次。
样式表
<style>
.mian {color:red;}
</style>
html代码
<div>
<p class="mian">这是一个段落</p>
</div>
ID选择器
总结：#id ,以“#”开头，命名比较以字母开头，数字“-",“_” 区分大小写，页面只可以出现一次。
样式表
<style>
#mian {color:red;}
</style>
html代码
<div>
<p id="mian">这是一个段落</p>
</div>
通配符选择器
总结：通配符选择器可以选择整个页面样式。
样式表
<style>
*{color:red;}
</style>
html代码
<div>
<p class="mian">这是一个段落</p>
</div>
属性选择器-[att]
<style>
[disabled]{
color: #cc0000;
}
</style>
</head>
<body>
<form action="">
<div><input disabled type="text" value="张三"></div>
<div><input type="text"></div>
属性选择器-[att=val]
<style>
[type=button]{
color: #cc0000;
}
</style>
</head>
<body>
<form action="">
<div><input type="text" value="文本框"></div>
<div><input type="button" value="按钮"></div>
</form>
</body>
id选择器就是这个属性选择器的一个特例
#nav{}==[id=nav]{}
属性选择器-[att~=val]
<title>Title</title>
<style>
[class~=sports]{
color: #cc0000;
}
</style>
</head>
<h2 class="title sports">标题</h2>
<p class="sports">内容</p>
类选择器就是这个属性选择器的一个特例
.sports{}==[class~=sports]{}
属性选择器-[att^=val]
<style>
[href^="#"] {
color: #red;
}
</style>
</head>
<body>
<a href="http://www.qq.com";>qq</a>
<a href="#html">111111</a>
<a href="#css">11111111</a>
</body>
属性选择器-[att$=val]
<style>
[href$=pdf]{
color: #cc0000;
}
</style>
</head>
<body>
<a href="http://xxx.doc";>miss.doc</a>
<a href="http://xxx.pdf";>ints.pdf</a>
</body>
浙公网安备 33010602011771号