10、选择器 - HTML5&CSS3.0基础部分-xyphf_选择器行首-优快云博客

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/74302021

1.选择器——E[属性名]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E[属性名]</title>
<style>
li[index]{background:red;}
li[index][title]{background:green;}
</style>
</head>
<body>

<ul>
    <li index="apple orange banana tomato apply"></li>
    <li title="xxx" index="apple tomato apply"></li>
    <li index="banana tomato apply"></li>
    <li index="apple orange apply"></li>
</ul>   

</body>
</html>

2.选择器——E[name=value] 相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li[index=apple]{background:red;}
</style>
</head>
<body>
    <ul>
        <li index="apple orange banana tomato apply"></li>
        <li title="xxx" index="apple tomato apply"></li>
        <li index="banana tomato apply"></li>
        <li index="apple orange apply"></li>
        <li index="apple"></li>
    </ul>
</body>
</html>

3.选择器——包含模糊匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊匹配</title>
<style>
li[index*=apple]{background:red;}/* 模糊匹配 */
</style>
</head>
<body>
    <ul>
        <li index="apple orange banana tomato apply"></li>
        <li title="xxx" index="apple tomato apply"></li>
        <li index="banana tomato apply"></li>
        <li index="apple orange apply"></li>
        <li index="apple"></li>
    </ul>
</body>
</html>

3选择器——行首行末匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li[index^=apple]{background:red;}/*行首*/
li[index$=tomato]{background:green;}/*行末*/


</style>
</head>
<body>
<ul>
    <li index="apple orange banana tomato apply"></li>
    <li title="xxx" index="apple tomato apply tomato"></li>
    <li index="banana tomato apply"></li>
    <li index="apple orange apply"></li>
    <li index="apple apply"></li>
</ul>
</body>
</html>

4.选择器——选择至结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
li[index~=apple]{background:red;}/*选择至结束*/
</style>
</head>
<body>

    <ul>
        <li index="appleorange banana tomato apply"></li>
        <li index="appletomato apply tomato"></li>
        <li index="banana tomato apply"></li>
        <li index="apple orange apply"></li>
        <li index="apple apply"></li>
    </ul>

</body>
</html>

5.选择器——

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li[index|=apple]{ background:red;}/* /^name$/ /^name-*/ */ 
</style>
</head>
<body>

<ul>
    <li index="appleorange banana tomato apply"></li>
    <li index="apple- tomato apply tomato"></li>
    <li index="banana apple-x tomato apply"></li>
    <li index="apple orange apply"></li>
    <li index="apple"></li>
</ul>

</body>
</html>