css选择器的分类有哪些-Soal Jawab bahagian hadapan-php.cn

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

css选择器的分类有哪些

May 20, 2021 pm 05:39 PM

css pemilih

css选择器的分类有：1、标签选择器；2、类选择器；3、ID选择器；4、全局选择器；5、组合选择器；6、继承选择器；7、伪类选择器；8、字符串匹配的属性选择符。

css选择器的分类有哪些

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css选择器的种类是有很多的，下面我们就来看一看css选择器的类型

1、标签选择器（如：body,p,p,ul,li）。

2、类选择器（如：class=“head”,class=“head_logo”）。

3、ID选择器（如：id=“name”,id=“name_txt”）。

4、全局选择器（如：*号）。

5、组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。

6、继承选择器（如：p p,注意两选择器用空格键分开）。

7、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）。

8、字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 。

上述八种css选择器中最常用的css选择器是标签选择器、.类选择器、ID选择器、属性选择器、伪类选择器。

下面我们就分别对这五个css选择器来举一个例子：（其他选择器例子可以参考css手册）

（1）标签选择器：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        p{
            color: red;
            font-size: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p&gt;余生有你&lt;/p&gt;
    &lt;p&gt;幸得安喜&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

效果如下：

CX8Q3}_M~_Q~64YVPJ}3RZ7.png

（2）.类选择器：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        .class1{
            background-color: blue;
        }
        .class2{
            background-color: brown;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;class1&quot;&gt;div&lt;/div&gt;
    &lt;div class=&quot;class2&quot;&gt;div&lt;/div&gt;
    &lt;div class=&quot;class3&quot;&gt;div&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

效果如下：

$Z7$_ATL}}T7OHBI0Q{}(SM6.png$

（3）ID选择器：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        #class1{
            background-color: blue;
        }
        #class2{
            background-color: brown;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;class1&quot;&gt;div&lt;/div&gt;
    &lt;div id=&quot;class2&quot;&gt;div&lt;/div&gt;
    &lt;div id=&quot;class3&quot;&gt;div&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

效果如下：

$Z7$_ATL}}T7OHBI0Q{}(SM6.png$

（4）属性选择器：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        
        div[id=class2]{
            background-color: brown;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;class1&quot;&gt;div&lt;/div&gt;
    &lt;div id=&quot;class2&quot;&gt;div&lt;/div&gt;
    &lt;div id=&quot;class3&quot;&gt;div&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

效果如下：

520GAV8_@1EFQ0J]3D`3UL7.png

（5）伪类选择器：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        a:link{
           color: brown;
           background: cornsilk;
        }
        a:hover{
           text-decoration: none;
           color: rgb(252, 0, 0);
        }
        a:active{
            background: rgb(202, 0, 175);
            color: rgb(59, 59, 59);
        }
        a:visited{
            color: brown;
            background: cornsilk;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;a href=&quot;#&quot;&gt;哈喽，看我，你在干什么&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

效果：

推荐学习：css视频教程

Atas ialah kandungan terperinci css选择器的分类有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn