css选择器(2)——属性选择器和基于元素结构关系的选择器

最新推荐文章于 2024-07-10 23:34:24 发布

我爱丁丁猫

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量172

点赞数

分类专栏：前端文章标签： css css选择器父子选择器祖先选择器相邻兄弟选择器属性选择器属性值选择器

原文链接：https://www.mk2048.com/blog/blog.php?id=h0j0ihk0h1ib&title=css%E9%80%89%E6%8B%A9%E5%99%A8%282%29%E2%80%94%E2%80%94%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8%E5%92%8C%E5%9F%BA%E4%BA%8E%E5%85%83%E7%B4%A0%E7%BB%93%E6%9E%84%E5%85%B3%E7%B3%BB%E7%9A%84%E9%80

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。

3.属性选择器

　　a)根据是否存在该属性来选择

　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：

/*根据单个属性来选择*/
h1[class]{
    color:sliver;
}
/*还可以根据多个属性来选择*/
h1[class][id]{
　　color:yellow;
}

　　b)根据具体属性值来选择　

　　<style>

　　　　/*也可以利用多个属性值来选择,第二段变成了红色*/

　　　　p[class='one'][alt='two']{
　　　　　　color:red;
　　　　}
　　</style>
　　<body>
　　　　<p class='one'>一个class属性</p>
　　　　<p class='one' alt='two'>一个class属性加上一个alt属性</p>
　　</body>

　　c)根据部分属性值来选择

　　~=：如果属性能够接受词列表，可以根据其中的任意一个词进行选择。

　　*=word1：选择属性值中包含word1的所有元素

　　^=start：选择属性值中以start开头的所有元素

　　$=end：选择属性值中以end结尾的所有元素

<style>
    p[class~='bar']{
        color:red;
    }
    p[class*='wo']{
        color:blue;
    }
    p[class^='th']{
        color:yellow;
    }
    p[class$='ur']{
        color:purple;
    }
</style>
<body>
        <p class='one bar'>one</p><!--红色-->
        <p class='one bard'>与上一段作为对比</p><!--默认颜色-->
        <p class='two ok'>two</p><!--蓝色-->
        <p class='three'>three</p><!--黄色-->
        <p class='four'>four</p><!--紫色-->
</body>

　　d)特定属性选择器

　　　　直接看例子：

/*选择src属性等于figure或者以figure-开头的元素*/
img[src|='figure']{
    border:1px;
}

4.基于文档结构的选择器

　　a)后代选择器——使用空格分隔：

　　　　选择h1中的所有em元素：

h1 em{
    color:gray;
}
/*当然并不限于两个选择器，例如：*/
/*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
p span em{
　　color:em
}

　　b)子元素选择器——使用>号分隔

　　　选择h1的子元素而不是后代元素

<style>
    h1 > em{
        color:red;
    }
</style>
<body>
        <h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1>
</body>

　　c)相邻兄弟（不能是堂兄弟，即拥有相同的父元素）选择器——使用＋号分隔　

<style>
    p   h1{
        color:red;
    }
</style>
<body>
    <p>第一段</p>
    <h1>第二段</h1><!--颜色变红-->
    <h1>第三段</h1><!--颜色不变-->

</body>

更多专业前端知识，请上【猿2048】www.mk2048.com

我爱丁丁猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器(2)——属性选择器和基于元素结构关系的选择器

在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。 3.属性选择器　　a)根据是否存在该属性来选择　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1...
复制链接

扫一扫