css 选择器

一 .上下文选择符。基于祖先或同胞元素选择一个元素。 上下文不仅仅是父子或者爷孙的关系 无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。

二 .ID和类选择符。基于id和class属性的值(你自己设定)选择元素。

三 .属性选择符。基于属性的有无和特征选择元素。

一.
特殊的上下文选择符

1.子选择符 >

标签1 > 标签2

标签2必须是标签1的子元素,或者反过来说,标签1必须是标签2的父元素。与常规的上下文选择符不同,这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

2.紧邻同胞选择符+

标签1 + 标签2

标签2必须紧跟在其同胞标签1的后面。

3.一般同胞选择符~

标签1 ~ 标签2

标签2必须跟(不一定紧跟)在其同胞标签1后面。

  1. 通用选择符 *

通用选择符*(常被称为星号选择符)是一个通配符,它匹配任何元素,因此下面这条规则

  • {color:green} 会导致所有元素(的文本和边框)都变成绿色。
    二 .
    ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要
    的上下文,排除无关的标记,而只选择该上下文中的标签。
    相对来说,类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符,以便我们
    为这些元素应用相同的CSS样式。而且,使用类也让为不同标签名的元素应用相同的样式成
    为可能。
    三.
    (1)属性名选择器
    标签名[属性名] 选择任何带有属性名的标签名。 img[title] {border:2px solid blue;}
    (2) 属性值选择器
    标签名[属性名="属性值“ 选择任何带有值为属性值的属性名的标签名。
    img[title="red flower"] {border:4px solid green;}
    下面的会被加上css
    <img src="images/red_flower.jpg" title="red flower" alt="red flower" />
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器的种类有很多,可以到 w3cschool 去看看了解一下。也可以在 慕课网 中实践一下。 一、上下文选择器 ...
    天承本草2020阅读 860评论 0 0
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 885评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,875评论 0 5
  • Part 1 :盒模型(box model) "every element in web design is a ...
    野味狼果阅读 785评论 1 11