码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2018-07-07 17:29:58      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:字母   一个   活动   ali   round   child   属性   开头   inpu   

一.css选择器用于选择你想要的元素的样式

选择器 示例 示例说明
class intro 匹配所有的class="intro"的元素
#id #firstname 匹配所有id="firstname"的元素(id的值不可以重复
* * 匹配所有的元素
element p 匹配所以的<p>元素
element element div p 匹配所有<div>元素内的<p>元素
带有特殊符号(, > + ~)的选择器
element,element div,p 匹配所有<div>元素和<p>元素
element>element div>p 匹配<div>下所有直接子元素<p>元素
element+element div+p 匹配与<div>元素同级紧接着之后的<p>元素
element1~element2 p~ul 选择<p>元素之后的每一个<ul>元素
属性选择器
[attribute] [href] 选择所有带有href属性的元素
[attribute=value] [href="https://www.baidu.com"] 选择所有href属性的值为https://www.baidu.com的元素
[attribute^=value]或[attribute|=value] [href^="https"]或[href|="https"] 选择每一个href属性的值以"https"开头的元素
[attribute$=value] [href$="com"] 选择每一个href属性的值以"com"结束的元素
[attribute*=value]或[attribute~=value] [href*="com"]或[href~="com"] 选择每一个href属性的值包含"com"的元素
伪类选择器
:link a:link 选择所有未被访问的链接
:visited a:visited 选择所有已经被访问过的链接
:active a:active 选择所有活动的链接
:hover a:hover 鼠标在链接上时
:focus input:focus 选择具有焦点的输入元素
:first-letter p:first-letter 选择每一个<p>元素的第一个字母
:first-line p:first-line 选择每一个<p>元素的第一行
:first-child p:first-child 指定只有当<p>元素是其父元素的第一个子元素的样式
:before p:before 在每个<p>元素之前插入内容
:after p:after  在每个<p>元素之后插入内容

 

css选择器

标签:字母   一个   活动   ali   round   child   属性   开头   inpu   

原文地址:https://www.cnblogs.com/longyufengyun/p/9277451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!