css 选择器就是选取需设置样式的元素(标签),比如如下css代码:
div {
color:red;
}
如上代码中的 div
就是 css 中的选择器。
元素选择器
格式:
元素名称{
color: red;}
特例*,范围是所有标签
* {
color: antiquewhite;}
举例
<div>
<p>
123456
</p>
<span>123456</span>
</div>
div {
color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
属性选择器
元素名称[标签]----元素名称Element 标签attribute
举例
<div>sdfgs</div>
<div id="zz">123</div>
<div id="xxzz">123</div>
<div id="zzxxyy">456</div>
<div id="zzgg">456</div>
div[id] {
color: red
}
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
“value 是完整单词” 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:
[attribute~=value] 属性中包含独立的单词为 value,例如:
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:
[lang|=en] --> <p lang="en"> <p lang="en-us">
[attribute^=value] 属性的前几个字母是 value 就可以,例如:
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以,例如:
a[src$=".pdf"]
ID选择器
id选择器
格式:
#id属性值{
color: red;}
例子:
<div id="name">hello css2</div>
#name{
color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/