• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css属性和关系选择器

上一篇: css伪类选择器

下一篇: css伪元素

css属性和关系选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

Elector[attr] :选择具有attr属性的Elector元素

实例

<div title='标题'>div标签</div>
<style>
    div[title] { color: red; }
</style>

Elector[attr=val] :选择具有attr属性且属性值等于val的Elector元素

实例

<input type='text' />
<style>
    input[type='text'] { background: red; }
</style>

Elector[attr~=val] :选择具有attr属性且属性值包含val的Elector元素。

实例

<input type='text' class='input warning' />
<style>
    input[class~='warning'] { background: red; }
</style>

Elector[attr^=val]:选择具有attr属性且属性值以val开头的Elector元素

实例

<input type='text' class='warning' />
<style>
    input[class^='warn'] { background: red; }
</style>

Elector[attr$=val] :选择具有attr属性且属性值以val结尾的Elector元素

实例

<input type='text' class='warning' />
<style>
    input[class$='ing'] { background: red; }
</style>

关系选择器

关系选择器可以根据元素与元素之间所处关系来选择元素

后代选择器

后代选择器可以选择作为某元素后代的元素

实例

<p>
    <span>文本</span>
</p>
<style>
    p span {color: red;}
</style>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素

实例

<p>
    <span>红色文本</span>
    <span>文本</span>
</p>
<style>
    p>span {color: red;}
</style>

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素

实例

<ul>
    <li>文本</li>
    <li>红色文本</li>
    <li>红色文本</li>
</ul>
<style>
    li+li { color: red; }
</style>

上一篇: css伪类选择器

下一篇: css伪元素