CSS Property Selector instance

<! DOCTYPE html>
/* Element Selector */

UL {   padding:0;margin:0;width:450px;border:1px dashed #666;p adding:10px 5px;} Ul:after {  /* Child Block Open parent block */content: ';  /* Add an empty content element */display:block at the tail of the child element;  /* and set to block-level display */clear:both;   /* Clear two-side floating */}li {list-style:none;/* Remove default list item style */float:left;  /* left floating */width:40px;  /* Set width */height:40px; /* Set height */line-height:40px; /* text vertically centered */text-align:center; /* text horizontally centered */border-radius:50%; /* Set border fillet */background:skyblue; /* Background color sky blue */margin-right:5px; /* Right margin between each ball */}
/* Select by attribute name: For example, id attribute */

*[id] {   /* equivalent to:  li[id]*//*background-color:red;*/}
/* Select by attribute name and value: For example, select the element class= "green" */

Li[class= "Green"] {/*background-color:lightgreen;*/}
/* Select the element that contains the specified word in the class attribute value */

Li[class ~= "Red"] {Background-color:brown;}
/* Select the class style element that starts with the ' ph ' letter */

Li[class ^= "ph"] {background-color:coral;}
/* Select the class style element that ends with ' s ' */

Li[class $= "s"] {background-color:lime;  /* Turquoise */}
/* Select the class style element that includes the specified letter ' e ' in the attribute value:; */

li[class *= "E"] {background-color:yellowgreen; /*234 background is yellow green */}</style>