Css选择器
选择器类型 |
代码 |
选择所有元素 |
Style元素:*{} |
根据类型选择元素 |
Style元素:a{} Body元素:<a>内容</a> |
根据类选择元素 |
Style元素:.class1{} Body元素:<p class=”class1”>内容</p> |
根据ID选择元素 |
Style元素:#id1{} Body元素:<p id=”id1”>内容</p> |
根据属性选择元素 |
Style元素:[href] {} Body元素:<a href=”1cssprimary”>内容</a> |
:选择器动作 |
Style元素:a:hover{} Body元素:<a>内容</a> |
派生选择器:下面这段代码的意义是:li标签中的strong标签将被设置成如下效果
li strong{
color:blue;font-size:20px;
}
属性和值选择器:
如果在style中title的值没有给出,那么body中怎么写无所谓。如果给定了,则必须在body中按照给定的相应的值。
选择器扩展:
|
A |
B |
C |
一 、元素选择器
|
h1 { } |
|
|
二 、选择器分组 |
h1,h2{ }
|
*{ } |
|
三.、类选择器
|
.xx{ } |
a.class{ } 结合元素选择器 |
.class.class{ }多类选择器 |
四、id选择器
|
#xx{ } |
|
|
五、属性选择器 |
[title]{ }
|
[href="xx"]{ }
|
[title~="title"]{ }
|
六、后代选择器 |
p strong i{ }
|
|
|
七、子元素选择器
|
h1>strong{ }
|
|
|
八、相邻兄弟选择器
|
p+h1{ }
|
|
|