Css：css的属性选择器vs关系选择器及css中伪元素

本文主要是介绍Css：css的属性选择器vs关系选择器及css中伪元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css的属性选择器：

注：属性值只能由数字，字母，下划线，中划线组成，并且不能以数字开头。

1、[属性] 选择含有指定属性的元素，用[]中括号表示。

<style>
[title]{color:red;}
p[title]{color:blue;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

2、[属性=属性值] 选择属性为某值的元素

<style>
/*注意大小写区分 注意前后顺序*/
[title]{color:green}
p[title]{color:#fca600}
p[title=Titlevalue]{color:blue;}
[title=valueTitle]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

3、[属性^=属性值] 选择含有指定属性和指定属性值开头的元素

<style>
/*注意大小写区分 注意前后顺序*/
p[title]{color:green;}
p[title^=title]{color:#fca600;}
[title^=Value]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

4、[属性$=属性值] 选择含有指定属性和指定属性值结尾的元素

<style>
/*注意大小写区分 注意前后顺序*/
/*p[title]{color:green;} 优先级更高*/
div[title$=title]{color:#fca600;}
[title$=Value]{color:red;}
</style><p title="titleValue">属性选择器p标签含有title属性测试</p>
<p title="Titlevalue">属性选择器p标签含有title属性测试</p>
<p>属性选择器p标签无title属性测试</p>
<br>
<div title="valueTitle">属性选择器div标签含有title属性测试</div>
<div title="Valuetitle">属性选择器div标签含有title属性测试</div>
<div>属性选择器div标签无title属性测试</div>

5、[属性*=属性值] 选择属性中含有指定属性值的元素

关系选择器：

1、父>子选择某元素后面紧邻子元素（第一位子元素）

<style>
.father > p {color:red}
.father > .childTwo{color:blue}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p>div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

2、父子选择某元素后面的所有子元素

<style>
.father p {color:red}
.father .childTwo{color:blue}
.childTwo{color:green}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p>div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

3、兄+弟选择紧接在某元素的兄弟元素，二者需有相同父元素

<style>
.father p + .childTwo{color:red}
.childOne + .childTwo{color:blue}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p class="childOne">div无样式p标签子元素 第一个</p>
<p class="childTwo">div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>

4、兄~弟选取某个元素之后的所有相同元素

<style>
.childTwo ~ p{color:red}
.father ~ div{color:blue}
div ~ .childOne{color:green}
</style><div class="father">
<p>div样式为father中p标签子元素 第一个</p>
<p class="childTwo">div样式为father中p标签子元素 第二个</p>
<p>div样式为father中p标签子元素 第三个</p>
</div>
<br>
<div>
<p class="childTwo">div无样式p标签子元素 第一个</p>
<p>div无样式p标签子元素 第二个</p>
<p>div无样式p标签子元素 第三个</p>
</div>
<br>
<div class="childOne">
<div>div无样 第一个</div>
<p>div无样式p标签子元素 第一个</p>
<p>div无样式p标签子元素 第二个</p>
</div>

伪元素：

不在DOM中的元素，但可为其添加样式

1、::before（:before）和::after（:after），注：content是必须的

<style>
div{display:flex;align-items:center;}
div:before{content:'嗨，';color:red}
div:after{content:"";width:10px;height:10px;background:blue;margin-left:5px;}
</style><div>米拉</div>

2、::first-line（:first-line）和::first-letter（:first-letter）

::first-line（:first-line）用于块级元素，设置附属元素第一个行内容的样式

::first-letter（:first-letter）用于块级元素，设置附属元素第一个字母（字）的样式

<style>
div:first-line{color:green;}
div:first-letter{color:red;font-size:24px;}
</style>
<div>
<p>测试first-line和first-letter的第一个行文字</p>
<p>测试first-line和first-letter的第二个行文字</p>
<p>测试first-line和first-letter的第三个行文字</p>
</div>

3、::selection（注：是:: ）设置鼠标长按拖动选中内容的样式

<style>
p::selection{color:red;font-size:24px;}
</style>
<div>
<p>测试first-line和first-letter的第一个行文字</p>
<p>测试first-line和first-letter的第二个行文字</p>
<p>测试first-line和first-letter的第三个行文字</p>
</div>