-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
重温css的选择器 #216
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
css选择器,是前端的基本功,只要你是一个前端,这个一定要掌握!今天之所以要重温一下css选择器,主要是和大家再复习一下css选择器中的一些常用符号的使用,例如“+、~、^、$、>、*”等的使用!之所以要复习呢,是因为我一个写后端的哥们,前端写的也很好,但是他今天突然问我,css中加号和大于号是啥意思?我说,这个貌似jquery中也有吧!好吧,可能这些符号不常用,造成我们对这些符号的陌生!那么今天,我们一起再来复习一下吧!
我之前的文章
大家在右侧搜索框中搜索“选择器”,会发现,我之前写过css用伪类nth-child,进行奇偶行的选择。今天,关于css3伪类选择器,我就不多描述了!同时大家也可以看一下我之前写的“jquery常用选择器总结”,其实,jquery选择器和css选择器类似!特别是在属性选择和组合选择上面!
css选择器之特殊符号
1、>(大于号)
大于号代表选择子元素,这个我们经常用,值得注意的是 h1>strong 和h1 strong的区别
这2个都是选择子元素,但是 h1>strong 只选择某个元素的子元素。例如如下:
h1>strong ,只有第一个h1下面的strong被选中,第二个不起作用。但是 h1 strong,所有的h1下面的strong都被选中了。
2、+号
选择相邻兄弟,这点和jquery相同。
例如:
属性选择器
css属性选择器用处也比较多,之前参加第二节css开发者大会的时候,有的老师分享,他们公司基本上都是用属性选择器来写css,这样字面明了,他们都不怎么用class。我感觉这个要分情况,那个老师讲的项目是angularjs的,因此属性选择器比较实用!
举几个例子
1、把包含标题(title)的所有元素变为红色
如下写:
2、将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
3、指定将https://www.haorooms.com/post/css_wl_wys 这篇文字颜色变红
当然也可以多个属性一起,这里就不多举例了!
4、属性与属性值必须完全匹配
我们来看一个class的div
我们用class选择,大家都晓得,很简答,但是用属性选择,我们用如下:
是选择不到的,因为还有一个haorooms。因此,必须这样写:
5、根据部分属性值选择
看到上面多个属性必须完全匹配,很不爽,那么有没有可以部分匹配属性的方法呢?答案是有的。还是上面的例子,我们如下选择就可以了!
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
6、字符串匹配属性选择器
上面说到了~(波浪号选择),有朋友会把他和*= 搞混,例如,如下例子:
我们可以用[haorooms * ="haoroom"]来选择,这个和~的区别就是包含,~是几个属性直接有空格,空格中的一个。*=没有空格,但是包含某个字符。除此之外,还有开头选择和结尾选择,和jquery类似:
7、特定属性选择类型
请看下面的例子:
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
小结
今天就先总结到这来,css选择器,是比较重要的知识点,希望大家多多复习,温故而知新!希望这篇文章对您有所帮助!
The text was updated successfully, but these errors were encountered: