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(注:是:: )设置元素中被用户长按鼠标拖动选中部分的样式,只可以应用于少数的CSS样式:color、background、cursor和outline
<style>
p::selection{color:red;background:yellow;}
p::-moz-selection{color:red;background:yellow;}
</style>
<div>
<p>测试first-line和first-letter的第一个行文字</p>
<p>测试first-line和first-letter的第二个行文字</p>
<p>测试first-line和first-letter的第三个行文字</p>
</div>