css选择器

最新推荐文章于 2023-02-09 22:09:43 发布

wll_blogs

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量243

点赞数

分类专栏： css3 文章标签： css选择器 css属性选择器

本文链接：https://blog.csdn.net/wll_web/article/details/103406925

版权

css3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS选择器

1.基本选择器
2.基本选择器扩展
3.属性选择器

1.基本选择器

通配符选择器（*）。

* {margin:0;padding:0}

元素选择器（元素名/标签名）。

div{background:red}

类选择器（.class）。

.inner{color:red}

id选择器（#id）。

#box{border:1px solid}

后代选择器（元素下面的子元素）。

table tr td{color:red}

2.基本选择器扩展

子元素选择器（>）。
它也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素。

#box > .inner{border:1px solid red}

相邻兄弟选择器（+）。
它只会匹配紧跟着的兄弟元素。

#box + .inner{border:1px solid red}

通用兄弟选择器（~）。
它会匹配之后所有的兄弟元素(不需要紧跟)。

#box ~ .inner{border:1px solid red}

选择器分组（,）。
此处的逗号我们称之为结合符。

h1,h2,h3{color:red}

3.属性选择器

[attr]：该选择器选择包含attr属性的所有元素,不考虑attr的值。
[attr = val]：该选择器仅选择attr属性被赋值为val的所有元素。
[attr ~= val]：表示带有以attr命名的属性的元素,并且该元素是一个以空格作为分隔的值列表,其中至少一个值为val。
[attr |= val]：选择attr属性的值仅是val(包括val)或以val-开头的元素。
[attr ^= val]：选择attr属性的值以val开头(包括val)的元素。
[attr $= val]：选择attr属性的值以val结尾(包括val)的元素。
[attr *= val]：选择attr属性的值中包含字符串val的元素。
案例如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>属性选择器</title>
  <style>
	div[name]{color:red}
	div[name = "cc"]{color:blue}
	p[tar ~= "cc"]{color:red}
	div[tar |= "aa"]{color:blue}
	p[name ^= "aa"]{color:red}
	span[name $= "aa"]{color:blue}
	span[tar *= "aa"]{color:red}
  </style>
 </head>
 <body>
  <div name="dd">1111</div>
  <div name="cc">2222</div>
  <div name="dd">3333</div>
  <div name="dd">4444</div>
  <div name="dd">5555</div>
  <br>
  <p tar="cc dd">aaaa</p>
  <p tar="aa cc">bbbb</p>
  <p tar="aa">cccc</p>
  <p tar="cccc">dddd</p>
  <p tar="cc">eeee</p>
  <br>
  <div tar="aa-dd dd">1111</div>
  <div tar="aa sss">2222</div>
  <div tar="aa">3333</div>
  <div tar="aaaa">4444</div>
  <div tar="aa">5555</div>
  <br>
  <p name="aaaaa">aaaa</p>
  <p name="aasdsd">bbbb</p>
  <p name="saa">cccc</p>
  <p name="aa df">dddd</p>
  <p name="aa">eeee</p>
  <br>
  <span name="aa">1111</span>
  <span name="aaaa">2222</span>
  <span name="ss aa">3333</span>
  <span name="aa dd">4444</span>
  <span name="aadd">5555</span>
  <br>
  <span tar="aa">1111</span>
  <span tar="aaaa">2222</span>
  <span tar="ss aa">3333</span>
  <span tar="aa dd">4444</span>
  <span tar="aadd">5555</span>
 </body>
</html>