面试题篇---css3中我不常用的选择器

最新推荐文章于 2023-03-29 10:40:09 发布

徐行莫停

最新推荐文章于 2023-03-29 10:40:09 发布

阅读量586

点赞数 1

分类专栏：面试题文章标签： css我不熟悉的选择器

本文链接：https://blog.csdn.net/qq_35765126/article/details/79470714

版权

面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

为什么要写不常用的呢。。因为怕被问，开始想着很好理解的，结果看了下解释很懵，所以还是自己写一遍吧，代码就是在w3school上写的，可能我也理解的不对。。。但是目前就理解到这种程度~~~~高中语文就很烂，上了大学变本加厉

div+p 选择紧接在
元素之后的第一个
元素。
【w3school上贴的所有，emmm但是只对第一个p标签有作用】
[attribute] [target] 选择带有 target 属性所有元素。

img[alt] {border: 5px solid red;}
a[href="http://www.w3school.com.cn/"]{background: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
p[class="important warning"] {color: red;}   //不匹配类名是important的，是全部匹配
p[class~="important"] {color: red;}   //表示类名之中包含important的p元素

[abc^=”def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”] 选择 abc 属性值中包含子串 “def” 的所有元素

a[href^="baidu.com."]{background: red;}   
设置所有href属性以“baidu.com”开头的a标签的样式

*[lang|=”en”] {color: red;} 选择lang属性以en开头的【该值必须是整个单词。】

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

img[src|="figure"] {border: 1px solid gray;}    src以figure开头的图片

element1~element2 p~ul 选择前面有
元素的每个
- 元素。
：first-of-type 选择首个指定元素

div下的首个p元素
div p:first-of-type
{
    background:#ff0000;
}

这里写图片描述

only-of-type
有点晕，实践了一下我觉得他应该是设置的是“父元素下只有子元素是含有一个p元素【可以有其他标签，但是p标签只能有一个】的子元素” 下面举了三个例子说明


为了验证这句话，看一下代码
p:only-of-type
{
background:#ff0000;
}
</style>
</head>

<body>
<div>
<p>这是1段落。</p>
</div>
<div>
<p>这是2段落。</p>
</div>

<div>
<p>这是一个段落。</p>
</div>

</body>

这里写图片描述

<style> 
p:only-of-type
{
background:#ff0000;
}
</style>
</head>

<body>
<div>
<p>这是1段落。</p>
</div>
<div>
<p>这是2段落。</p>
</div>

<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>  【注意：我给这个div里多添加了一个p，看下面的代码截图会发现css样式对这两个p都没作用，】
</div>

</body>

这里写图片描述

<body>
<div id="div1">
 <div><p>这是1段落。</p></div>
 <div><div>这是2段落。</div><p>这是3段落。</p><p>这是4段落。</p></div>【样式失灵了 因为p标签有2个】

 <div><p>这是1段落。</p><span>ssss</span></div> 【样式显灵了 因为p标签只有一个，虽然也设置了span标签】
</div>

</body>

这里写图片描述
10. only-child 选择父元素下只有一个指定标签的子元素【(/ □ )】

<body>

<div>
    <p>这是一个段落。</p><p>这是一个段落。</p>【css失灵】
</div>
<div>
    <p>这是2段落。</p><span>这是span。</span>【css失灵】
</div>
<div>
     <p>这是3段落。</p>【css显灵】
</div>
<div>【css失灵】
      <span>这是一个 span。</span>
      <p>这是一个段落。</p>
</div>

<p><b>注释：</b>Internet Explorer 不支持 :only-child 选择器。</p>

</body>

这里写图片描述
11. :root 设置文档根元素html的样式
12. :empty p:empty 选择没有子元素的每个

元素（包括文本节点）。
13. :target #news:target 选择当前活动的 #news 元素。【锚点的时候用，比如有一个a标签，href=”#news”,当我点击这个a标签时，id是news的盒子就显示样式】
14. :enabled input:enabled 选择每个启用的元素。
15. :disabled input:disabled 选择每个禁用的元素
16. :checked input:checked 选择每个被选中的元素。
17. :not(selector) :not(p) 选择非

元素的每个元素。
18. ::selection ::selection 标签下选择被用户选取的元素部分。【被选取的部分只能设置：color、background、cursor 以及 outline。】，你也可以不设置具体表签下， ::selection｛｝表示页面下所有内容被选时都有此样式

#d1::selection
{
color:#ff0000;
}
#d1::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div id="d1">这是 div 元素中的文本。<span>这是p 元素中的文本。</span></div>【我试了一下，只有在选类名为d1时样式显灵，如果我选择d1的子元素span里的元素时 样式失灵】

徐行莫停

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题篇---css3中我不常用的选择器

为什么要写不常用的呢。。因为怕被问，开始想着很好理解的，结果看了下解释很懵，所以还是自己写一遍吧，代码就是在w3school上写的，可能我也理解的不对。。。但是目前就理解到这种程度~~~~高中语文就很烂，上了大学变本加厉div+p 选择紧接在元素之后的第一个元素。【w3school上贴的所有，emmm但是只对第一个p标签有作用】 [attribute] [target] ...
复制链接

扫一扫

专栏目录