属性选择器
语法:[属性名]{ }选择含有指定属性的元素(元素即标签,eg:title、p、div等);
属性名=属性值;选择指定属性值元素
^=属性值;指定属性值及属性值开头的元素
&=属性值;指定属性值及属性值结尾的元素
*=属性值;指定属性值元素,只要含有某个属性值元素
Title标签:当鼠标悬浮到对应区域后,会显示对应title属性的属性值
<style>
[title]{color: red;}
[title=ab]{color: green;}
[title^=ab]{background-color: pink;}
[title$=ab]{font-size: 30px;}
[title*=c]{background-color: green;}
</style>
</head>
<body>
<h1 title="a" id="hh">满江红·写怀</h1>
<h3 title="ab">岳飞·宋</h3>
<p>····</p>
<p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p>
<p title="abab">驾长车,踏破贺兰山缺。</p>
<p title="c">壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河,朝天阙。</p>
</body>
伪类选择器
根据所有子元素进行排序
:Firsr-of-type :last-of-type :nth-of-type(n);在同类型中进行排序
否定伪装:将符合条件的元素去除 :not( )
<style>
ul,li{list-style: none;margin: 0;padding: 0;
li:last-of-type{color: red;}
li:not(.l1){background-color: pink;}
</style>
</head>
Lorem随机生成单词
伪元素:不存在的元素
::first-letter第一个字母
::first-line第一行
::selection选中的内容
::before在元素开始的位置前
::after在元素结束的位置后
:link表示未访问过的a的状态
:visited表示访问过的a的状态
(只针对超链接a标签,且由于隐私问题只能改变颜色)
: hover 鼠标移入后,元素的状态
: active 鼠标点击后元素的状态