CSS选择器
是在原先的CSS基础上延伸出来的,为了更方便、快捷的选中元素,有利于开发人员的开发
- div+p
-紧邻选择器:div后面紧邻的第一个p标签 - div[id]
所有带有id属性的div(不考虑id名字是什么) - p[class=box]
所有class类名为box的p标签 - div[class~=box]
所有class名中包含box的div格式
div[class~=box]{
background-color: green;
}
<div class="box" style="display: inline-block;"></div>
<div class="box a" style="display: inline-block;"></div>
<div class="box po" style="display: inline-block;"></div>
- div[class|=en]
- 所有class类名中以en开头的div
- 格式必须 en-glish
- 直接englishe不生效
[name|=en]{
background: red;
}
<div name="en-lish" style="display: inline-block;"></div>
<div name="english" style="display: inline-block;"></div>
- div[class^=u]
- 所有class类名以u开头的div
div[class^=u]{
background-color: purple;
}
<div class="use" style="display: inline-block;"></div>
<div class="user" style="display: inline-block;"></div>
<div class="use-name" style="display: inline-block;"></div>
<p class="use-name" style="width: 100px;height: 100px;border: 1px solid;"></p>
- div[class$=r] 所有class类名以r结尾的div
div[class$=r]{
display: inline-block;
color: red;
}
<div class="user">后悔</div>
<div class="marker">绝望</div>
<p class="user" >123</p>
- div[class*=o] 所有class类名包含o的div
div[class*=o]{
color: white;
background-color: #BE1E31;
display: inline-block;
text-align: center;
font-size: 20px;
}
<div class="cook">皓月</div>
<div class="col">美人</div>
- : link
选择器用于选取未被访问的链接 : - visited
选择器用于选取访问过的链接 : - active
选取正在点击的链接(设置链接点击效果)
a:link{
color: forestgreen;
}
a:visited{
color: purple;
}
a:active{
font-size: 24px;
}
<a href="../音乐视频/播放器修改版.html">234</a>
<a href="css选择器.html">cs</a>
- :after
选中元素后面插入内容 - :before
选中元素前面插入内容
#me:before{
content: "你好,";
}
#me:after{
content: "朋友!";
}
<span id="me">我的</span>
/* :first-letter 选择每个元素的首字母*/
p:first-letter{
font-size: 40px;
}
/* :first-line 选择每个元素的首行*/
div:first-line{
color: red;
}
/* :first-child 选择属于其父元素的首个子元素*/
.one:first-child{
border: 1px solid;
height: 20px;
}
- 单一类型
/* p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素*/
body div:first-of-type{
display: none;
}
/* p:last-of-type 指定父元素的最后一个 p 元素*/
/* p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 */
/* p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 */
/* p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数 */
- 多类型
/* p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素*/
/* p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素 */
/* p:nth-last-child(2) 同上,从最后一个子元素开始计数 */
/* first-child 匹配父元素下第一个子元素*/
/* p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素 */
/* :root 选择文档的根元素 */
/* p:empty 选择没有子元素的每个 <p> 元素(包括文本节点 */
/* #news:target 选择当前活动的 #news 元素 */
:target{
background: red;
}
/* input:enabled 选择每个启用的 <input> 元素 */
/* input:disabled 选择每个禁用的 <input> 元素 */
/* input:checked 选择每个被选中的 <input> 元素 */
/* ::selection 选择被用户选取的元素部分 */
::selection{
background:red;
}
- :not( p)设置非元素的所有元素
开启该案例会使得所有的元素隐藏
/*:not(p){
display: none;
}*/