css选择器
2018-07-16 本文已影响0人
ZhongQw
- 类选择器
.class
<p class = "p"></p>
.p{
color:red;
...
}
- Id选择器
#id
<p id = "p"></p>
#p{
color:red;
...
}
注意：类选择器可以有多个元素使用，但是同一个id选择器不能重复使用
- 通用选择器
*
*{ //将所有的元素的样式都修改为...
border:0;
padding:0;
...
}
- 元素选择器
p{ //将所有的p元素样式都修改为...
color:red;
...
}
- 子元素选择器
将所有以<div>为父级的<p>的样式都修改为...
div>p{
...
}
或者div p{}
- 相邻兄弟选择器
选择紧邻<div>的<p>
div+p{
color : red;
}
<div></div>
<p>hello world!</p>
- 选择所有带有target属性元素
[target]{
...
}
- 选择所有元素使用属性target为
_blank的元素
[target = _blank] - 选择所有元素使用属性target包括
_blank的元素
[target ~= _blank] - 选择所有元素使用属性target以
blank开头的元素
[target |= blank] - 选择<p>的所有第一个字母
[p"first-letter] - 选择<p>的所有第一行
[p"first-line] - 选择每一个p元素为第一个元素的<p>
p:first-child
<body>
<p>hello</p> //该<p>是<body>的第一个元素
<div>
<p>world!</p> //该<p>是<div>的第一个元素
</div>
</body>
- 在每一个<p>之前 / 之后插入
p:before{ //或者p:after
content:"hello";
}
- 选择一个lang属性的起始值="it"的所有<p>元素
p:lang(it) - 后续兄弟选择器
选择p元素之后的每一个ul元素
p~ul
http://www.runoob.com/cssref/css-selectors.html
