css选择器
CSS选择
- CSS 元素选择器
- CSS 选择器分组
- CSS ID 选择器详解
- CSS 类选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素
div{
background: pink;
}
*
*{
background: pink;
}
说明：选择所有元素
，
div,p{
background: pink;
}
说明：选择所有 <div> 元素和所有 <p> 元素。
css 多类选择器
.important{
background: red;
}
.warning{
color : blue;
}
.important.warning{
border: 1px solid black;
}
<p class="important warning">
This paragraph is a very important warning.
</p>
注： 1.class 的顺序可以不同，但是类名不能错2. .important.warning之间不能有空格
#div1{
background:pink;
}
<div id=’div1’></div>
注：id选择器在一个文档中只能出现一次，ID 属性不允许有以空格分隔的词列表，区分大小写（这些有特殊的条件的原因js通过id确定唯一的一个元素）
1.简单的类选择器
.div1{
background:pink;
}
<div class=’div1’></div>
2.结合元素选择器
p.test{
background: pink;
}
<div class='test'>abc</div>
<p class='test'>abc</p>
[attribute]
用于选取带有指定属性的元素。
[attribute=value]
用于选取带有指定属性和值的元素。
[attribute~=value]
用于选取属性值中包含指定词汇的元素。
[attribute|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]
匹配属性值以指定值开头的每个元素。
[attribute$=value]
匹配属性值以指定值结尾的每个元素。
[attribute*=value]
匹配属性值中包含指定值的每个元素。
1） [attribute]
a[href] a元素有href 属性
2） [attribute = value]
a[href=”abc”] a元素href 等于abc的
3） [attribute~=value]
适用于属性为多个属性值的
Eg:
p[class~=”panel”]{
background:pink;l
}
<p class=’panel test1’>abc</p>
<p class=’panel test2’>edc</p>
注：value 必须是 panel 或者是test1 才能够匹配到第一个元素p
4） [attribute^=value] 和 [attribute|=value]
这两个都是以匹配以什么开头的，特殊的是：| 该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。
空格
div p{
background:pink;
}
包括在div 中的所有p元素
>
div > p{
color: red;
}
匹配div的子元素
<div>
<p>abc</p>
</div>
<p>bcd</p>
<div>edf</div>
<span><p>ded</p></span>
<p>ded</p>
+
Div + p{
Color:red;
}
选取div 的后面的第一个p
~
Div + p{
Color:red;
}
选取div 的后面所有兄弟元素p
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
:active
向被激活的元素添加样式。
:focus
向拥有键盘输入焦点的元素添加样式。
:hover
当鼠标悬浮在元素上方时，向元素添加样式。
:link
向未被访问的链接添加样式。
:visited
向已被访问的链接添加样式。
:first-child
向元素的第一个子元素添加样式。
:lang
向带有指定 lang 属性的元素添加样式。
:first-letter
向文本的第一个字母添加特殊样式。
:first-line
向文本的首行添加特殊样式。
:before
在元素之前添加内容。
:after
在元素之后添加内容。