Heim > Web-Frontend > HTML-Tutorial > Css3选择器(二)_html/css_WEB-ITnose

Css3选择器(二)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:48:48
Original
1184 Leute haben es durchsucht

一、ID选择器

    ID选择器类似于类选择器,不过也有一些重要差别

        例如:#id{}


二、类选择器和ID选择器的区别

    ID只能在文档中使用一次,而类可以多次使用

<div id="myDiv">HelloWorld</div><div class="div1"></div><div class="div1"></div><div class="div1"></div>
Nach dem Login kopieren

ID选择器不能结合使用

当使用JS时需要用到id


三、属性选择器

1.简单属性选择:

例如:[title]{}

<p title="">Hello</p>[title]{    color: aqua;}
Nach dem Login kopieren

2.根据具体属性值选择

除了选择拥有某些的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素

例如:a[href="www.baidu.com"]{};

[href]{    font-size: 30px;}<a href="">百度</a>
Nach dem Login kopieren

3.属性和属性值必须完全匹配

[href="https://www.baidu.com"]{    font-size: 30px;}<a href="https://www.baidu.com">百度</a>
Nach dem Login kopieren

4.根据部分属性值选择

<p title="a">Hello</p><p title="b">Hello</p><p title="c a">Hello</p><p title="d a">Hello</p><p title="ea">Hello</p>[title~="a"]{    font-size: 50px;}
Nach dem Login kopieren


四、后代选择器

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

<p>This is my <strong>web</strong> page</p>p strong{    color: fuchsia;}
Nach dem Login kopieren


五、子元素选择器

1.与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素

它只能选择当前一个层级关系的,如果隔代是不可以的

例如:h1>strong{};

如存在多层,需要逐层找到

p>i{    color: fuchsia;    font-size: 30px;}<p>This is my <strong>web <i>Hello Hello</i></strong> page</p>
Nach dem Login kopieren


六、相邻兄弟选择器

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

注意两点

一个是选择元素后的元素,意味着当前元素是不起效果的

第二点注意二者有相同的父级元素

例如:h1+p{};

li+li{    font-size: 50px;    color: red;}<div>    <ul>        <li>item1</li>        <li>item2</li>        <li>item3</li>    </ul></div>
Nach dem Login kopieren

    这个选择器在实际应用中用的不是特别多,这里稍作了解即可







Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage