今天刚开通博客，先自我介绍一下，Mike，大学没填志愿就跑到某培训机构学了两年，2012年出道，工作历程可谓坎坷，就不多说了，反正最终选择从
事web前端的工作。
结合出道至今的工作以及学习，写下今天这篇博文，与大家分享，并希望各位指点一二，感激不尽。
当年语文没学好，文采不好，我就直奔主题了。（主要写一下属性以及伪类吧）
1、元素选择器。
这个东西最简单，也最常见，就是以元素为选择器来添加样式
例：
html {color:black;} //设置html元素颜色black
div {color:gray;} //设置div元素颜色gray
h1 {color:silver;} //设置h1元素颜色gray

就是说，你想让某个元素使用某个样式，就直接写元素{样式} 即可。

2、选择器分组
分组就是把某几个元素写一起设置相同的样式即可
例：
div,p,strong{color:#FF0} //设置div,p,strong它们的颜色色值为 FF0
.part_one div a,.part_two a,.part_three p{color:#FFF} //设置.part_one div a 和 .part_two a 和 .part_three p 的文本颜色值为 FFF

3、类选择器
即元素中带有属性class在设置样式的时候可以使用 .classname{style} 这种方式来设置样式
例：

This is content.

.mydiv{color:#F00;}
这样就设置了class为mydiv的元素的文本颜色值为 F00

4、ID 选择器
即元素中带有属性id在设置样式的时候可以使用 #idname{style} 这种方式来设置样式
例：

This is content.

#mydiv1{color:#F00;}
这样就设置了id为mydiv的元素的文本颜色值为 F00
(其实跟类选择器没有什么大的区别，只是权重的区别，同一个元素id选择器的样式会覆盖类选择器的样式，这里就不做详细讲解了，)

5、后代选择器
这个也是很常见的一个选择器，只是可能名称听起来有点不太熟悉
举个例子大家就明白了
例：
div ul{color:#FF0}
这就是一个简单的后代选择器，就是谁下面的谁，就是这样了

6、子元素选择器
这个选择器，在最开始的时候，莫名其妙的就被我忽略了，知道后来，突然间看到了一个案例，才又想起来 - -、
还是用例子说话比较好
例：
div > h1{color:red;}

my h1

//这个有效

li h1

//这个有效

li h1

In this example, only the h1 in the first and second rows of divs will be selected, but not the h1 in the third row.
Because this sub-element selector only It will select its direct child element instead of its grandchild level, or elements below the grandchild level.
And the h1 in the third line belongs to the direct child element of li, not the direct child element of div. So it doesn’t work

7. The adjacent sibling selector
selects an element immediately after another element, and both have the same parent element
h1 p {color :red;}

header

text

Here, the content below h1 will be selected. The first p, but the second p cannot be selected, because the second p is not immediately after h1

li li {font-weight:bold;}

This style, It can only be applied to the second and third li elements in ul and ol, because the first li has no li immediately above it, so there will be no effect

8. Pseudo-class
It sounds very high-end, but if we say that a:link, a:visited, a:hover, a:active are all pseudo-classes, they are more friendly to the people. In fact, this a is called pseudo-class. Anchor class (the name
is even more grand...)
:focus
This is more practical and can be used to set the background in input text
input:focus{background-color:yellow; }

In this case, the background of the button will turn yellow when you click it, which is a bit unpleasant. You can expand it at will
For example:
input[type="text" ]:focus{background-color:yellow;}
This way the submit button will not turn yellow when clicked

:first-child
DOCTYPE must be declared so that:first-child can Valid in IE.
p:first-child {font-weight: bold;}
li:first-child {font-weight: bold;}

test words1

test words ul p

test words2

test words3

test words4

first-child pseudo-class. When I first understood it, I was a little helpless. I always thought it was the first element below it. It took me a long time to figure out that it turned out to be the first element.
meant it was above. The same as HTML
css will select the first p, that is:

test words1

, and the p in the second ul

test words ul p

, The remaining p will not be selected
The first li in each ul will also be selected because they have different parents
Note: If !DOCTYPE is specified, then Internet Explorer 8 (and later Higher versions) support the :focus pseudo-class.

:lang
To be honest, I really don’t know when to use it better - -, I hope someone who has seen it can also answer it for everyone, tks~!
:lang class defines the type of quotes for q elements with a lang attribute with value "no"
q:lang(no){quotes: "~" "~" }

text what?

9. Pseudo-elements (I use this less, so I checked the usage and wrote examples for everyone)
: first-letter to Add a special style to the first letter of the text (can only be used for block-level elements)
p:first-letter{color:#ff0000;font-size:xx-large;}
This sets the p medium The first letter color is F00 and the font size is xx-large

The

pseudo-element can be used with CSS classes:
p.article:first-letter{color: #FF0000;}

This is a paragraph in an article.

The above example will turn the first letter of all paragraphs with class article into red.

The following attributes can be applied to the "first-letter" pseudo-element:
font
color
background
margin
padding
border
text-decoration
vertical-align (only when float is none)
text-transform
line-height
float
clear

:first-line 向文本的首行添加特殊样式
这个我自己感觉没什么用，挺少见有只给首行加不同样式的
p:first-line{color:#0000ff;}

:before 在元素之前添加内容
这种我经常用在清楚浮动上面，效果挺不错
div:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}下面是网上的案例：
h1:before{content:url(images/logo.gif)}
在h1之前添加一个图片

:after 在元素之后添加内容
h1:after {content:url(images/logo.gif)}
在h1之后添加一个图片

10、属性选择器
对于 IE8 及更早版本的浏览器中的 [attribute=value]，必须声明。
下面列举出来属性选择器的用法
[attribute] 用于选取带有指定属性的元素。
例：
[title]{color:F00;}

hello h1~!

hello h2~!

这样就可以设置元素带有title属性的文本颜色为 F00 ,即h1的颜色将会被设置为 F00 ，但h2的将不被控制
*[title]{color:F00;} //设置带有title属性的元素文本颜色为 F00
a[title]{color:F00;} //设置带有title属性的a元素颜色为 F00
.mydiv ul li a[title]{color:F00;} //设置类名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00
#mydiv ul li a[title]{color:F00;} //设置id名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00

[attribute=value] 用于选取带有指定属性和值的元素。
这个功能在某些特定情况下是很实用的，比如高亮，就不用使用jq或者后台程序来判断，只用css来就可以实现
例：
a[target="_blank"]{color:yellow;} //这样就设置了所有target属性值为_blank的a元素的颜色为yellow
h1[title="mytitle"]{color:yellow;} //这样就设置了所有title属性值为mytitle的h1元素的颜色为yellow
上面两个例子看过之后，是否就会想出在某些特定情况下的高亮实现方法了呢？

[attribute~=value] 用于选取属性值中包含指定词汇的元素。
这种用法，第一次见到的时候还是在wordpress里面，这里就以一个简单的例子来看一下
img[title~="first"]{border:3px solid yellow} //这样就设置了下方图片title 属性中包含单词first的图片会带有黄色边框

this is first img
this is second img

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[class|=my]{background:yellow;}

this is header

this is text

this is content

只有前四个才会应用样式，后三个都不行。但是我不明白为什么第五个就也不行，希望有能为为大家解答的大大出现

[attribute^=value] 匹配属性值以指定值开头的每个元素。
这个用法也是在wordpress里面常见的，控制性很强大
div[class^="my"]{background:#FF0;}

this is first

//这个会有效果

this is first

//这个会有效果

this is first

//这个会有效果

this is second

this is third

[attribute$=value] 匹配属性值以指定值结尾的每个元素。
这个功能就跟上面的差不多了，上一个是开头，这个是结尾
div[class$="my"]{background:#ffff00;}

this is first

this is second

this is third

//这个会有效果

this is third

//这个会有效果

this is third

//This will work

[attribute*=value] matches every element whose attribute value contains the specified value.
The above two, one at the beginning and one at the end, this one contains
div[class*="my"]{background:#ffff00;}
div[class$="my"]{background :#ffff00;}

this is first

//This will have an effect

this is second

//This will have an effect

this is second

this is third

//This will have an effect

this is third

//This will have an effect

this is third

//This will have an effect

I don’t know about these things on the blog No matter how many people can see it in the garden, I will just treat it as recording some of my own things.
This blog post is not in-depth, and I don’t have much of my own insights. There is still a lot to learn. It is just some summaries that I have seen and used in my work and study. If there are any mistakes, I hope everyone will Thank you very much for
pointing me out and learning from each other.

Finally, I found that writing this thing is quite tiring. I really don’t know how those great people who have written hundreds and thousands of blog posts wrote it. I admire them, haha!

Related labels：

css Selector

source：php.cn

Previous article：RunJS personal recommendation (easy-to-use JS, CSS real-time preview, editing, management and other functions)_html/css_WEB-ITnose Next article：Codeforces Round #FF (Div. 1)-A,B,C_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

About CSS selectors_html/css_WEB-ITnose

my h1

li h1

li h1

header

hello h1~!

hello h2~!

this is header