前置步骤:
1.在网页按住F12或者Fn+F12调出控制台
2.Ctrl+F,调出查找框
css各种查询情况如下:
1.class属性查找
源码:
<span class="vegetable good">黄瓜</span>
语法:.class的属性值;(.是class属性独有的固定语法)
查找框输入:.vegetable
#匹配到了4个,3个是精确匹配,文本黄瓜的class属性是部分包括
查找框输入:.vegetable.good
#class="vegetable good"元素class属性值有2个,可以分别用点“.”表示;
#.vegetable.good或者.good.vegetable(2个值没有顺序关系)
2.通过标签查找
源码:
<body>
<div class="cheese"><span>Cheddar</span></div>
<div class="cheese"><span>Gouda</span></div>
<a href="http://www.baidu.com" id="baidulink">转到百度</a>
<div id="food" style="margin-top:10px">
<span class="vegetable good">黄瓜</span>
<span class="meat">牛肉</span>
<p class="vegetable">黄瓜pp</p>
<p class="vegetable">青菜</p>
</div>
<div id="food2" style="margin-top:10px">
<span class="vegetable">黄瓜2</span>
<span class="meat1">牛肉3</span>
</div>
</body>
查找框输入:div
#使用标签查找,直接输入标签名称;
#(常用的标签使用次数频繁,直接输入匹配的太多,不方便查,一般不单独使用)