`
applepieone
  • 浏览: 11574 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

css选择器、伪类易错点总结

    博客分类:
  • css
css 
阅读更多

1.CSS 多类选择器

<p class="important urgent warning ">
This paragraph is a very important and urgent warning.</p>

   用一下代码都可以匹配

.important.warning {background:silver;}
.important.urgent.warning {background:silver;}

 2.CSS ID选择器

#intro {font-weight:bold;}
<p id="intro ">This is a paragraph of introduction.</p>

   大小写敏感

3.CSS 属性选择器

    1)属性和属性值必须完全匹配

p[class="important warning "] {color: red;}
//p[class="important "] {color: red;} error
<p class="important warning ">This paragraph is a very important warning.</p>

  2)根据部分属性值选择

p[class~ ="important "] {color: red;}
<p class="important warning ">This paragraph is a very important warning.</p>

 3)子串匹配选择器

a[href* ="w3school.com.cn"]
<a href="http://www.w3school.com.cn/css/">CSS</a>

4)特定属性选择器

*[lang| ="en"] {color: red;}
<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>

   选择 lang 属性等于 en 或以 en- 开头的所有元素

4.CSS后代选择器

ul em {color:red; font-weight:bold;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em>
</li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

 5.CSS子元素选择器

    不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,自己的第一代

h1 > strong {color:red;}
<h1>This is <strong>very</strong><strong>very2</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

 

6.CSS相邻兄弟元素

h1 + p {margin-top:50px;}
<h1>This is a heading.</h1>
<p>This is paragraph. </p>
<p>This is paragraph.</p>

 7.CSS伪类

   1)锚伪类

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
 

   2)first-child伪类

      first-child 伪类来选择元素的第一个子元素

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

   在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素

     最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

 

练习时间到啦

eg1:

table.company td > p

 下面的选择器会选择作为 td 元素子元素的所有 p 元素 ,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性

 

eg2:

html > body table + ul {margin-top:20px;} 

    选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

 

eg3:匹配第一个 <p> 元素

<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

 

 eg4:匹配所有 <p> 元素中的第一个 <i> 元素

<html>
<head>
<style type="text/css">
p > i:first-child {
color:red;
}
</style>
</head>
<body>
<p>some <i>text</i> . some <i>text</i>.</p>
<p>some <i>text</i> . some <i>text</i>.</p>
<p>some<strong><i> test</i></strong></p>
</body>
</html>

 选择器匹配所有 <p> 元素中的子类为<i>的第一个 <i> 元素

 

 eg5:匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i> . some <i>text</i> .</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

 

分享到:
评论

相关推荐

    css+div的一些易错点小结

    CSS选择器的优先级是另一个常见的难点,要了解ID选择器、类选择器、标签选择器以及内联样式之间的优先级关系,避免冲突。 7. **响应式布局**: 当今的网页设计需要考虑多种设备和屏幕尺寸,因此,理解并应用媒体...

    H5C3的易错点与@media + rem布局,以及动态图电池和旋转.zip

    3. **CSS选择器的使用**:开发者经常在选择器中犯错误,比如使用了无效的选择器或者没有正确地组合选择器。了解并熟练掌握ID选择器、类选择器、元素选择器等将有助于写出更有效率的CSS。 4. **JavaScript与DOM交互*...

    代码编写规范(java、html、css、js).pdf

    - **选择器与规则**:尽量减少使用通配符选择器,优先使用类选择器,提高样式表的效率和可维护性。 - **命名约定**:推荐使用BEM(Block Element Modifier)命名方式,提高代码可读性。 - **格式化**:每条声明...

    总结js中的一些兼容性易错的问题

    下面将详细总结和分析这些常见的兼容性易错问题,帮助开发者更好地理解和掌握如何在不同浏览器环境中编写兼容性良好的JavaScript代码。 一、属性相关 在JavaScript中,我们通常将HTML元素的特征(attribute)和属性...

    基于servlet+jsp+Oracle的在线问题解决小系统

    6. **Servlet过滤器和监听器**:可能用到过滤器进行权限控制,监听器监听某些特定事件,如session的创建和销毁。 【总结】 "基于servlet+jsp+Oracle的在线问题解决小系统"是一个完整的Web应用,集成了服务器端编程...

    学习jquery的资料,很实用的啊

    在JavaScript中,DOM(文档对象模型)操作通常繁琐且易错,而jQuery提供了一套友好的选择器,如ID选择器、类选择器等,使得选取和操作DOM元素变得简单。例如,`$("#elementId")`可以轻松选取ID为"elementId"的元素,...

    javascript动态设置样式style实例分析

    在JavaScript中,动态设置样式style是一种常见的操作,它允许开发者在运行时改变元素的外观。通过修改元素的`style`对象,我们...在实际应用中,要结合CSS选择器、事件监听和DOM操作,以创建更复杂的交互式用户体验。

    EditPlus_4.0安装版.zip

    《EditPlus:全能文本编辑器的深度解析与应用指南》 EditPlus是一款高效、轻量级的文本编辑器,尤其受到程序员和Web开发者们的青睐。它不仅具备基础的文本编辑功能,更集成了多种高级特性,如代码高亮、自动完成、...

    coevolution

    5. **TypeScript**:为了应对JavaScript语法的复杂性和易错性,Microsoft推出了TypeScript,这是一种静态类型的语言,它向下兼容JavaScript,并提供了更强大的类型系统和工具支持。TypeScript的出现,不仅提高了代码...

Global site tag (gtag.js) - Google Analytics