CSS3关系选择器、属性选择器
属性选择器
属性选择器可以根据元素的属性和属性值来选择元素，CSS3中新增的3种属性选择器：
E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value的子字符串。
范例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id^=one]{ /* 只要是前缀即可，也可以是p[id^=o]或p[id^=on] */
color:red;
}
</style>
</head>
<body>
<p id="one">
床前明月光，
</p>
<p id="two">
疑是地上霜。
</p>
<p id="one1">
举头望明月，
</p>
<p id="two2">
低头思故乡。
</p>
</body>
</html>
复制代码
image.png
第一句和第三句的id属性都包含字符串one，所以这两句的字体被修改为红色。
E[att$=value]是选择属性值包含后缀为value的子字符串E[att*=value]是选择属性值包含value的子字符串，例如：div[id*=section]
表示匹配包含id属性，且id属性值包含"section"字符串的div元素。
⚠️以上三种属性选择器E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。
关系选择器
1.子代选择器(>)
子代选择器主要用来选择某个元素的第一级子元素。
<body>
<h1><strong>这</strong>是一个<strong>例子。</strong>
<h1>这<em><strong>又是一个</em></strong>例子。</h1> /*关系h1>em>strong*/
</body>
复制代码如：希望选择只作为h1元素的子元素的strong元素，可以这样写：
<style>
h1 > strong{
color = red;
}
复制代码
image.png
h1中包含两个strong，都符合子代关系。
2.兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素。
- 临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器，选择器中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。(老大跟老二，老二跟老三)
- 普通兄弟选择器(～):该选择器使用‘～’来链接前后两个选择器，选择器中的两个元素有同一父亲，但第二个不必紧跟第一个元素。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录