CSS选择器的详细说明（有误之处请指教）-锐单电子商城

CSS选择器可分为以下几种，包括个人经验~6，8用的最多，7，9用得少：

1.元素选择器 2.类选择器（class） 3.id选择器 4.属性选择器 5.后代选择器和子元素选择器 6.相邻兄弟选择器 7.伪类 8.伪元素

一、元素选择器元素选择器最常见的名称是html元素，甚至html自己，如下：

<style type="text/css"> //img标签，图像标签             img{                 padding-top:2.5px ;//定义内边距                 padding-left:15px ;//定义左边距                 cursor: pointer;///定义鼠标悬浮时的样式             }             h1{                 font-size: 26px;//定义字体大小                 text-align: center;//定义文本居中             }                a{                 color: red;                 text-decoration: none;///定义超链接消除下划线，有默认值             } </style> <body> //此时，以下标签将呈现相应的样式  <img src="">.........<img>  <h1>.........................................</h1>  <a>.........................</a> </body>

二、类选择器类选择器也很常见。一般来说，你可以自己命名一个名字（你喜欢，翠花，狗蛋，狗剩下的，说实话，不要开玩笑）作为你风格的名字，然后，在body你想在哪个标签中使用这种风格， class=表示你风格的名字。点击这里查看具体是什么样子

//代码： <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title>实验一</title>         <style type="text/css"> .狗剩{ width: 580px; height: 688px; margin:0 auto; } .border{ border: gray 5px double; } img{ padding-top:2.5px ; padding-left:15px ; cursor: pointer; } h1{ font-size: 26px; text-align: center; } .font1{ font-size: 12px; color: gray; text-align: center; } .solid{ border-bottom:1px solid gray;//这里是设置一个双实线的外框 } a{ color: red; text-decoration: none; } .font2{ font-size: 16px; color: black; text-indent: 2em; text-align:left; padding-left:3px ; } </style> </head> <body> <div class="狗剩 border"> <h1>传谷歌秘密开发Fuchsia项目 欲5年内取代Android</h1> <p class="font1">2018-07-20 07:00 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;腾讯科技 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.zhku.edu.cn/">我要评论(0)</a></p> <p class="solid"></p> <img src="img/exp1.jpg" title="点我也没用"/> <p class="font2">腾讯科技讯 据外媒报道，知情人士周四透露，在过去两年多的时间中，谷歌内部一群工程师一直 在开发一款软件移动操作系统,希望用它最终来替代目前占全球移动操作系统市场主导地位的Android。 </p> <p class="font2">不过随着这个团队的不断成长，它将不得不克服一些关于软件如何工作的激烈内部争论。</p> <p class="font2">这个名为Fuchsia的项目为了克服Android的局限性从零开始创建，原因是越来越多的个人设备和其他设备开始接入互联网。 它的设计是为了更好地适应语音互动和频繁的安全更新,无论是笔记本电脑还是微小的互联网连接传感器，所有的设备都 将使用同一的操作系统。</p> </div> </body> </html>

另外,类选择器也可以结合元素标签一起使用：

//例如，您可能希望只有段落显示为红色文本
<html>
<head>
<style type="text/css"> p.important { 
         color:red;} </style>
</head>
<body>

<h1 class="important">I never give up.</h1>//不显示红色

<p class="important">I never give up.</p>//显示红色

</body>
</html>

三、id选择器 id选择器和类选择器类似，不过，类选择器是这种形式 .XXX而id选择器是这种形式 #XXX，关于它们俩的区别在这里也做一下说明吧：我们都知道XHTML/HTML是一种文本语言，我们对一个文本里的内容可以一目了然的，但服务器不会，它是死的，因此，我们需要用一个方法来描述它。一般情况下，html标签像ul p这些基本的HTML标签就可以做到了，但是，其他的元素类型或者说布局选择，这些该怎么表示呢，此时id和class就派上用场了。它们就像元素的身份特征，描述了这个元素该长什么样。其中，id就像身份证，class就像衣服，只要你愿意，随时可以借其他人穿，也就是说class样式可以用在不同的元素标签中，在w3school可以点击查看一文中这样描述： *区别 1：只能在文档中使用一次与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。我的理解：对于区别一，（经本人实践，在我的谷歌浏览器完全可以显示，可能有些浏览器不可以，但我觉得这句话不是强调这个意思，它应该说的是一种规范，我们平时书写时就应该注意id应该唯一，为什么呢？试想一下，在一个大项目中，css样式绝对是庞大的，此时，但你用js来操控特定的html文本标签时，你打算选用id还是class？说到这里大家应该心里多少有点“bilibili高数”了吧，这也就是id不重复的原因，否则js则操控的不只是特定标签了。） *区别二：不能使用 ID 词列表不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。我的理解：对于区别2，我们都知道类选择器可以写成一下这个样子,而id不予许，它是独一无二的。

<style type="text/css"> .font1.font2{ //注意两个类名之间不能有空格 font-size:20px; color: green; } </style>
        <body>
        <p class="font1 font2">never give up</p>//注意两个都要写上，不然没效果（感觉其实有点鸡肋）
    </body>

*区别 3：ID 能包含更多含义类似于类选择器，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

#mostImportant {color:red; background:yellow;}
//这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

我的理解：对于区别三，额呃呃呃，可能语文不好，我觉得它的描述有点没意义，直到我偶然看到一篇国外的文章时点击这里才觉得“ ID 能包含更多含义”应该是体现在这个方面：当我们想实现这样的一个功能，用户打开一个页面时，自动定位到我们想让用户最先看到的地方时，我们可以这样做设置网址为http://XXXXXXXXXXXX#id名，此时打开后，会定位到id标签处。经过本人实现，确实如此，不过你实验时，为了确切体验到，你需要足够多的内容来填充浏览器，这样得到的效果更明显。在很多项目中为了规范其实id 和 class都会该出，像这样： <p id="XXX" class="VVVV"></p> //class是规定样式，id便于js操控。

四、属性选择器属性选择器的设置同样是为了我们方便修改某个标签的样式，这个很好用，特别在一个大项目中，为一个标签添加样式时，它的写法如下：

//形如：E[attribute] 选择器，表示选择拥有属性 attribute 的E元素，不考虑属性的值
a[rel] {
   color: red;
}

//还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有
// href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {
   color:red;
}

关于它其他格式的详细说明:可以参考这位博主，他写得很详细，每个样式都有例子，通俗易懂。五、后代选择器和子元素选择器对于后代选择器，如果您希望只对 A 元素中的 B元素应用样式，可以这样写A B{…………}，这样其他标签，即使有B也不会呈现相应的颜色，如：

h1 label {color:red;}

<h1>I <em>never<label>give</label></em> up</h1>//这里label虽是em的儿子，h1的孙子也会显示红色，
                                                  //注意这里区分下面的子元素选择器

对于子元素选择器，写法是这样的：A>B，如：

 h1>label {color:red;}//选择h1的亲儿子红色，例如：

<h1>I<label>never</label> <label>give</label> up.</h1>//这里 never give 会显示红色

<h1>I <em>never<label>give</label></em> up</h1>//这里没显示红色，因为label是em的儿子，h1的孙子

另外，子元素选择器也可以结合后代选择器，例如：

table.company td > p

//它表示，选择这样的P标签，它是td的亲儿子，且属于这样的一个表格，表格带有company属性
//例如：
!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> .company{ width: 280px; } table.company td > p{ font-size: 18px; color:gray; } </style>
    </head>
    <body>
        <table class="company">
            <td><p>这是真的</p></td> //它会显示相应样式
        </table>

        <table>
            <td><p>这是真的</p></td>//它不会
        </table>
    </body>
</html>

六、相邻兄弟选择器如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。这里注意两点：1.两个元素相邻 2.拥有着共同的父亲。3.它影响的是后面的元素即 A+B只影响B

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> h1 + p { color:red; } </style>
</head>
<body>
    <h1>This is a heading.</h1>//它没变
    <p>This is paragraph.</p> //只有它变红
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

//再比如：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> li + li { 
         font-weight:bold;} </style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>//他不会变红
    <li>List item 2</li>//他变红了，因为它是一的兄弟
    <li>List item 3</li>//他也变红，它是二的兄弟
  </ul>
</div>
</body>
</html>

另外，除了“+”，还有“~”，它的作用是查找某一个指定元素的后面的所有兄弟结点例如：

<style type="text/css"> h1 ~ p{ color:red; } </style>
</head>
<body>
    <p>1</p> //不变红
    <h1>2</h1>//不变红
    <p>3</p>//变红
    <p>4</p>//变红
    <p>5</p>//变红
</body>

七、伪类 w3school给出的解释是CSS 伪类用于向某些选择器添加特殊的效果。最常见的伪类可以说是超链接了：

//注意这几个是有顺序的，任意颠倒将不会呈现相应的样式
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

除此之外，伪类还有：（1）first-child （2）lang（这个基本没用过）

//first-child作用:选择某元素的第一个儿子是A。这个特定伪类很容易遭到误解，请看下面：
//例如：A:first-child，起作用的是A，不是A的第一个儿子
<html>
<head>
<style type="text/css"> p:first-child { 
         color:red;} li:first-child { 
         color:red;} </style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>//显示红色，p是div的第一个儿子
<ul>
<li>Intert Key</li>//显示红色，这个li为ul的第一个儿子
<li>Turn key <label>clockwise</label></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>notpush the brake at the same time as the accelerator.</em> </p>//不显示红色,因为不是选择
                                                                          //P的第一个儿子。
</div>
</body>

</html>

//对于lang，这样定义：lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，lang 类为属性值为
 //no 的 q 元素定义引号的类型：
 <html>
<head>
<style type="text/css"> q:lang(no) { quotes: "~" "~" } </style>

</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

运行效果：文字~段落中的引用的文字~文字

八、伪元素关于伪元素，因为经验不足，也是查了很多文章才慢慢理清，首先说一下为什么叫伪元素？为什么叫伪类？（1）伪元素可以通过添加相应的元素实现相应的功能个（2）伪类可以通过添加相应的类实现相应的功能伪元素有这几种： :first-letter 向文本的第一个字母添加特殊样式。 :first-line 向文本的首行添加特殊样式。 :before 在元素之前添加内容。 :after 在元素之后添加内容。

h1:before
  {
  content:url(logo.gif); //在每个h1之前加入图片
  }
 h1:after
  {
  content:url(logo.gif);//在每个h2之后加入图片
  }

关于它们详细说明查看这里这位大神在里面阐述了具体的由来，例子也很详细。

资讯详情

CSS选择器的详细说明（有误之处请指教）

Si4432无线芯片调试经验分享

CSS选择器的详细说明（有误之处请指教）

Si4432无线芯片调试经验分享

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录