标签：title color 元素 red div 选择器 CSS
CSS 选择器内容
元素选择器
为某个元素设置样式
h1 {color:blue;}类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#firsrt {color:red;}属性选择器
对带有指定属性的 HTML 元素设置样式。
属性选择器
为带有title属性的所有元素设置样式
[title]{color:red;}属性和值选择器
为所有属性title的值为abc的元素设置样式
[title=abc]{color:red};属性和值选择器 多个值
所有属性值包含制定词汇abc的元素（abc与其他单词用空格隔开）设置样式
[title~=abc] { color:red;}属性和值选择器 多个值
为所有title属性值包含abc的元素设置样式
[title*="abc"]{color:red;}属性和值选择器 以某个值开头
为所有title属性值以abc开头的元素设置样式
[title^="abc"]{color:red;}属性和值选择器 以某个值结尾
为所有title属性值以abc结尾的元素设置样式
[title$="abc"]{color:red;}后代选择器
后代选择器可以选择作为某元素后代的元素
后代选择器在父元素与子元素之间用空格隔开
div h1{color:red;}子代选择器
子元素选择器（Child selectors）只能选择作为某元素的直接子元素
div>span{color:red;}相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
div+p{color:red;}全体兄弟选择器
可选择在另一元素后的所有元素，且这些元素有相同父元素。
div元素后面的p元素（且div、p元素必须是兄弟关系）
div~p{color:red;}选择器组 交集选择器
同时符合所有条件的元素
同时符合2个条件的元素：div元素、class值有one
div.one{color:red;}所有同时符合3个条件的元素：div元素、class值有one、title属性值等于test
div.one[title="test"]{color:red;}选择器组 并集选择器
至少符合一个条件的元素，不同条件之间用逗号隔开
所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素
满足这三个条件中的一个就可以
div, .one ,[title="test"]{color:red;}伪类 动态伪类
链接常用伪类
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开）
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
除了a元素，:hover、:active也能用在其他元素上
:focus
:focus指当前拥有输入焦点的元素（能接收键盘输入）
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
文本输入框一聚焦后，背景变红
input:focus{background:red;}伪类 结构伪类
:nth-child(n)
父元素中的第n个子元素
父元素下第n个元素，若为p元素则有效
p:nth-child(n){color:red}:nth-last-child
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
倒数第一个子元素
:nth-last-child(1)，:nth-of-type( )、:nth-last-of-type( )
:nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
父元素下第n个类型为p的元素
p:nth-of-type(n){color:red;}否定伪类 :not
:not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
除了p元素以外的元素
:not(p){color:red}伪元素
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
伪元素 ::first-line、::first-letter
::first-line可以针对首行文本设置属性
div::first-line{color:red;}::first-letter可以针对首字母设置属性
div::first-letter{color:red;}伪元素::before和::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
content属性为必须有的
div前插入一张图片
div::before{content:url("./abc.png")};div后插入一句话
div::after{content:"ymz";};标签：title,color,元素,red,div,选择器,CSS 来源： https://www.cnblogs.com/ymzi/p/12449129.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。