老徐WEB：深入学习CSS选择器

快来打我* 2023-07-03 02:40 9阅读 0赞

什么是CSS选择器，什么时候需要CSS选择器，这是网页制作及开端开发者们经常碰到 的问题。

在网页制作过程中，HTML用来制作网页框架，然后就需要给网页添加样式，类似房屋装修一样，装饰整个页面，此时就得需要用到CSS选择器了。

CSS选择器就是对HTML页面中的元素进行控制操作的表示方法。也就是HTML页面中的元素是通过CSS选择器控制的。

CSS选择器的基本用法是：CSS选择器\{CSS属性:属性值\}。

CSS选择器有多种类型，下面就按类型一一说明。

1.1 类别选择器，就是通过类名来选择HTML页面中的元素，以“.”来标志。比如：

.class_name {
    	color:red;
    	background-color:blue;
    }

这就是一个基本的类别选择器样式，通过类名选择HTML中的元素。在HTML页面中，给某个元素定义一个class属性，class的值便是class\_name，如下。

<div class="class_name">这个区域字体为红色，背景为蓝色</div>
    <p class="class_name">这个区域字体为红色，背景为蓝色</p>
    <p>这个区域字体使用默认颜色</p>

在浏览器中打开，就能发现所有class为class\_name的元素都使用的样式。

1.2 标签选择器，一个HTML页面中有多个不同的标签构成。那么某个标签选择器就代表选中了某个HTML标签。例子如下：

p {
    	color:red;
    	background-color:blue;
    }

上面的CSS样式作用于HTML中所有的p标签，也就是HTML中所有的p标签都会用到这个样式。

1.3 ID选择器，跟类别选择器类似，通过ID名来选择HTML页面中的元素，需要注意的是ID在HTML页面中是唯一的，以“\#”来标志。比如：

#id_name {
    	color:red;
    	background-color:blue;
    }

这就是一个基本的ID选择器样式。那么相应的在HTML页面中，给某个元素定义一个id属性，id的值是id\_name，如下。  
<div id="id\_name">这个区域字体为红色，背景为蓝色</div>  
因为ID在HTML页面中是唯一的，所以此处只能用一个id是id\_name的元素来举例。

1.4 后代选择器，选择特定元素的后代，父元素放前面，子元素放后面，中间有空格分开（特别注意空格），后代不一定是直接下一代，也可能是隔代的。后代选择器不仅仅只能两个，可以有多个，中间要用空格隔开，如下。

.nav .user{
    	color:red;
    	background-color:blue;
    }

这就是后代选择器样式的基本结构。那么相应的在HTML页面中，至少要有两层结构，外层是class为nav的，内层是class为user的。比如：

此时CSS样式只作用于user name，而xxx保持默认样式。

1.5 子选择器，跟后代选择器很像，一定要注意两者的区别。子选择器是直接下一代，而后代选择器是可以隔代的；子选择器用“>”隔开，后代选择器用“ ”隔开。看一个两者对比的事例。

.nav a{
    	color:blue;
    }
    .nav > a{ // 注意此处产品一个样式覆盖。
    	color:red;
    }
    
    HTML如下：
    <div class="nav">
    	<a>所有产品</a>
    	<span><a>所有服务商</a></span>
    	<span><a>购买</a></span>
    </div>

用浏览器打开，我们看到“所有产品”是红色的，其他是蓝色的。因为子选择器一定是直接下一代，后代选择器可以是直接下一代，也可以是隔代的，注意此处子选择器对后代选择产生样式覆盖。

1.6 伪类选择器，也是作用于HTML页面中的标签，只是有些特殊，比如鼠标悬停。下面是链接应用的伪类样式。

a:link {
    	color:#999;
    }
    a:visited {
    	color:#ff0;
    }
    a:hover {
    	color:#060;
    }

1.7 通用选择器，用“\*”来表示，比如：

* {
    	font-size:12px;
    }
    表示所有元素的字体大小都是12px。
    p * {
    	font-size:12px;
    }
    表示所有p元素的后代的字体大小都是12px。

1.8 群组选择器，当多个元素的样式一样时，可以同时定义CSS样式，中间用逗号“,”隔开。比如：

div, p, span {
    	color:#999999;
    	line-height:18px;
    }
    .main p, .nav span {
    	color:#666666;
    }

使用群组选择器，将大大简化CSS代码，提高编码效率，减少CSS文件体积。

1.9 相邻同胞选择器，上面我们提到了后代和子选择器，而相邻同胞选择器是选择兄弟中的一个。用“+”和“~”表示，“+”代表兄弟间按顺序的，不跳过任何人，“~”代表兄弟间按顺序的，可以跳过任何人。

h1 ~ p {
    	color:red;
    }
    h1 + p {
    	color:blue;
    } 
    h1 ~ p 表示h1的所有p兄弟，h1 + p表示紧跟h1的兄弟。
    <div>
    	<h1>CSS学习</h1>
    	<p>CSS属性</p>
    	<p>CSS选择器</p>
    	<p>CSS伪类</p>
    </div>

用浏览器打开，可以看到第一个p元素是蓝色，其他两个p元素是红色。

1.10 属性选择器，利用HTML页面中元素的属性来定义CSS样式。表示如下：

\[name\] - input\[name\] \{color:red\} 表示选择所有具有name属性的p元素。  
\[name='test'\] - input\[name='test'\] \{color:red\} 表示选择所有属性是name='test'的input元素。  
\[name^='test'\] - input\[name^='test'\] \{color:red\} 表示选择所有属性是name的值以test开头的input元素。  
\[name$='test'\] - input\[name$='test'\] \{color:red\} 表示选择所有属性是name的值以test结尾的input元素。  
\[name\*='test'\] - input\[name\*='test'\] \{color:red\} 表示选择所有属性是name的值包含test的input元素。  
\[name~='test'\] - input\[name\*='test'\] \{color:red\} 表示选择所有属性是name的值包含一个空格分隔的词为test的input元素，即name的值里必须要有test这个单词，且test与其他单词有空格分隔。  
\[name|='test'\] - input\[name\*='test'\] \{color:red\} 表示选择所有属性是name的值等于test，或以test-开头的input元素。

1.11 伪元素选择器，作用于HTML页面中标签内部的部分行为。比如：  
:first-letter，设置块元素首字母样式。  
:first-line，设置第一行文本样式。  
:before，设置标签前面的样式，可以插入生成的内容。  
:after，设置标签后面的样式，可以插入生成的内容。

1.12 结构性伪类选择器，结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；  
带括号的选择器，里面一定要有参数；匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；  
:first-of-type，同代里同类元素中的第一个。  
/\*代表此元素（class="ft"）同代里同类元素中的第一个。\*/  
.ft:first-of-type \{color: \#f00\}  
/\*代表此元素（class="box"）同代里同类元素中的第一个。\*/  
/\*.box:first-of-type \{color: \#f00\}\*/  
/\*代表此元素（class="box"）后代里同类元素中的第一个，又是此元素（class="ft"）同代中第一个元素。\*/  
/\*.box .ft:first-of-type \{color:\#f00;\}\*/  
:last-of-type，同代里同类元素中的最后一个。  
HTML页面如下：

<div class="box">
    	<h1>First H1</h1>
    	<h2>First H2</h2>
    	<span>First span</span>
    	<p class="ft">First p<span>First span</span><span>Second span<i>First i</i></span><i>First i</i></p>
    	<p class="ft">Second p<span>First span</span></p>
    	<div>First div<strong class="ft">First strong</strong><strong>Second strong</strong></div>
    	<div class="ft">Second div<span>First span</span><span>Second span</span></div>
    </div>
    <div>
    	<h1>First H1</h1>
    </div>

CSS选择器还是挺多的，需要多练习才能理解并记住，有时候就算记住了，过段时间不用还是会忘记的。CSS的练习还是很简单的，直接创建一张HTML文件就可以编写了，调试也很方便。